之前选择器可以完成的功能，筛选也提供了相同的函数

筛选函数介绍

  • eq(index|-index) 　　类似:eq()index:正数，从头开始获得指定所有的元素，从0算起，0表示第一个-index:负数，从尾开始获得指定索引的元素，1算起，-1表示最后一个
  • is()　　 判断
  • hasClass()　　 判断class是否是指定的类
  • filter()　　 筛选出与制定表达式匹配的元素集合
  • not()　　 将指定的内容删除
  • has() 　　子元素是否有
  • slice(start,end)　　 截取jquery对象数组中的元素，[2,4]得到2,3，左闭右开
  • map()　　 jquery对象拆分成jquery对象数组

代码实例

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2 <html xmlns="http://www.w3.org/1999/xhtml">

  3 <head>

  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  5  <title>05-可见性过滤选择器.html</title>

  6  <!--   引入jQuery -->

  7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

  8  <script src="./script/assist.js" type="text/javascript"></script>

  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />

 10   <script type="text/javascript">

 11       $(document).ready(function(){

 12 //        <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>

 13         $("#b1").click(function(){

 14             $("div").eq(3).css("background-color","red");

 15         });

 16 //            <input type="button" value=" 选择第一个div元素"  id="b2"/>

 17         $("#b2").click(function(){

 18             $("div").first().css("background-color","red");

 19         });

 20 //            <input type="button" value=" 选择最后一个div元素"  id="b3"/>

 21         $("#b3").click(function(){

 22             //两种方法都可以

 23 //            $("div").last().css("background-color","red").show();

 24             $("div").eq(-1).css("background-color","red").show();

 25         });

 26 //            <input type="button" value=" id=one div样式是否是one"  id="b4"/>

 27         $("#b4").click(function(){

 28 //            $("div #one").is(".one")  中间加空格代表的是div内部的id为one的元素

 29             alert($("div#one").is(".one"));

 30         });

 31 //            <input type="button" value=" 选择class为none的所有div"  id="b5"/>

 32         $("#b5").click(function(){

 33             $("div").filter(".none").css("background-color","red").show();

 34         });

 35 //            <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>

 36         $("#b6").click(function(){

 37             alert($("div.hide").next().is("span"));

 38         });

 39 //            <input type="button" value=" 选择所有div中含有div的"  id="b7"/>

 40         $("#b7").click(function(){

 41             $("div").has("div").css("background-color","red");

 42         });

 43 //            <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  id="b8"/>

 44         $("#b8").click(function(){

 45 //            $("div.one").not("[title]").css("background-color","red");

 46             $("div.one").children("div").not("[title]").css("background-color","red");

 47         });

 48 //            <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>

 49         $("#b9").click(function(){

 50             //左闭右开

 51             $("div").slice(3,5).css("background-color","red");

 52         });

 53     });

 54

 55   </script>

 56 </head>

 57 <body>

 58   <h3>可见性过滤选择器.</h3>

 59   <button id="reset">手动重置页面元素</button>

 60   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>

 61   <br/><br/>

 62   <input type="button" value=" 选择索引值等于3的元素"  id="b1"/>

 63   <input type="button" value=" 选择第一个div元素"  id="b2"/>

 64   <input type="button" value=" 选择最后一个div元素"  id="b3"/>

 65   <input type="button" value=" id=one div样式是否是one"  id="b4"/>

 66   <input type="button" value=" 选择class为none的所有div"  id="b5"/>

 67   <input type="button" value=" 样式为hide div 下一个兄弟是否是span"  id="b6"/>

 68   <input type="button" value=" 选择所有div中含有div的"  id="b7"/>

 69   <input type="button" value=" 选择样式为one div 子元素中没有title属性的div"  id="b8"/>

 70   <input type="button" value=" 选择所以号为3,4的div"  id="b9"/>

 71   <br /><br />

 72

 73   <!--文本隐藏域-->

 74  <input type="hidden" value="hidden_1">

 75  <input type="hidden" value="hidden_2">

 76  <input type="hidden" value="hidden_3">

 77  <input type="hidden" value="hidden_4">

 78

 79   <div class="one" id="one" >

 80  id为one,class为one的div

 81       <div class="mini">class为mini</div>

 82   </div>

 83

 84     <div class="one"  id="two" title="test" >

 85      id为two,class为one,title为test的div.

 86       <div class="mini"  title="other">class为mini,title为other</div>

 87       <div class="mini"  title="test">class为mini,title为test</div>

 88   </div>

 89

 90   <div class="one">

 91       <div class="mini">class为mini</div>

 92       <div class="mini">class为mini</div>

 93       <div class="mini">class为mini</div>

 94       <div class="mini"  title="tesst">class为mini,title为tesst</div>

 95   </div>

 96

 97

 98   <div style="display:none;"  class="none">style的display为"none"的div</div>

 99

100   <div class="hide">class为"hide"的div</div>

101

102   <span id="mover">正在执行动画的span元素.</span>

103 </body>

104 </html>

jQuery--筛选【过滤函数】的更多相关文章

  1. jquery筛选元素函数

    jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...

  2. jQuery Filterizr 筛选过滤

    Filterizr 是一款功能强大的筛选过滤插件,它提供了多重筛选过滤方式,配合了css3的动画效果. 在线实例 默认 回调函数 使用方法 <div class="sucaihuo&q ...

  3. 深入学习jQuery元素过滤

    × 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...

  4. Javascript - Jquery - 筛选

    筛选(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会 ...

  5. 第一百六十五节，jQuery，过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  6. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  7. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

  8. [总结]jQuery之常用函数方法参考手册

    w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

  9. jQuery筛选总结

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 第一百七十五节，jQuery，工具函数

    jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...

随机推荐

  1. Django框架路由分发-名称空间

    目录 一:路由分发 1.路由分发简介 2.总路由分发配置 3.总路由终极配置(不需要导应用路由,直接点应用即可) 4.子路由配置 二:名称空间 1.名称空间应用场景 3.解决方式二>>&g ...

  2. CobaltStrike逆向学习系列(10)：TeamServer 启动流程分析

    这是[信安成长计划]的第 10 篇文章 关注微信公众号[信安成长计划] 0x00 目录 0x01 基本校验与解析 0x02 初始化 0x03 启动 Listeners 在之前的分析中,都是针对 Cob ...

  3. 轩辕展览-VR虚拟展厅设计的好处和优势是什么？

    yu情仍在继续,实体展厅很糟糕,在过去两年之中,越来越多的实体展厅因闲置而关闭,线上VR虚拟展厅设计逐渐走出圈子,凭借云展示的优势和国家政策的支持,登上展示和销售的旗帜. 产品线上展厅的优势是什么1. ...

  4. [旧][Android] View 工作原理（一）

    备注 原发表于2016.05.23,资料已过时,仅作备份,谨慎参考 前言 本文参考<Android 开发艺术探索>及网上各种资料进行撰写,目的是为自己理清 Android 中 View 的 ...

  5. 利用SSH隧道加密技术隐蔽C&C通信流量

    在网络攻防博弈中,网络流量特征分析类安全防御措施得到了广泛应用.众多厂商和企业对网络流量进行恶意流量分析检测,从而针对性的采取防御措施,如各级ISP在骨干网络设备上大多采用网络流量分析检测的防御方案. ...

  6. 【C# IO 操作 】Span<T>类

    Span 原理探究 ref结构 ref struct是仅在堆栈上的值类型: 表现一个顺序结构的布局:(译注:可以理解为连续内存) 只能在堆栈上使用.即用作方法参数和局部变量: 不能是类或正常结构的静态 ...

  7. gurbi安装

    1,下载相应版本gurobi,msi文件,双击安装.注意安装路径,一般默认,否则容易出错. 2,注册gurobi账号,在校园网下电脑终端运行许可grbgetkey 3,添加许可路径到系统path 4, ...

  8. Weblogic补丁升级常见问题

    转至:https://blog.csdn.net/weixin_44659716/article/details/106804177 常用企业级版本:Weblogic 11g(weblogic10.3 ...

  9. 使用linux 的shell脚本进行sftp文件上传与下载

    一.批量上传: #!/bin/bash #SFTP配置信息 #用户名 USER=root #密码 PASSWORD=5EYS40T04BMF #待上传文件根目录 SRCDIR=/u02/dab/sft ...

  10. linux多进/线程编程（5）——进程间通信之mmap

    参考资料: 1.博客1:https://www.jianshu.com/p/755338d11865 mmap:一种内存映射文件的方法 memory map 父子进程和无亲缘关系的进程,都可以将自身用 ...