jQuery--筛选【串联函数】
串联函数简介
- 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--筛选【串联函数】的更多相关文章
- jquery筛选元素函数
jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
- Javascript - Jquery - 筛选
筛选(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会 ...
- [总结]jQuery之常用函数方法参考手册
w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...
- 第一百七十五节，jQuery，工具函数
jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...
- jquery-5 jQuery筛选选择器
jquery-5 jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- javascrit原生实现jquery的append()函数
/** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) ...
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
随机推荐
- 在 TIME_WAIT 状态的 TCP 连接，收到 SYN 后会发生什么？
周末跟朋友讨论了一些 TCP 的问题,在查阅<Linux 服务器高性能编程>这本书的时候,发现书上写了这么一句话: 书上说,处于 TIME_WAIT 状态的连接,在收到相同四元组的 SYN ...
- 【C# 集合】HashTable .net core 中的Hashtable的实现原理
上一篇我介绍了Hash函数 这篇我来说一下Hash函数在 HashTable中的应用. HashTable的特性: 1.装载因子:.net core 0.72 ,java 0.75 2.冲突解决方案: ...
- 在linux上oracle服务启动停止详细
转至:https://www.cnblogs.com/baihuitestsoftware/articles/6365431.html 在CentOS 6.3下安装完Oracle 10g R2,重开机 ...
- 60天shell脚本计划-4/12-渐入佳境
--作者:飞翔的小胖猪 --创建时间:2021年2月11日 --修改时间:2021年2月15日 说明 每日上传更新一个shell脚本,周期为60天.如有需求的读者可根据自己实际情况选用合适的脚本,也可 ...
- 3D打印第二弹：狗牌
给朋友做一个狗牌(误,给朋友的狗狗做一个狗牌 1. 设计 没有设计功底,看看别人是如何做的,搜到一个狗牌: 照着这个做一个,正面是上图这种的:狗狗名字+狗爪子:另一面是手机号加联系说明文字. 2. 建 ...
- WPS:公式在中间，编号靠右
1.新建表格1*3 2.在中间单元格内输入公式,在右边单元格中输入编号 3.在"开始"菜单栏找到"居中"和"靠右"两个按钮,给中间单元格设置 ...
- 2020.11.2 异步IO 协程
异步IO 同步IO在一个线程中,CPU执行代码的速度极快,然而,一旦遇到IO操作,如读写文件.发送网络数据时,就需要等待IO操作完成,才能继续进行下一步操作. 在IO操作的过程中,当前线程被挂起,而其 ...
- Java应用层数据链路追踪（附优雅打印日志姿势）
我是3y,一年CRUD经验用十年的markdown程序员常年被誉为优质八股文选手 今天来聊些大家都用得上的东西:数据链路追踪.之前引入了系统的监控来快速定位应用操作系统上的问题,而业务问题呢?在这篇 ...
- appium ios 相对坐标点击和控件滑动操作
环境: 系统:ios 10.13.6 (17G12034) appium:1.14.0 xcode:10.1 iphone:iphone7 12.4 在尝试使用driver.tap([(a,b)],5 ...
- 在矩池云上复现 PaddleGAN 照片转油画风格教程
我选用的是cuda10.1纯镜像 案例来自paddlepaddle官方PaddleGAN库中,可以查看 https://github.com/PaddlePaddle/PaddleGAN/ https ...