深入学习jQuery元素过滤

时间：2021-07-24 12:16:02

前面的话

　　过滤是jQuery扩展的一个重要的内容。jQuery选择器中的一个重要部分就是过滤选择器。除了过滤选择器，还有专门的元素过滤的方法。本文将详细介绍jQuery元素过滤

索引过滤

　　索引选择器是jQuery过滤选择器的一部分。与此同时，也存在功能相似的索引相关的方法，包括eq()、first()、last()

eq()

　　eq()方法匹配元素的集合为指定的索引的哪一个元素。eq()方法可以接受一个整数作为参数，以0为基数。若整数为负数，则从集合中的最后一个元素开始计数　

<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>

first()

　　first()方法获取匹配元素集合中第一个元素，该方法不接受参数

last()

　　last()方法获取匹配元素集合中最后一个元素，该方法不接受参数

<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选择器中包括内容过滤选择器，而jQuery中也存在功能类似的内容过滤的方法，包括has()、filter()、is()、not()、map()、slice()和add()

has()

　　has()方法用于筛选匹配元素集合中有相匹配的选择器或DOM元素的后代元素的父元素

<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>

map()

　　map()方法通过一个函数匹配当前集合中的每个元素

　　作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象

<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>

filter()

　　filter()方法从匹配的元素集合中筛选出指定的元素，参数可以是一个选择器字符串、一个或多个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</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>

　　filter()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素保留；否则，该元素在匹配集合中被去除

<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>

not()

　　not()方法与filter()方法正好相反，它从匹配的元素集合中移除指定的元素，参数可以是一个选择器字符串、一个或多个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</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>

　　not()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回值为true，则该元素被去除；否则，该元素在匹配集合中保留

<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>

is()

　　is()方法用于判断当前元素是否与参数相匹配，如果匹配，则返回true；否则，返回false。参数可以是一个选择器，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</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>

　　is()方法中作为参数的函数有两个参数，第一个参照是匹配集合中的元素索引，第二个参数是当前索引的DOM元素对象。如果函数返回true，is()方法也返回true，如果函数返回false，is()方法也返回false

<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>

slice()

　　slice()方法根据指定的下标范围，过滤匹配的元素集合，并生成一个新的jQuery对象　

　　slice(start[,end])方法接受两个参数：start和end

　　start是一个整数，从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数，那么代表从末尾开始计数

　　end是一个整数，从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数，那么代表从末尾开始计数。如果忽略此参数，则选择的范围是从start开始，一直到最后

<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>

add()

　　add()方法添加元素到匹配的元素集合。add()方法的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用

<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>

// 0){
return;
}
if(select[i].getBoundingClientRect().top 0){
change(oCon.children[i+2])
}
}else{
change(oCon.children[select.length+1])
}
}

}
document.body.onmousewheel = wheel;
document.body.addEventListener('DOMMouseScroll',wheel,false);

var oCon = document.getElementById("content");
var close = oCon.getElementsByTagName('span')[0];
close.onclick = function(){
if(this.innerHTML == '显示目录'){
this.innerHTML = '×';
this.style.background = '';
oCon.style.border = '2px solid #ccc';
oCon.style.width = '';
oCon.style.height = '';
oCon.style.overflow = '';
oCon.style.lineHeight = '30px';
}else{
this.innerHTML = '显示目录';
this.style.background = '#3399ff';
oCon.style.border = 'none';
oCon.style.width = '60px';
oCon.style.height = '30px';
oCon.style.overflow = 'hidden';
oCon.style.lineHeight = '';
}
}
for(var i = 2; i

相关文章