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方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
随机推荐
- go 互斥锁实现原理
目录 go 互斥锁的实现 1. mutex的数据结构 1.1 mutex结构体,抢锁解锁原理 1.2 mutex方法 2. 加解锁过程 2.1 简单加锁 2.2 加锁被阻塞 2.3 简单解锁 2.4 ...
- Python 中 base64 编码与解码
base64 是经常使用的一种加密方式,在 Python 中有专门的库支持. 本文主要介绍在 Python2 和 Python3 中的使用区别: 在 Python2 环境: Python 2.7.16 ...
- python处理图像矩阵--值转为int
1. 在用python处理图像数字矩阵时,若对矩阵进行了加减乘除等运算,可能会造成矩阵元素值溢出,然后某些元素值可能都被赋为255:之后若重新显示图像,可能会没有什么变化,此时,可以将运算后的矩阵值转 ...
- Mybatis学习笔记（详细）
介绍 三层架构:视图层.业务逻辑层.持久层 mybatis框架: 执行数据库操作,完成对数据库的增删改查,封装了jdbc mapper映射,将表中数据转为一个Java对象,一个表对应一个接口 Myba ...
- Pandas：各种错误
1.输出为CSV文件时,Permission denied 原因可能是: (1).构建DataFrame时没有写index参数 (2).用Dict构建最开始的数据时,value没有写成List的形式, ...
- MyBatis动态 order by 排序不生效解决方法
使用Mybatis在做一个项目时,发现需要动态的去做一个排序功能,于是乎有了下面XXXMapper.xml代码 <if test="order!=null and !order.isE ...
- 【数据科学基础复习 - 3】PCA主成分分析
本文仅就PCA原理及应用作一简单总结, 具体的数学原理等考试后再补上. 1. PCA推导 目标 对于正交空间中的样本点,现想将其投影到一个低维超平面中使得所有样本可在该平面中得到恰当的表达. 什么叫恰 ...
- CAS 比较并交换
简介 CAS 的全称为 Compare-And-Swap,他是一条 CPU 并发源语. 他的功能是判断内存某个位置的值是否为预期值,如果是则更改为新的值,这个过程是原子的. CAS 并发原语体现在 J ...
- Lua中如何实现类似gdb的断点调试—07支持通过函数名称添加断点
我们之前已经支持了通过函数来添加断点,并且已经支持了行号的检查和自动修正.但是通过函数来添加断点有一些限制,如果在当前的位置无法访问目标函数,那我们就无法对其添加断点. 于是,本篇我们将扩展断点设置的 ...
- 1列表展示的SQL，改为：只查询出vip会员，展示在页面上（10分）
模型代码: //会员 public static function member(){ return self::where('status',1)->select(); } 控制器代码: // ...