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");//父級的取值截止