通过查询实现添加删除。
添加元素：.add()
$(function(){
console.log($(".item1,.item2"))
console.log($(".item1").add(".item2").add('.item3'));
})删除元素：
- not(selector)删除掉选择器中的元素。
- filter(selector)筛选出来指定选择器匹配的。
$(function(){
console.log($("li").not('.item4'))
})
使用方法判断是否有.item4
<script type="text/javascript">
$(function(){
console.log($("li").not(function (index) {
return $(this).hasClass('item4')
}))
console.log($("li").filter(function (index) {
return $(this).hasClass('item4')
}))
})
</script>
与上面的结果一样。
has():
div id="box1">
<div id="box2">
<div id="box3">
<p id="info">
Lorem ipsum dolor sit amet.
</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul>
</ul>
</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*console.log($("li").not(function (index) {
return $(this).hasClass('item4')
}))
console.log($("li").filter(function (index) {
return $(this).hasClass('item4')
}))*/
console.log($('li').has('ul'))
})
</script>
通过数组索引。
获取子集。
slice(start[,end])
扫描二维码关注公众号，回复：
2840970 查看本文章
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">
Lorem ipsum dolor sit amet.
</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul>
</ul>
</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
console.log($('li').slice(3))
console.log($('li').slice(-2))
console.log($('li').slice(3,5))//[3,5)
})
</script>
转换元素：把一个jQuery对象转换成另一个jQuery对象。
map(callback) 包装的不是jQuery对象而是字符串。
<script type="text/javascript">
$(function() {
console.log($('div').map(function (index, domElement) {
return this.id;//domElement.id也行
}))
})
</script>
如果返回null或undefined。就会被跳过，这个返回值就不会加入到集合中。我们可以通过这个回调函数中，做一些判断，决定是否把这个元素加入到集合中。
遍历元素：
each(iterator)
<script type="text/javascript">
$(function() {
console.log($('li').each(function (index, domElement) {
this.title=this.innerText;
}))
})
</script>给每个li加一个title属性。
<script type="text/javascript">
$(function() {
console.log($('div').each(function (index, domElement) {
if(this.id==='box1'){
return true;
}
this.title=this.innerText;
}))
})
</script>
如果是false，直接退出。相当于break。
is(selector):
<script type="text/javascript">
$(function() {
console.log($('#box3').children().is("p"))
})
</script>
如果返回true则有p元素，false则没有p元素。
end();回到最近的破坏性操作之前。将匹配的元素集合变回前一次的状态。破坏性操作：任何对jQuery对象进行改变的操作。
<script type="text/javascript">
$(function() {
console.log($('#box3').find(".item4").css("color","red")
.find(".item6").css("color","blue")
)
})item6并没有变为蓝色。被第一个find破坏了。所以我们要返回上一个的状态用end方法。
$(function() {
console.log($('#box3').find(".item4").css("color","red")
.end().find(".item6").css("color","blue")
)
}) console.log($('#box3').find(".item4").end());从item4进来又出去。如果上一次调用不是破坏性方法，那么使用end则返回为空。
addBack():
addback （） 返回当前的元素与先前的元素的集合
end（ ） 只返回链式结构中先前的元素。
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>结果是后面3，4和5项是一个红色的背景：
$('li.third-item').nextAll().addBack()
.css('background-color', 'red');