jQuery元素过滤

发布时间:2020-07-23 23:20:11 作者:jjjyyy66
来源:网络 阅读:290

索引过滤

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

eq()

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

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()方法获取匹配元素集合中第一个元素,该方法不接受参数

last()

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

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元素过滤

内容过滤

  jQuery选择器中包括内容过滤选择器,而jQuery中也存在功能类似的内容过滤的方法,包括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()方法通过一个函数匹配当前集合中的每个元素

  作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的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()方法从匹配的元素集合中筛选出指定的元素,参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数  

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()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回值为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()方法正好相反,它从匹配的元素集合中移除指定的元素,参数可以是一个选择器字符串、一个或多个DOM元素、jQuery对象或一个函数 

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()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回值为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()方法用于判断当前元素是否与参数相匹配,如果匹配,则返回true;否则,返回false。参数可以是一个选择器,DOM元素,jQuery对象或函数

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()方法中作为参数的函数有两个参数,第一个参照是匹配集合中的元素索引,第二个参数是当前索引的DOM元素对象。如果函数返回true,is()方法也返回true,如果函数返回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()方法根据指定的下标范围,过滤匹配的元素集合,并生成一个新的jQuery对象 

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

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

  end是一个整数,从0开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数,那么代表从末尾开始计数。如果忽略此参数,则选择的范围是从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()方法的参数可以几乎接受任何的$(),包括一个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


推荐阅读:
  1. jQuery学习--------jQuery过滤器
  2. JQuery 选择和过滤

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

元素 function ue

上一篇:bandwidthd-pgsql 安装指南

下一篇:php类的方法注释规范

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》