1、 jQuery基本选择器介绍:
- jQuery选择器分为:基本选择器、特殊选择器、筛选方法;
- 选择器选择出来的标签,返回值是伪数组;
- 基本选择器:
- 基本选择器格式:$(“css选择器格式”) ;
- 这里jQuery选择器括号里面,css样式选择方式在这里都可以用,比如css里面选择器方式有:“#box”(id选择器)、“.box”(class选择器)、“ul li”(选择父标签下面的子标签)等等;
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<div id="box"></div>
<script src="./lib/jquery-3.6.1.js"></script>
<script>
console.log($("ul li"))//选择所以li标签,返回伪数组
console.log($("#box"))//返回伪数组
</script>
</body>
结果:
2、特殊选择器
- 特殊选择器指的是不能用css选择器样式了,而且css选择器选择子标签是索引值是从1开始;
- 而jQuery和js一样,选择器索引值是从0开始算起;
- 特殊选择器有自己一套选择机制;
- 拿“选择ul下的li标签”为例:
选择ul下第一个li标签:first
console.log($("ul li:first"))//选择第一个标签
选择ul下最后一个li标签:last
console.log($("ul li:last"))//选择最后一个标签
选择ul下任意一个孩子li:eq(选择孩子的索引)
console.log($("ul li:eq(索引)"))//选择索引为0的li标签
eq的用法:传变量来选择子标签:
let index = 2
console.log($(`ul li:eq(${index})`))//eq的用法
- eq括号里不仅仅是固定索引,也可以通过这种传变量的方式确实索引,选择标签;
选择ul下“索引为奇数”的li标签: