juqery基本选择器和层级选择器

1、基本选择器，主要通过标签名称，样式，id等选择标签，如下代码是简单的使用

（1）根据标签或者样式筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div class="div1">111</div>
<p>ppp</p>
<p>div2的兄弟</p>
<div id="div2">222
    <div class="div3">333
        <div class="div4">444</div>
        <p>world2</p>
    </div>
    <p>world</p>

</div>
<p>div2的兄弟</p>
<p>div2的兄弟</p>
<p>div2的兄弟</p>
<p>div2的兄弟</p>
<p>div2的兄弟</p>

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>

</ul>

<script src="jquery-3.1.1.js"></script>
<script>
//    $('p').css('color','red');//选择标签
//    $('#div2').text('666');//选择id
//    $('.div1').css('background','yellow');//根据class选择
//    $('body *' ).text('YYYY')//表示后代选择器，选择body后面的标签，然后将里面的文本改为YYYY
//$('#div2 p').css('color','green')//也是后代选择器id为div下面的所有p标签的文本都被修改了颜色，如果$('#div2> p'),则是下一级的p标签被改，不是下面所有
//$('#div2+p').css('color','green');//下面开始找兄弟标签，只寻找一个
//$('#div2~p').css('color','green');//从下面开始找，找出所有兄弟标签
$('li:first');
//找出所有li标签，选出第一个，even表示偶数；odd表示基数；eg（）括号后面可以选择特定第几个
//gt（），gt是great than的缩写，表示大于，也有lt（）


</script>

</body>
</html>

　　（2）根据内容筛选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>jay</div>
<div>Rouge</div>
<div>Mary</div>
<div>Dark</div>
<input name="abc">
<input name="edf" checked="checked">
<script src="jquery-3.1.1.js"></script>
<script>
    $('input:not(:checked)');//选择有属性checked属性的标签
    $("div:contains('Dark')");//根据这个内容选择出标签
    //$('td:empty')是否为空
    //    $('div:has(p)').addClass('test')//寻找出div标签里面有p标签的div，然后添加一个class为test的属性
    //$('div[id='abc']')查找所有包含id属性为abc的div标签，value也可以不写，直接写成$('[id='abc']')

</script>

</body>
</html>

　　2、筛选器

（1）简单的根据索引筛选

 

<body>
<input type="checkbox">
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>




<script src="jquery-3.1.1.js"></script>
<script>
//    $('li:eq(1)').css('color','red');
//    $('li').eq(2).css('fontSize','30');
//obj:选择器，index：索引
    function Func(obj,index) {
        obj.eq(index)
    }

Func($('li'),2)//根据传进的参数，选择标签

</script>
</body>

　　（2）parent，parents，parentsUntil

$('.div7').parent().css('color','red');//找到一个父级标签
$('.div7').parents();//找到.div7的所有祖先标签
$('.div7').parentsUntil('.outer').css('color','red');//寻找父级标签直到样式为outer的父级标签，不包括样式为outer的父级标签
$('.div7').siblings()//找到所有兄弟标签，里面也可以放参数，例如siblings('div1'),找到全局里面所有div兄弟标签

　　

　　其他的next，prve都是差不多的模式

　　

posted @ 2017-03-28 15:24  蜗牛仔  阅读(211)  评论(0)    收藏  举报