选择器

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
</ul>
<div id="box"></div>
</body>
</html>
<script>
    console.log($('ul li')) // 返回伪数组

    console.log($('#box')) // 返回伪数组

    console.log($('ul li:first-child'))

    console.log($('ul li:nth-child(1)'))    // 1 就是第一个(按照 css 的来)
</script>

特殊选择器
console.log($('ul li:first'))   // 第一个
    console.log($('ul li:last'))    // 最后一个
    console.log($('ul li:eq(0)'))   // 第一个

    let index = 2
    console.log($(`ul li:eq(${index})`))

    console.log($('ul li:odd'))     //奇数（索引）
    console.log($('ul li:even'))    // 偶数（索引，包括 0 ）

筛选方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<ul>
    <li class="a">111</li>
    <li>222</li>
    <li class="active">333</li>
    <li>444</li>
    <li class="a">555</li>
    <li>666</li>
    <li class="a end">777</li>
    <li>888</li>
</ul>
<div id="box"></div>
</body>
</html>
<script>
   // 二次筛选
    console.log($('ul li').first())
    console.log($('ul li').last())
    console.log($('ul li').eq(3))
    /******************************************************************/
    console.log($('ul li.active'))  // 类名

    // next
    console.log($('ul li.active').next())
    console.log($('ul li').first().next())  //链式
    console.log($('ul li.active').nextAll())    // 后面所有的
    // nextAll() 可以传参数
    console.log($('ul li.active').nextAll('.a'))   //  选出后面所有类名为 a 的
    // nextUntil() 从当前开始到……为止，不传参到最后，传参就到这个参数停止（不包括这个参数）
    console.log($('ul li.active').nextUntil())
    console.log($('ul li.active').nextUntil('.end'))  // 到类名为 end 停止（不包含 end）
    /******************************************************************/

    // prev
    console.log($('ul li.active').prev())   //之前的一个
    console.log($('ul li.active').prevAll())    // 之前所有的
    console.log($('ul li.active').prevUntil())  // 与  nextUntil() 类似
    /******************************************************************/

    // parent
    console.log($('ul li').parent())    // 找这个节点的 父节点
    console.log($('ul li').parents())   //   找这个节点的 所有父节点 直到 html这个节点

    // siblings
    console.log($('ul li.active').siblings())   // 除了本身，找其余的兄弟节点

    // children
    console.log($('ul').children()) // 所有的 子节点（只找 亲儿子）

    // find
    console.log($('ul').find('li')) // 深度查找，ul下的所有 li 节点，(不光找儿子，还找孙子以及后代)

    // index
    console.log($('ul li.active').index())  // 获取这个节点的索引（同级对比）
</script>
posted @ 2022-09-03 19:46  千里长安街  阅读(35)  评论(0)    收藏  举报