js篩選


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

 

:first-child


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM