首页 前端知识 jQuery选择器介绍:eq()、next()、nextAll()、prev()、prevAll()、parents()、siblings()、children()、find()、index()

jQuery选择器介绍:eq()、next()、nextAll()、prev()、prevAll()、parents()、siblings()、children()、find()、index()

2024-06-10 23:06:18 前端知识 前端哥 68 936 我要收藏

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标签:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11818.html
标签
评论
发布的文章

第一次实验补充

2024-06-18 09:06:14

html5shiv,从入门到深入

2024-05-09 10:05:07

html5基础入门

2024-06-18 09:06:07

HTML5学习简记

2024-06-18 09:06:20

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!