JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法
在使用Jquery包装集的知识之前首先要注意三个概念（当前包装集、新包装集、包装集内部元素）的区别。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>包装集size(),length,index</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
//window.alert($("tr").size());//获取tr的个数
//window.alert($("tr").length);//获取tr的个数 //当执行了get之后得到的结果是一个js的元素
//var dom = $("tr").get(1);
//$(dom).css("color", "blue"); //判断id为abc的tr在包装集的位置
//window.alert($("tr").index($("tr#abc"))); //得到tbody下面第三个tr
//$("tbody tr:eq(2)").css("color", "blue");
});
</script>
</head>
<body>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery_wrap01_size_length_index
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>多个包装集在一起的操作（注意哪些是返回的是源包装集，哪些是返回的是新包装集。）</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
//在表达式中通过“,”可以分割多个包装集
//$("tbody tr:eq(2),tr#abc").css("color", "blue"); //可以为包装集使用add方法，可以将新加入的表达式添加到源包装集中
//$("tbody tr:eq(2)").add("thead tr td:eq(2)").add("tr td:contains('3')").css("color", "blue"); //not方法可以在源包装集中取消掉指定的表达式
//$("tr").not("tr#abc").css("color","blue"); //获取tr中位置小于3的元素,filter表示在当前tr的包装集中进行过滤
//$("tr").filter("tr:lt(3)").css("color", "blue"); //下面这个不行，因为find是在当前包装集内部进行查找
//$("tr").find("tr:lt(3)").css("color", "blue"); //注意：以上都是返回获取的源包装集上的操作，以下返回的都是获取的新包装集上的操作 //slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集
//$("tr").slice(1, 3).css("color", "red"); //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色
//$("tr").css("color", "blue").slice(1, 3).css("color", "red"); //从包装集的内部获取相应的元素，返回的值也是新包装集
//$("table").find("tr#abc").css("color","blue"); });
</script>
</head>
<body>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery_wrap02_mutil_sourcewrap_newwrap
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包装集slice,find,is,children,next,nextAll,parent,parents,closest,siblings</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
//slice返回的是一个新的包装集，获取tr中的1到3形成一个新的包装集，返回的值就是新的包装集
//$("tr").slice(1, 3).css("color", "red"); //获取tr中的1到3形成一个新的包装集设置颜色，原来的设置另外一个颜色
//$("tr").css("color", "blue").slice(1, 3).css("color", "red"); //从包装集的内部获取相应的元素，返回的值也是新包装集
//$("table").find("tr#abc").css("color","blue"); //is表示的是当前的包装集中是否有某个元素,$(table)的包装集中只有一个元素table,所以没有td
//window.alert($("table").is("td:contains('用户')"));
//window.alert($("td").is("td:contains('用户')")); //获取tbody中的所有tr元素,返回的也是新包装集
//$("tbody").children("tr").css("color","blue"); //获取tbody中的等于3的tr子元素,返回的也是新包装集
//$("tbody").children("tr:eq(3)").css("color", "blue"); //找到下一个子元素，只是一个元素，返回新包装集
//$("tr#abc").next().css("color","blue"); //找到下一个组兄弟元素，所有元素，返回新包装集
//$("tr#abc").nextAll().css("color", "blue"); //parent仅仅只是返回上一级的div，返回新包装集
//$("#s1").parent("div").css("color","blue"); //返回所有满足条件的父类节点，返回新包装集
//$("#s1").parents("div").css("color", "blue"); //closest是从自己开始往上找，返回找到的第一个满足条件的节点，返回新包装集
//$("#s1").closest("div").css("color", "blue"); //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），返回新包装集
//$("tr:eq(2)").siblings("tr").css("color", "blue"); //返回第3个tr的所有兄弟节点，但不包含自己（第3个tr），判断兄弟节点中有没有tr id=abc元素，返回新包装集
//window.alert($("tr:eq(2)").siblings("tr").is("tr#abc"));
});
</script>
</head>
<body>
<div>
abc
<div id="d1">
def
<div>
123
<span id="s1">456</span>
</div>
</div>
</div>
<table width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery_wrap03_slice_find_is_children_next_nextAll_parent_parents_closest_siblings
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包装集-链式编程-add,end,andSelf,find,filter</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () { //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green
//$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green"); //将第三个tr之外的所有tr的color设置为blue，backgroundcolor设置为green，在将第三个tr设置为backgroundcolor设置为red。使用end()方法返回上一个包装集
//$("tr:eq(2)").siblings("tr").css("color", "blue").css("background-color", "green").end().css("background-color","red"); //复制user2的table中的tbody内容，添加到user1中
//$("#user2 tbody").clone().appendTo("#user1"); //复制user2的table中的tbody内容，添加到user1中，同时给user1设置color=blue
//$("#user2 tbody").clone().appendTo("#user1").css("color", "blue"); //复制user2的table中的tbody内容，添加到user1中，同时又添加了偶数行的tr后，在设置color=blue
//$("#user2 tbody").clone().appendTo("#user1").add("tr:even").css("color", "blue"); //filter实在当前的包装集（user1）中进行过滤，它是找不到tr:even
//$("#user2 tbody").clone().appendTo("#user1").filter("tr:even").css("color", "blue"); //find实在当前的包装集（user1）的内部进行查找，所以它是能找到tr:even
//$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue"); //给user1的偶数行tr设置color=blue之后，再给原包装集user2设置color=blue，需要使用end()得到上一个包装集。使用两次end().end()就能找到user2的包装集了。
//$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().end().css("color", "blue"); //上面这个例子如果只使用了一次end(),那么它会找到clone()之后的包装集
//$("#user2 tbody").clone().appendTo("#user1").find("tr:even").css("color", "blue").end().css("color", "blue"); //andSelf()把当前所有的包装集合并在一起,设置color=blue
//$("#user2 tbody").clone().appendTo("#user1").andSelf().find("tr:even").css("color", "blue");
});
</script>
</head>
<body>
<table id="user1" width="700" border="1" align="center"></table>
<table width="700" border="1" align="center" id="user2">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery_wrap04_add_end_andSelf_find_filter
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>包装集-链式编程-find,filter,仅在当前包装集过滤,和在包装集内部的元素上进行查找的区别</title>
<script src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
//查询出了两个table包装集，一个为user1的table一个为user2的table，此时可以过滤得到users这个table
//$("table").filter("table#user1").css("color", "blue"); //如果想过滤tr的话，那是不行的，因为filter只能对当前包装集操作，而不能对当前包装集内部的元素进行操作。
//$("table").filter("tr").css("color", "blue"); //解决方法1是增加tr这个包装集到源包装集中
//$("table").add("tr").filter("tr").css("color", "blue"); //解决方法2是使用find方法在包装集内部的元素中进行查找
$("table").find("tr").css("color", "blue");
});
</script>
</head>
<body>
<table id="user1" width="700" border="1" align="center">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
<table width="700" border="1" align="center" id="user2">
<thead>
<tr>
<td>用户标识</td>
<td>用户姓名</td>
<td>用户年龄</td>
<td>用户密码</td>
</tr>
</thead>
<tbody>
<tr id="abc">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>abc123</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>33</td>
<td>abc123</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>13</td>
<td>abc123</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>45</td>
<td>abc123</td>
</tr>
<tr>
<td>5</td>
<td>朱七</td>
<td>21</td>
<td>abc123</td>
</tr>
</tbody>
</table>
</body>
</html>
jquery_wrap05_filter_wrap_find_wrapinnerelement
JQuery包装集size，length，index，slice，find，filter，is，children，next，nextAll，parent，parents，closest，siblings，add，end，andSelf的用法的更多相关文章
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- jQuery学习笔记(3)-操作jQuery包装集的函数
一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...
- jQuery包装集
jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...
- Dom对象和jQuery包装集
Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...
- jquery parent() parents() closest()区别
分类: 前端开发 parent是找当前元素的第一个父节点,不管匹不匹配都不继续往下找 parents是找当前元素的所有父节点 closest() 是找当前元素的所有父节点 ,直到找到第一个匹配的父节 ...
- JQuery 实践---创建元素包装集
1. 利用选择器,选择将被JQuery包装的元素 标识和选择DOM元素.JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中. 基本CSS选 ...
- zepto源码--核心方法8（管理包装集）--学习笔记
继续包装集过滤的相关函数的介绍,今天介绍与父元素相关的函数,parent, parents, closest, offsetParent parent 获取对象集合中每个元素的直接父元素. 与上篇文章 ...
- jQuery管理包装集笔记
size():返回包装集中元素的个数. get([n]):返回一个DOM元素或DOM元素数组(接受负值). toArray():将包装里的所有元素作为DOM元素数组返回. eq(n):获取包装集中与i ...
- 从零开始学 Web 之 jQuery（八）each，多库共存，包装集，插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- Dijkstra算法求最短路径(java)（转）
原文链接:Dijkstra算法求最短路径(java) 任务描述:在一个无向图中,获取起始节点到所有其他节点的最短路径描述 Dijkstra(迪杰斯特拉)算法是典型的最短路径路由算法,用于计算一个节点到 ...
- 数据库实例: STOREBOOK > 用户
ylbtech-Oracle:数据库实例: STOREBOOK > 用户 用户 1.返回顶部 1.1, 1.2, 2. 用户列表(用户状态=OPEN)返回顶部 2.1, DBSNMP 2.2 ...
- [leetcode]Binary Tree Level Order Traversal II @ Python
原题地址:http://oj.leetcode.com/problems/binary-tree-level-order-traversal-ii/ 题意: Given a binary tree, ...
- Android完全退出程序、线程
1.先添加权限 <uses-permission android:name="android.permission.RESTART_PACKAGES" /> 2.添加A ...
- Objective-C-Category类别
Object-C开发的时候有的时候会用到Category类,类似于Java和C#中扩展类,就是如果你觉得如果你觉得常用的方法在String中没有,可以根据业务需求和个人喜好写一个扩展类,然后在其中补充 ...
- 关于ListView中getView被重复调用的问题
我用ListView显示数据时,自定义了一个适配器(extends ArrayAdapter),然后重写了getView方法,现在出现一个问题,就是这个getView()方法被重复调用了,比如我的_d ...
- Caused by: com.alibaba.dubbo.remoting.TimeoutException: Waiting server-side response timeout by scan timer. start time: 2016-07-20 16:27:34.873, end time: 2016-07-20 16:27:39.895, client elapsed: 0 ms
方案一: 重启dubbo连接 zookeeper 方案二: 经压测,greys跟踪得知,是dubbo的monitor的问题.主要超时的方法是dubbo的getIP方法,monitor每次收集数据的时候 ...
- Java 调用Web service 加入认证头（soapenv:Header）
前言 有时候调用web service 会出现 Message does not conform to configured policy [ AuthenticationTokenPolicy(S) ...
- JNDI配置c3p0连接池
JNDI是什么呢? 就是java命名和文件夹接口.是SUN公司提供的一种标准的Java命名系统接口. 不好理解?简单说呢.他就是一个资源,放在tomcat里面的一个资源,今天我们就把数据库连接池放到t ...
- H面试（23）：求子数组最大和
题目描述: 输入一个整形数组,数组里有正数也有负数. 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. 求所有子数组的和的最大值.要求时间复杂度为O(n). 例如输入的数组为1, -2 ...