jquery查找筛选器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li class="begin">111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li id="end">555</li>
    <li>666</li>
</ul>
<div class="outer">父母层级outer
    <p>儿女层级wangyue</p>
    <div class="inner">inner
    <p>孙子层级inner p</p>
    </div>
</div>
<p>777777</p>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="/static/jquery.min.js"></script>
<script>


    //$('li').eq(2).css('color','red')
    //查找筛选器非常重要
   // $('.outer').children('p').css('color','red')//找儿女层级
   // $('.outer').find('p').css('color','red')//找父母层级下面所有的,包括子女和孙子所有的


    //$('li').eq(2).next().css('color','red')//下面一个
   // $('li').eq(2).nextAll().css('color','red')//下面所有的
   // $('li').eq(2).nextUntil('#end').css('color','red')//区间找
    //$('li').eq(2).prev().css('color','red')//上一个
   // $('li').eq(2).prevAll().css('color','red')//上面所有的
   // $('li').eq(2).prevUntil('.begin').css('color','red')//区间找


   //console.log($('.outer .inner p').parent().html)
   // $('.outer .inner p').parents().css('color','red')
    //$('.outer .inner p').parentsUntil('body').css('color','red')


    $('.outer').siblings().css('color','red') //上下兄弟都变红
</script>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/wangyue0925/p/9181407.html
今日推荐