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 ...
随机推荐
- VC++ 改动VMware BIOS、uuid_location、ethernet0_address等
VC++ 改动VMware BIOS.uuid_location.ethernet0_address等.主要问题例如以下 (1)随机产生16进制数. (2)改动vmx相应项.依据规则一般仅仅改动最后三 ...
- ASP.NET MVC 编程参考
ASP.NET MVC 编程参考 转载请注明出处:http://surfsky.cnblogs.com MVC 参考 http://msdn.microsoft.com/zh-cn/dd40 ...
- 《TCP/IP具体解释卷2：实现》笔记--接口层
接口层包含在本地网上发送和接收分组的硬件与软件. 我们用设备驱动程序来表示与硬件及网络接口通信的软件,网络接口是指在一个特定网络上硬件与设备驱动器之间的接口. Net/3接口层试图在网络协议和连接到一 ...
- VS2008+Windows DDK 7的环境配置(二)
在第一篇的基础上,进行如下的步骤,就可以编译出X64的驱动程序. (建议再另外建一个项目,这样避免混淆,因为x86和x64编译的有些编译选项是不同的.) 1. 安装VS2008 x64 build 组 ...
- Java的泛型中，通配符可以设置上限和下限
上限:<? extends T> ?是T和T的子类 下限:<? super T> ?是T和T的父类 怎么看待这个上限和下限呢 首先应该想 其实对于Java来说 <? ex ...
- CF 557B(Pasha and Tea-贪心)
B. Pasha and Tea time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- easyui combobox实现本地模糊查询
直接上代码 $("#combobox1").combobox({ valueField : "value", textField : "text&qu ...
- 漫谈单点登录（SSO）(淘宝天猫)（转载）
1. 摘要 ( 注意:请仔细看下摘要,留心此文是否是您的菜,若浪费宝贵时间,深感歉意!!!) SSO这一概念由来已久,网络上对应不同场景的成熟SSO解决方案比比皆是,从简单到复杂,各式各样应有尽有!开 ...
- Intent跳转到系统应用中的拨号界面、联系人界面、短信界面及其他
现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...
- Session 共享（StateServer模式）（原创）
Session 共享要注意两点: 1.必须在同一个域名下 2.StateServer模式是把session保存在同一台服务器上的进程:aspnet_state.exe里面,当然也可以保存在memcac ...