jQuery DOM操作筛选

filter() not() has():

<div class="box">div1<span>span</span></div><div>div2</div>

$('div').filter('.box').css('border','1px red solid');

选出div，并且类为box,进行操作

$('div').not('.box').css('border','1px red solid');

选择div 并且类不是box，进行操作

$('div').has('.box').css('border','1px red solid');

选择div的内容中有类box，不是选中的div本身

如果将span元素的类设置为box

<div class="box">div1<span class="box">span</span></div><div>div2</div>

$('div').has('.box').css('border','1px red solid');

index():返回在兄弟节点中的下标

<div>div1</div><div id="div1">div2</div><div>div3</div><div>div4</div>

console.log($('#div1').index());//1

当index()中含有参数时：

<div>div<span>span</span></div><div id="div1">div<span id="span1">span</span></div><div>div<span>span</span></div>

console.log($('#span1').index());//0console.log($('#span1').index('span'));//1,在所有span中的位置

closest():

<div id="div1" class="box">aaaaa<div id="div2">bbbbb</div></div>

$('#div2').closest('.box').css('border','1px red solid');先看自己是否满足，在找自己最近的父元素并且类是box，进行设置

$('#div2').closest('.box', $('body').get(0) ).css('border','1px red solid');//第二个参数表示范围

add():

$('div').css('border','1px red solid');$('span').css('border','1px red solid');//上述两行相当于下列一行$('div').add('span').css('border','1px red solid');

addBack()和add()：

$('div').find('span').css('border','1px red solid');//对span元素进行设置$('div').find('span').css('color','red').end().css('border','1px red solid');//end对div元素进行设置$('div').find('span').css('color','red').addBack().css('border','1px red solid');//addBack对div和span进行设置

find():后代元素，children():儿子元素