串联函数简介

  • 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. SpringBoot+MybatisPlus+Mysql+Sharding-JDBC分库分表实践

    一.序言 在实际业务中,单表数据增长较快,很容易达到数据瓶颈,比如单表百万级别数据量.当数据量继续增长时,数据的查询性能即使有索引的帮助下也不尽如意,这时可以引入数据分库分表技术. 本文将基于Spri ...

  2. 【C# 程序集】.NET core Could not load file or assembly

    NET core 添加了新的nuget包,部署出现Could not load file or assembly 这个坑,今天整了一天,我添加了Microsoft.AspNetCore.Mvc.Ver ...

  3. ElasticSearch学习笔记（详细）

    目录 ElasticSearch概述 ElasticSearch入门 安装 基本操作 查看es相关信息 索引操作 文档操作 bulk批量API 进阶检索 Search API Query DSL 分词 ...

  4. oracle中临时表的用法详解

    转至:https://blog.csdn.net/mystonelxj/article/details/85010856?utm_medium=distribute.pc_relevant.none- ...

  5. JavaWeb后端

    JavaWeb后端 我们学习JavaWeb的最终目的是为了搭建一个网站,并且让用户能访问我们的网站并在我们的网站上做一些事情. 计算机网络基础 在计算机网络(谢希仁 第七版 第264页)中,是这样描述 ...

  6. docker配置tomcat

    docker pull tomcat tomcat的目录结构 /usr/local/tomcat/webapps web目录 /usr/local/tomcat/logs 日志目录 /usr/loca ...

  7. css3渐变色字体

    \3cspan id="mce_marker" data-mce-type="bookmark">\3c/span>\3cspan id=" ...

  8. Docker-生成镜像、服务搭建（redis集群、kibana、运行项目jar包）、上传镜像至阿里云

    目录 生成自己的镜像 1.下载官方tomcat镜像 2.运行镜像后将webapp目录里新增文件(官方镜像是没有页面的 具体操作见) 3.使用docker ps -a 查看刚刚修改后的容器id 4.执行 ...

  9. webgl未使用独立显卡报告

    0x00 楔子 最近客户在使用我们的的三维可视化平台的时候,总是会出现浏览器崩溃,webgl context lost的情况. 这种请一般出现在电脑配置很低的电脑上,比如没有独显,只有很小现存的集成显 ...

  10. laravel 公共类json库封装

    封装常用的接口响应: 创建 response.php 在app下创建如下文件下(目录及文件名可以自己设置) app/common/response.php,在内部补充如下代码: <?php /* ...