选择器
jQuery中的选择器就是一个标记，为了快速获取指定的标签
jQuery中常见选择器： ID选择器 class选择器 element选择器
子代选择器 后代选择器 相邻兄弟选择器 分组选择器...
jQuery中的加载函数
$(function() {});
//获取元素 $相当于最大的一个父类顶层容器
$("元素id或者class或标签等等");
使用js写一个弹窗与jQuery写一个弹窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 导入jQuery库 script -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<!-- 原生态JavaScript实现点击弹窗 -->
<script type="text/javascript">
// 加载函数
// 1.window.onload = function(){} 1次
// 2.window.addEventLinstener('load',function(){}); 多次
window.onload = function() {
// 获取按钮
var btn = document.getElementById('btn1');
// 设置按钮的事件
btn.onclick = function() {
alert(123)
}
};
</script>
<!-- jQuery实现点击弹窗 -->
<script type="text/javascript">
// 加载函数
// 1.标准写法 $(document).ready(function(){});
// 2.简写写法 $(function(){})
jQuery(function() {
// 获取按钮设置点击事件弹窗
// 这种编写代码的方式称为"链式写法"
$("#btn2").click(function() {
alert(123)
});
});
</script>
<!-- jQuery的文件的结构 -->
<script type="text/javascript">
// 1.打开jQuery库查看后 有一个基本架构
/*
(function(){
}())
上述这种结构称为自执行函数结构，作用就是自己定义调用自己自动执行
*/
// 函数
function add() {
alert(123)
}
// 手动调用
// add();
// 自执行函数的定义
// 闭合函数
(function() {
// alert('自执行函数');
}())
// $ 和$()的作用
// $这个符号是在jQuery库中定义 属于jQuery
// $有点类似原生态js的window对象
// 在jQuery中，$作为了window对象中的一个属性（对象属性，对象函数）
console.log(window);
// window.jQuery = window.$ = jQuery;
// $等价于jQuery
// Person.add(); new Person().add();
// $ 有点类似Java的类 each isFunction
// $() 相当于类的构造方法
console.log($.type($));
// 判断$的类型
console.log(Object.prototype.toString.call($));
// $() 括号中可以根据需求传入指定的参数
// 根据参数不同，意思不同
// 1.参数为匿名函数时，意思：加载函数 $(function(){});
// 2.参数为字符串时，有两层意思
// 2.1 获取页面元素（选择器） $("#id") $(".class")
// 2.2 创建标签 $("<a></a>");
// 3.参数为DOM对象（js对象） 意思：转换
// 明天 js对象《---》jQuery对象
var b1 = document.getElementById('btn1');
var $b1 = $("#btn1");
// console.log(b1 == $b1); //false
</script>
</head>
<body>
<h3>jQuery与js的使用</h3>
<hr>
<button id="btn1" type="button">点击后弹窗[原生态javascript]</button>
<button id="btn2" type="button">点击后弹窗[jQuery]</button>
</body>
</html>
jQuery中的一些选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* *{margin: 0px;padding: 0px;} */
</style>
<!-- jQuery -->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 选择器
// jQuery中的选择器就是一个标记，为了快速获取指定的标签
// jQuery中常见选择器： ID选择器 class选择器 element选择器
// 子代选择器 后代选择器 相邻兄弟选择器 分组选择器...
// 加载函数
$(function() {
// ID选择器的使用
// 需求：找到id为ul1的标签设置color字体颜色
// jQuery的样式设置 通过css方法进行设置即可
// 一个属性设置
// $("#ul1").css("color","red");
// 多个属性的设置 通过json格式进行
// {"属性":"属性值","属性":"属性值"}
$("#ul1").css({
"background":"red",
"color":"yellow"
});
// 类选择器 一组元素
$(".sb").css("background","red");
// 元素选择器 一组元素
$("li").css("background","red");
// 通配符选择器 *
$("*").css("background","red");
// 群组选择器 可以同时设置多个标签的样式
$("#ul1,.oBox").css("background","red");
// 设置ul下的子li的字体颜色
$("#ul1>li").css("color","red");
// 所有后代
$("#ul1 li").css("color","red");
// 过滤选择器的使用
// :first 获取第一个节点
$("#ul1>li:first").css("background","red");
:last 获取最后一个节点
$("#ul1>li:last").css("background","red");
// 获取指定的节点 下标
$("#ul1>li:eq(2)").css("background","yellow");
// even 奇数 过滤下标为偶数，位置为奇数的标签
$("#ul1>li:even").css("background","yellow");
// odd 偶数 过滤下标为奇数，位置为偶数的标签
$("#ul1>li:odd").css("background","yellow");
// gt() 大于 不包括自己
$("#ul1>li:gt(2)").css("background","yellow");
// lt() 小于不包括自己
$("#ul1>li:lt(2)").css("background","yellow");
// 区间设置背景颜色
// 设置item2 item3 item4 背景 1 2 3
// 注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标胡i重新编号。
$("#ul1>li:gt(0):lt(3)").css("background","yellow");
// lt在前
$("#ul1>li:lt(4):gt(0)").css("background","yellow");
// 案例：隔行换颜色
// $("table>tbody>tr:gt(0):even").css("background","red")
$("table tr:gt(0):even").css("background", "red");
$("table tr:gt(0):odd").css("background", "yellow");
// 找到包含YANGWENGUANG内容的li标签设置背景
$("#ul1>li:contains('YANGWENGUANG')").css("background","yellow")
// 表单选择器
$(":input").css("background","red");
$("form>input:input").css("background","red");
// 获取普通文本
$("form>input:input:text").css("background","red");
// 单选
console.log($("#demo1>input:radio"));
// 获取选中
console.log($("#demo1>input:radio:checked"));
// 获取value
console.log($("#demo1>input:radio:checked").val());
// 复选框
console.log($("#demo2>input:checkbox"));
// 获取选中的复选框
console.log($("#demo2>input:checkbox:checked"));
// each方法
//
$("#demo2>input:checkbox:checked").each(function(){
console.log($(this).val());
});
//
var checkboxs = $("#demo2>input:checkbox:checked");
// i 下标
// k 元素
$.each(checkboxs,function(i,k){
// console.log(i,k);
console.log($(k).val())
});
});
</script>
</head>
<body>
<script type="text/javascript">
// console.log(window)
</script>
<ul id="ul1">
<li>item1</li>
<p>hehe</p>
<li class="sb">item2</li>
<li>item3</li>
<span>heihei</span>
<li>item4 YANGWENGUANG</li>
<li class="sb">item5</li>
<p>lvelve</p>
<ol>
<li>abc1</li>
<li>abc2</li>
<li>abc3</li>
<li>abc4</li>
<li>abc5</li>
</ol>
</ul>
<hr>
<div class="oBox">
我是div
</div>
<hr>
<h4>表格隔行换颜色</h4>
<table border="1" width="100%" height="400">
<tr style="background-color: gray;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<hr>
<h4>表单选择器</h4>
<form action="">
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="text">
<input type="submit">
<input type="reset">
<input type="password">
<input type="image">
<select name="" id="">
<option value =""></option>
</select>
<textarea rows="12" cols="4"></textarea>
</form>
<input type="text">
<hr>
<div id="demo1" style="width: 200px;height: 200px;border: 1px solid red;">
<input checked="checked" type="radio" name = "sex" value = "男">男
<input type="radio" name = "sex" value = "女">女
<input type="text">
</div>
<hr>
<div id="demo2" style="width: 200px;height: 200px;border: 1px solid red;">
<input type="checkbox" value = "杨文广">杨文广
<input checked = "checked" type="checkbox" value = "李小鹏">李小鹏
<input type="checkbox" value = "沪青棒">沪青棒
<input checked = "checked" type="checkbox" value = "写开进">写开进
<input checked = "checked" type="checkbox" value = "等延康">等延康
<input type="text">
</div>
</body>
</html>