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 ...
随机推荐
- HDU 4462 DFS
2012 Asia Hangzhou Regional Contest 给出N*N的矩阵,所有标记为0,当中有K个点标记为1.而且能够在该位置放置一个能够覆盖曼哈顿距离为r的草人.问最少放置几个草人, ...
- 解决 WIn7 启动时“你有等待写入光盘的文件”
这几天启动时Win7总是要提示“您有等待写入光盘的文件”,启动时间也变慢. 可能是前几日通过资源管理器刻录光盘的时候留下的垃圾. 在C:\Users\ibm\AppData\Local\Microso ...
- 解决在ubuntu 12.10安装vmware-tools实现文件共享问题
解决在ubuntu 12.10安装vmware-tools出现的“The path "" is not a valid path to linux-headers-3.5.0-17 ...
- textarea光标移到末尾兼容ie,ffchrome
function moveEnd(obj){ obj.focus(); var len = obj.value.length; if (document ...
- 【js】利用闭包消除回调函数启动时值已经发生变化的影响
在以下代码中,timeFun异步执行了一个匿名函数,当输出color的值时已经由green变成red,因此输出为red. function timedFun(callback){ setTimeout ...
- hibernate4.3.10环境搭建
1.首先还是引入所须要的包 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFC ...
- Activity基本跳转
详细解释:http://blog.csdn.net/xiazdong/article/details/7664757 简单介绍activity的跳转,通过intent实现,详细的注释在代码中.涉及到a ...
- Python编程-Office操作-操作Excel(上)
首先,需要安装openpyxl库 http://openpyxl.readthedocs.org/en/default/ pyton 2.xpip install openpyxl python 3. ...
- Linux安装 微信开发者工具(deepin linux ubt)
一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...
- interllij idea13 clone及push工程到github上
转自:http://my.oschina.net/okchen/blog/337556 为什么用Intelli J idea 而不是Eclipse?因为我早已无法忍受Eclipse的慢了,搞不好还会奔 ...