js进阶 11-15  jquery过滤方法有哪些

一、总结

一句话总结：jquery方法中的参数一般是什么：选择器、元素或 jQuery 对象。

1、jquery方法中的参数一般是什么？

选择器、元素或 jQuery 对象

2、has()如何使用（如何选取有em元素的对象）？

36             // $('li').has('em').css("background-color", "pink")

3、is()方法如何使用（选择某个元素是不是有pink1类或者pink2类）？

34             //     alert($('li:eq(3)').is('.pink1,.pink2'))

4、not()方法如何使用（如何选取不是pink1类和pink2类的元素）？

32             // $('li').not('.pink1,.pink2').css("background-color", "pink");

5、jquery中如何选取一段？

slice(start, [end])把匹配元素集合缩减为指定的指数范围的子集。

  • start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
  • end:结束选取自己的位置，如果不指定，则就是本身的结尾。
37             // $('li').slice(0,3).css("background-color", "pink")

二、jquery过滤方法有哪些

1、相关知识

为了更加灵活迅速地操作元素，除了选择器之外，jQuery还为我们提供了过滤、查找方法。过滤和查找补充了很多使用选择器无法进行的操作

  1. first()/last() 方法返回被选元素的首个元素/最后一个元素。
  2. eq() 方法返回被选元素中带有指定索引号的元素。

    索引号从 0 开始，因此首个元素的索引号是 0 而不是 1

  3. filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  4. not() 方法返回不匹配标准的所有元素。
  5. is() 判断所选元素是否有符合某个条件的元素，返回值为true或false.

    根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。

  6. has() 使用“自定义表达式”来选择符合条件的元素
  7. slice(start, [end])把匹配元素集合缩减为指定的指数范围的子集。

    • start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

    • end:结束选取自己的位置，如果不指定，则就是本身的结尾。

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         li{

             margin-top: 5px;width: 150px;

         }

     </style>

 </style>

 </head>

 <body>

     <ol>

         <li>1</li>

         <li>2</li>

         <li class="pink1"><em>3</em></li>

         <li class="pink2">4</li>

         <li>5</li>

     </ol>

     <input id="btn1" type="button" value='is'>

     <script type="text/javascript">

         $(function(){

             // $('li:first').css("background-color", "orange");

             // $('li').first().css("background-color", "orange");

             // $('li').last().css("background-color", "orange");

             // $('li').eq(1).css("background-color", "green");

             // $('li').filter('.pink1,.pink2').css("background-color", "pink");

             // $('li').not('.pink1,.pink2').css("background-color", "pink");

             // $('#btn1').click(function(){

             //     alert($('li:eq(3)').is('.pink1,.pink2'))

             // })

             // $('li').has('em').css("background-color", "pink")

             // $('li').slice(0,3).css("background-color", "pink")

             $('li').slice(-4,-2).css("background-color", "pink")

         })

     </script>

 </body>

 </html>
 

js进阶 11-15 jquery过滤方法有哪些的更多相关文章

  1. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  2. js进阶正则表达式15验证身份证号（|符号的使用：var reg=/^\d{17}[\d|X]$|^\d{15}$/）（str的方法substr）

    js进阶正则表达式15验证身份证号(|符号的使用:var reg=/^\d{17}[\d|X]$|^\d{15}$/)(str的方法substr) 一.总结 1.|符号的使用:var reg=/^\d ...

  3. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么

    js进阶 14-5 $.getScript()和$.getJSON()方法的作用是什么 一.总结 一句话总结:$.getScript()和$.getJSON()方法专门用来加载JS/JSON文件(远程 ...

  7. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  8. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  9. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

随机推荐

  1. jquery constructor

    function F(){ this.a = "aaa"; alert(111); } F.prototype = { constructor:F, } var f = new F ...

  2. linux host主机名配置

    1.查看主机名 #hostname 2.查看ip #ifconfig 2.添加主机名配置 #vi /etc/hosts 新增一行 172.23.26.195 vhost145.idmp.safe

  3. Bean复制的几种框架性能比较（Apache BeanUtils、PropertyUtils,Spring BeanUtils,Cglib BeanCopier）

    转自:http://www.cnblogs.com/kaka/archive/2013/03/06/2945514.html 比较的是四种复制的方式,分别为Apache的BeanUtils和Prope ...

  4. 1.4 Ecosystem官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 1.4 Ecosystem 生态系统 There are a plethora of ...

  5. Logstash读写性能调整优化

    继续

  6. [USACO08JAN]电话线Telephone Lines(分层图)/洛谷P1948

    这道题其实是分层图,但和裸的分层图不太一样.因为它只要求路径总权值为路径上最大一条路径的权值,但仔细考虑,这同时也满足一个贪心的性质,那就是当你每次用路径总权值小的方案来更新,那么可以保证新的路径权值 ...

  7. 计科1111-1114班第一次实验作业（NPC问题——回溯算法、聚类分析）

    实验课安排 地点: 科技楼423 时间:  计科3-4班---15周周一上午.周二下午 计科1-2班---15周周一下午.周二晚上(晚上时间从18:30-21:10) 请各班学委在实验课前飞信通知大家 ...

  8. 数学定理证明机械化的中国学派（II）

    所谓"学派"是指:存在一帮人,具有同样或接近的学术观点或学术立场,採用某种特定的"方法"(或途径),在一个学术方向上共同开展工作.而且做出了相当有迎影响的学术成 ...

  9. 1.10 Python基础知识 - 序列：列表

    在Python中有很多的组合数据类型,其中包括列表,元组,字符串等数据类型,这些数据类型统称为序列类型,用他们可以处理复杂的数据. 列表,是一组有序元素组合的数据结构.列表是可变的数据类型. 列表采用 ...

  10. 微信支付v2开发(10) 全网发布

    关键字:微信公众平台 微信支付 全网发布 作者:方倍工作室 原文:http://www.cnblogs.com/txw1958/p/wxpay-publish.html 在这篇微信公众平台开发教程中, ...