串联函数简介

  • A.add(B) 　　　　将A和B组合成一个对象
  • A.children().andSelf() 　　　　将之前的对象添加到操作集合中
  • A.children().children().end() 　　　　回到最近的一个"破坏性"操作之前。得到孩子
  • contents()　　　　 获得所有子节点(子元素和文本)

代码实例

 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=" 选择 id=one和two 的div"  id="b1"/>

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

14             $("#one").add("#two").css("background-color","red");

15         });

16 //            <input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>

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

18             $("#one").children().andSelf().css("background-color","red");

19         });

20 //            <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>

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

22             $("#one").children().css("background-color","red").end().css("background-color","yellow");

23         });

24 //            <input type="button" value=" 获得id=two 子节点个数"  id="b4"/>

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

26             alert($("#two").contents().length);

27         });

28     });

29   </script>

30 </head>

31 <body>

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

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

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

35   <br/><br/>

36   <input type="button" value=" 选择 id=one和two 的div"  id="b1"/>

37   <input type="button" value=" 选择id=one 所有的孩子，以及one自己"  id="b2"/>

38   <input type="button" value=" 选择id=one 所有的孩子，设置颜色为红，设置one自己为黄"  id="b3"/>

39   <input type="button" value=" 获得id=two 子节点个数"  id="b4"/>

40   <br /><br />

41

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

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

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

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

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

47

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

49  id为one,class为one的div

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

51   </div>

52

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

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

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

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

57   </div>

58

59   <div class="one">

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

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

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

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

64   </div>

65

66

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

68

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

70

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

72 </body>

73 </html>

jQuery--筛选【串联函数】的更多相关文章

  1. jquery筛选元素函数

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

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

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

  3. Javascript - Jquery - 筛选

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

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

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

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

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

  6. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  7. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  8. javascrit原生实现jquery的append()函数

    /** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...

  9. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

随机推荐

  1. Renix软件如何建立OSPF邻居——网络测试仪实操

    OSPF可以通过OSPF向导的方式方便的创建OSPF邻居, 也可以通过纯手工的方式创建OSPF邻居, 本文介绍的是纯手工的方式创建. 在工作中, 推荐使用OSPF向导的方式来创建, 会比较简单和高效. ...

  2. 使用已有流量进行RFC2544测试—信而泰网络测试仪实操

    一.测试说明 先创建流量,将流量运行起来,流量正常.再使用创建的流量进行RFC2544测试,可以避免因为配置原因流量不通,影响RFC 2544测试. 而且创建流量的时候,可以编辑报文,例如增加TCP/ ...

  3. 简单的html js node 前端直接使用反向代理软件

    先放上已经打包好的地址 https://gitee.com/Amengxiaoya/node-proxy.git  切记 proxyConfig.json 设置代理 ip为自己的ipv4地址 (cmd ...

  4. ASP.NET Core 6框架揭秘实例演示[14]：日志的进阶用法

    为了对各种日志框架进行整合,微软创建了一个用来提供统一的日志编程模式的日志框架.<日志的基本编程模式>以实例演示的方式介绍了日志的基本编程模式,现在我们来补充几种"进阶" ...

  5. 【windows 操作系统】什么是窗口？|按钮也是窗口

    起因 在看操作系统消息机制的时候,看到一句化:全局消息队列把消息发送到窗口所在的线程消息队列.突然就怀疑起了窗口的意思.于是就有这边基类. 文章来源:https://docs.microsoft.co ...

  6. 【C#表达式树 四】Expression类上的函数列表

    Expression相当于工厂,这个工厂有各式各样的模型(函数),用来生成各种零部件(节点类型),最后组装成表达式树. Expressions这个命名空间有各种个容器用陈放生产出来的零部件. Expr ...

  7. 5个相见恨晚的Linux命令，每一个都非常实用

    转至:https://zhuanlan.zhihu.com/p/57866239 作为一个开发人员,经常要用到终端命令,最让人头疼的是记不住繁琐的参数.用谷哥度娘检索效率低下,通过man命令显示的结果 ...

  8. spark conf的3种配置优先级

    在SparkConf上设置的属性具有最高的优先级,其次是传递给spark-submit或者spark-shell的属性值,最后是spark-defaults.conf文件中的属性值

  9. WinRar:你需要从上一压缩卷启动解压命令以便解压

    大文件被分解成许多个小的RAR文件,并按顺序排列好,解压时只需解压第一个RAR文件即可顺利解压所有文件,如果不按顺序解压就会出现上述问题,导致解压完一个子文件候无法解压剩下的文件

  10. JZ-058-对称的二叉树

    对称的二叉树 题目描述 请实现一个函数,用来判断一棵二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 题目链接: 对称的二叉树 代码 /** * 标题:对称的二叉树 ...