jQuery元素過濾

索引過濾

索引選擇器是jQuery過濾選擇器的一部分。與此同時，也存在功能相似的索引相關(guān)的方法，包括eq()、first()、last()

創(chuàng)新互聯(lián)成立與2013年，先為遂川等服務(wù)建站，遂川等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為遂川企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

eq()

eq()方法匹配元素的集合為指定的索引的哪一個元素。eq()方法可以接受一個整數(shù)作為參數(shù)，以0為基數(shù)。若整數(shù)為負數(shù)，則從集合中的最后一個元素開始計數(shù)　

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><button id="btn3">按鈕三</button><script>$('#btn1').click(function(){
    $('li').eq(0).css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').eq(-1).css('border','1px solid blue');    
})
$('#btn3').click(function(){
    $('li').eq(2).css('border','1px solid green');    
})</script>

jQuery元素過濾

first()

first()方法獲取匹配元素集合中第一個元素，該方法不接受參數(shù)

last()

last()方法獲取匹配元素集合中最后一個元素，該方法不接受參數(shù)

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn1">按鈕一</button><button id="btn2">按鈕二</button><script>$('#btn1').click(function(){
    $('li').first().css('border','1px solid red');    
})
$('#btn2').click(function(){
    $('li').last().css('border','1px solid blue');    
})</script>

jQuery元素過濾

內(nèi)容過濾

jQuery選擇器中包括內(nèi)容過濾選擇器，而jQuery中也存在功能類似的內(nèi)容過濾的方法，包括has()、filter()、is()、not()、map()、slice()和add()

has()

has()方法用于篩選匹配元素集合中有相匹配的選擇器或DOM元素的后代元素的父元素

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
    </li>
    <li>list item 3</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').has('ul').css('border', '1px solid lightblue');
})</script>

jQuery元素過濾

map()

map()方法通過一個函數(shù)匹配當前集合中的每個元素

作為參數(shù)的函數(shù)有兩個參數(shù)，第一個參照是匹配集合中的元素索引，第二個參數(shù)是當前索引的DOM元素對象

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><input value="text"><input value="text"><input value="text"><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('input').map(function(index,dom){
        dom.value += index;
    });
})</script>

jQuery元素過濾

filter()

filter()方法從匹配的元素集合中篩選出指定的元素，參數(shù)可以是一個選擇器字符串、一個或多個DOM元素、jQuery對象或一個函數(shù)

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').filter(':even').css('border','1px solid lightgreen')
})</script>

jQuery元素過濾

filter()方法中作為參數(shù)的函數(shù)有兩個參數(shù)，第一個參照是匹配集合中的元素索引，第二個參數(shù)是當前索引的DOM元素對象。如果函數(shù)返回值為true，則該元素保留；否則，該元素在匹配集合中被去除

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').filter(function(index,dom){        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')            return true;
        }
    })
})</script>

jQuery元素過濾

not()

not()方法與filter()方法正好相反，它從匹配的元素集合中移除指定的元素，參數(shù)可以是一個選擇器字符串、一個或多個DOM元素、jQuery對象或一個函數(shù)　

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').not(':even').css('border','1px solid lightgreen')
})</script>

jQuery元素過濾

not()方法中作為參數(shù)的函數(shù)有兩個參數(shù)，第一個參照是匹配集合中的元素索引，第二個參數(shù)是當前索引的DOM元素對象。如果函數(shù)返回值為true，則該元素被去除；否則，該元素在匹配集合中保留

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').not(function(index,dom){        if(!(index % 3)){
            $(dom).css('border','1px solid lightgreen')            return true;
        }
    })
})</script>

jQuery元素過濾

is()

is()方法用于判斷當前元素是否與參數(shù)相匹配，如果匹配，則返回true；否則，返回false。參數(shù)可以是一個選擇器，DOM元素，jQuery對象或函數(shù)

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><script>$('li').click(function(){    if($(this).is(':contains("2")')){
        $(this).css('border','1px solid black')
    }
})</script>

jQuery元素過濾

is()方法中作為參數(shù)的函數(shù)有兩個參數(shù)，第一個參照是匹配集合中的元素索引，第二個參數(shù)是當前索引的DOM元素對象。如果函數(shù)返回true，is()方法也返回true，如果函數(shù)返回false，is()方法也返回false

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li></ul><div id="result"></div><script>var i = 0;
$('li').click(function(){    ++i;    if($(this).is(function(index,dom){
        $('#result').html(dom.innerHTML);        if(i%2){            return true;    
        }
    })){
         $(this).css('border','1px solid black')
    }
})</script>

jQuery元素過濾

slice()

slice()方法根據(jù)指定的下標范圍，過濾匹配的元素集合，并生成一個新的jQuery對象　

slice(start[,end])方法接受兩個參數(shù)：start和end

start是一個整數(shù)，從0開始計數(shù)的下標。代表將要被選擇的元素的起始下標。如果指定的下標是一個負數(shù)，那么代表從末尾開始計數(shù)

end是一個整數(shù)，從0開始計數(shù)的下標。代表將要被選擇的元素的結(jié)束下標。如果指定的下標是一個負數(shù)，那么代表從末尾開始計數(shù)。如果忽略此參數(shù)，則選擇的范圍是從start開始，一直到最后

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li></ul><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').slice(2,4).css('background', 'red');
})</script>

jQuery元素過濾

add()

add()方法添加元素到匹配的元素集合。add()方法的參數(shù)可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用

jQuery元素過濾

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li></ul><div>div</div><button id="btn">按鈕</button><script>$('#btn').click(function(){
    $('li').add('div').css('background', 'lightgreen');
})</script>

jQuery元素過濾

標簽: jQuery

分享文章：jQuery元素過濾
瀏覽路徑：http://jinyejixie.com/article26/jojjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、營銷型網(wǎng)站建設(shè)、Google、網(wǎng)站策劃、面包屑導(dǎo)航、品牌網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

jQuery元素過濾

索引過濾

內(nèi)容過濾