1.filter():筛选函数
1>:筛选单个元素,
object.filter("selector")
2>筛选多个元素:
object.filter("selector,selector")
<span class="yes"></span>
<span>no or yes</span>
<span class="no"></span> $("span").filter(".yes,.no").text("yes or no");
3>,通过一个函数返回值来确定筛选的selector
<span class="yes"></span>
<span><p>no or yes</span>
<span class="no"></span>$("span").filter(function(){
return $("p",this).length==0;
}).text("return一个selector");2.is()函数:根据选择器、DOM元素,jq对象来检测匹配元素的集合
1>,根据选择器
<div class="box" id="new"></div>
console.log($(".box").is("#new"));
2>,根据DOM元素
<form><input type="checkbox" /></form>
$("input[type='checkbox']").parent().is("form")
3>,function检测<ul>
<li><strong>1</strong></li>
<li><strong>1</strong>+<strong>2</strong></li>
</ul>$("li").on("click",function(e){
var $li=$(e.target);
var onoff=$li.is(function(){
return $("strong",this).length==2;
})
if (onoff) {
$li.css("background","red");
} else{
$li.css("background","green");
}
})3,map函数:将一组元素转化成其他数组,也可以认为是一个遍历函数
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
在p中插入一个 以“,”为间隔并且由所有input元素的value值而组成的数组,
get()函数是一个获得选择器指定的DOM元素4,not(selector||DOMelement||原生js所指定的元素)函数,从指定的集合中删除selector指定||DOMelement的元素
<ul> <li>list item 1</li> <li>list item 2</li> <li id="notli">list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
$('li').not(document.getElementById('notli'))
.css('background-color', 'red');
<p>1</p>
<p class="p1">2</p>
<p>3</p> $("p").not("p.p1").css("background","#FF0000");5,has(selector||element)函数:保留包含特定后代的元素,
<ul><li>1</li></ul>
<ul><li class="li1">1</li></ul>
$("ul").has("li.li1").css("background","red");
6,slice(index,index)函数截取一个集合的一部分。
index是正数时,以0为起点,从左到右
index是负数时,以-1为起点,从右到左。
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>1>,slice(index),从index后的元素开始,到结尾。
$("p").slice(2).css("background","aqua"); //3 ,4 的背景还换成aqua的颜色
2>,slice(index1,index2) 从index1开始到index2-1的元素片段
$("p").slice(0,2).css("background","aqua");//0 ,1 的背景还换成aqua的颜色
7,object.children(selector):children可以选择性的选择元素的某个子元素
<ul>
<li>1</li>
<li class="theli">2</li>
<li>3</li>
</ul>console.log($("ul").children(".theli").text());
但是children只是针对于他的儿子辈的元素,对孙子辈的元素没有作用
<ul>
<li class="theli">2</li>
<li><p class="theli">2-1</p></li>
</ul>console.log($("ul").children(".theli").css("color", "red"));
仅仅 li.theli 换了颜色,而p.theli没有换颜色
8.find()函数: find() 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
9,:animate伪类筛选:匹配所有正在执行动画效果的元素,各伪类之间可以相互配合
$("*:not(:animated)").animate({
left:"+=200"
},2000);10,lang伪类:lang是指的是语言编码,有时并不起作用
11,:contains(text) 匹配包含给定文本的元素
<p>王瑞睿</p>
<p>莱索</p>
<p>苏 莱索</p>console.log($("p:contains('莱索')").length); //2 返回一个数组对象
12,:empty :匹配所有不包含文本或者不包含子元素的空元素
<p></p> //empty
<p></p> //empty
<p></p> //empty$("p:empty").text("empty");
相反的是:parent伪类 筛选的是非空元素
13,object.has(element):在object集合中寻找has element 的元素并且进行操作
<p><em></em></p> //莱索
<p></p>$("p:has(em)").find("em").text("莱索");
14,复合属性选择器,需要同时满足多个条件使用
<p class="new">1</p>
<p class="new" type="p">2</p>
<p class="new" id="new" type="p">3</p>$("p[class='new'][id='new'][type='p']").text() //3
15.[attribute] :是否拥有 attribute 这个属性
[attribute=value] :attribute 是否等于value值
[attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素。
[attribute^=value]:正则语法
[attribute$=value]:同上
[attribute *=value1] :attribute的值包括value1的值
16,:first-child||:last-child 匹配元素集合中的第一个||最后一个子元素
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul> $("ul li:first-child").css("background","red");
$("ul li:last-child").css("background","red");
17,:first-of-child||:last-of-child
选择器匹配在文档树中,具有相同的父元素,并且位置处于第一个||最后一个
<p>
<span>1</span> //saddlebrown
<span>2</span>
<span>3</span> //saddlebrown
</p> $("span:last-of-type").css("background","saddlebrown");
$("span:first-of-type").css("background","saddlebrown");
5,parents()函数:获取元素的所有的祖先节点,
closest(selector)函数:通过selector来指定所在元素的祖先元素,包括元素本身
6,siblings(selector)函数:获取所在元素的同级的selector选的兄弟元素
nextAll()函数:获取元素的之后的所有的同级元素,相反的,prevAll()函数是获取元素之前所有的同级元素。
<ul>
<li>1</li>
<li class="theli">2</li>
<li>3</li>
<li>4</li>
</ul>$(".theli").siblings("#theli").css("background","rosybrown");
$(".theli").nextAll().css("background","rosybrown");7,until函数:
nextUntil(selector)函数:元素之后的同级元素到selector所选中的元素截止,不包括selector所选中的元素。
prevUntil(selector)函数:
parentsUntil()函数:
<ul>
<li class="theli">1</li>
<li >2</li> //css("background","#0000FF")
<li id="theli">3</li>
<li>4</li>
</ul> $(".theli").nextUntil("li:nth-child(3)").css("background","#0000FF");
$(".theli").parentsUntil("body").css("background","saddlebrown");//父级的取值截止