前面的话

  过滤是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

深入学习jQuery元素过滤的更多相关文章

  1. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  2. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  3. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  4. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  5. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  6. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

  7. 《从零开始学习jQuery》:用jQuery操作元素的属性与样式

    元素属性和Dom属性简介 对于下面这样一个标签元素: <img id='img' src="1.jpg" alt='1' class="imgs"> ...

  8. jQuery学习之------元素样式的操作

    jQuery学习之------元素样式的操作 一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...

  9. jQuery中的子(后代)元素过滤选择器(四、六):nth-child()、first-child、last-child、only-child

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. JAVA使用SAX解析XML文件

    在我的另一篇文章(http://www.cnblogs.com/anivia/p/5849712.html)中,通过一个例子介绍了使用DOM来解析XML文件,那么本篇文章通过相同的XML文件介绍如何使 ...

  2. [LintCode] Product of Array Except Self 除本身之外的数组之积

    Given an integers array A. Define B[i] = A[0] * ... * A[i-1] * A[i+1] * ... * A[n-1], calculate B WI ...

  3. 开源免费的HTML5游戏引擎

    青瓷引擎的成长 青瓷引擎自2015年4月项目启动开始,7月首次亮相2015年ChinaJoy,便得到业界的极大关注,随后开启限量测试,收到数百个开发者团队的试用申请及反馈,期间经历了18个内测版本,完 ...

  4. SQL语句经典大全

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name  2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  5. 手把手教android studio中安装Android Butterknife Zelezny (转)

    原文地址:http://blog.csdn.net/xin917480852/article/details/51176524 用来快速生成findViewById() 安装方法: 打开Android ...

  6. VIM配置

    Linux下的编辑器以vim和emacs为主流,一个编辑器之神,一个是神的编辑器. 本文以主要介绍如何在linux下以vim为基础搭建一个比较顺手的代码编辑器. 有两种比较流行的方式: 自动安装 手动 ...

  7. WPF中的Pack URI

    更多资源:http://denghejun.github.io 问题 说来也简单:首先,我在WPF项目中建立了一个用户自定义控件(CustomControl),VS模板为我们自动生成了 CustomC ...

  8. JAVA的continue用法

    JAVA的continue用法: public class test{ public static void main(String [] args){  for(int i=0;i<=10;i ...

  9. WPF之命令浅谈

    一.认识命令 1.1命令的特点 提到“命令”,我们应该想到命令的发出者,命令的接受者,命令的内容,准备工作,完成任务,回报工作...与事件中的发送者,接受者,消息,处理,处理,处理一一对应,如果是单纯 ...

  10. Replication的犄角旮旯(三)--聊聊@bitmap

    <Replication的犄角旮旯>系列导读 Replication的犄角旮旯(一)--变更订阅端表名的应用场景 Replication的犄角旮旯(二)--寻找订阅端丢失的记录 Repli ...