串联函数简介

  • 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. 一文带你看懂HarmonyOS应用上架

    大家一直以来都很关心如何上架HarmonyOS应用,现在它来了!它终于来了! 我们为大家梳理了HarmonyOS应用从创建.调试到上架的流程和注意事项,希望能为你的上架之旅带来帮助! 一.创建/添加应 ...

  2. [题解]Codeforces Round #519 - D. Mysterious Crime

    [题目] D. Mysterious Crime [描述] 有m个n排列,求一共有多少个公共子段. 数据范围:1<=n<=100000,1<=m<=10 [思路] 对于第一个排 ...

  3. ISISv6协议测试——信而泰网络测试仪实操

    文章关键词 ISIS协议:路由协议:协议测试: 一.前言: isis是一种与ospf很相似的网络协议(属于动态路由协议),它被应用在巨大规模网络,如运营商以及银行等.同样的它也是基于链路状态算法,支持 ...

  4. 通过shell脚本批量操作mysql数据库

    创建建表语句 ============================================= 学生表:Student(Sno,Sname,Ssex,Sage,Sdept) ------(学 ...

  5. 【C# 线程】IOCP IO完成端口-Windows系统下常见的7种I/O模型

    一.IOCP(I/O Completion Ports)简介        要实现异步通信,必须要用到一个很风骚的I/O数据结构 ,叫重叠结构"Overlapped",Window ...

  6. strtok:This function or variable may be unsafe.

    https://jingyan.baidu.com/article/49711c616b8a1ffa441b7cdc.html

  7. matlab图形中添加文本框

    图形中添加文本框,自己目前了解到了两种方法:1.用legend函数就可以对图形标注,形成一个文本框: 2.就是用annotation('textbox',[0.2,0.2.0.1,0.3],'Line ...

  8. 新建vue3.0 项目—步骤详细介绍

    一.环境搭建 1.安装node环境(版本≥ 8.9) 2.安装vue-cli3.0 npm install @vue/cli -g 此处省略安装步骤截图了,相信各位都已装好了,下图为查看版本结果: 二 ...

  9. 用 EXISTS 或 NOT EXISTS 用法

    项目中遇到这么个情况: t1表 和 t2表  都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...

  10. Hibernate学习笔记(一)-->数据库单表操作

    Hibernate框架是一个全ORM映射框架,是一个非常流行的数据库操作框架之一,现在比较流行的还有MyBatis半ORM映射框架 在MyEclipse IDE开发工具中,可以很轻松的搭建Hibern ...