串联函数简介

  • 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. Sqlmap数据库注入攻击

    实验目的 利用sqlmap命令破解出access数据中的admin的密码bfpns 实验原理 SQLMap是一个先进的自动化SQL注入工具,其主要功能是扫描.发现并利用给定的URL的SQL注入漏洞.目 ...

  2. [题解]UVA658 It's not a Bug, it's a Feature!

    链接:http://vjudge.net/problem/viewProblem.action?id=22169 描述:有n个漏洞,m个修复漏洞的方法,每种方法耗时不一样,求修复漏洞的最短时间.每种方 ...

  3. 【C# TAP 异步编程】三、async\await的运作机理详解

    [原创] 本文只是个人笔记,很多错误,欢迎指出. 环境:vs2022  .net6.0 C#10 参考:https://blog.csdn.net/brook_shi/article/details/ ...

  4. 由浅入深---MyBatis的全局配置文件

    从我开始接触代码,我就很怕写配置文件,一般的配置文件我都是直接从上一个项目复制到这个项目来改改,可能有部分同学也有我这种痛吧: 我目前一般的做法,先去找找例子(从网上,从github,从官网)之后再改 ...

  5. StackExchange.Redis 实现SetNx

    今天有同事指出如何在StackExchange.Redis 实现Redis的原生命令. ConnectionMultiplexer redis = ConnectionMultiplexer.Conn ...

  6. Oracle数据库巡检

    转至:https://blog.51cto.com/sf1314/2123068 select inst_id,status,count(*) from gv$session group by ins ...

  7. Ansible安装及初始化-从零到无

    --时间:2019年1月12日 --作者:飞翔的小胖猪 前言 说明 文档指导读者在Redhat系列操作系统上安装Ansible软件及初始化配置,包括服务端及被控端的配置文件设置. 以下所有操作都在An ...

  8. 『现学现忘』Docker基础 — 12、通过RPM软件包方式安装Docker

    CentOS环境下的Docker官方推荐的三种安装方式 yum安装方式 本地RPM安装方式 脚本安装方式 目录 1.下载Docker的RPM安装包 2.安装Docker 3.通过RPM安装包安装Doc ...

  9. php 数组相关的函数？

    array()----创建数组array_combine()----通过合并两个数组来创建一个新数组range()----创建并返回一个包含指定范围的元素的数组compact()----建立一个数组a ...

  10. Spark ML源码分析之三 分类器

            前面跟大家扯了这么多废话,终于到具体的机器学习模型了.大部分机器学习的教程,总要从监督学习开始讲起,而监督学习的众多算法当中,又以分类算法最为基础,原因在于分类问题非常的单纯直接,几乎 ...