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都是差不多的模式