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 ...
随机推荐
- 2013年度最新最佳CSS网页设计实例
CSS在网页设计中扮演着举足轻重的角色,尤其是CSS3和HTML5的出现,让我们更加相信CSS能给我们带来无限的遐想和强有力的视觉冲击.今天我要给大家推荐几个最新CSS佳作,虽然本人没有设计头脑,但还 ...
- UML解惑：图说UML中的六大关系
UML定义的关系主要有六种:依赖.类属.关联.实现.聚合和组合.这些类间关系的理解和使用是掌握和应用UML的关键,而也就是这几种关系,往往会让初学者迷惑.这里给出这六种主要UML关系的说明和类图描述, ...
- Android GUI之View事件处理（二）
在上篇文章中,我们分析了View的事件处理过程,当然这里的View是指基本的View.当View接收到Touch事件时,首先会调用dispacheTouchEvent方法,在这个方法中会调用OnTou ...
- scala 学习笔记十 一 伴生对象
1.介绍 a.所谓伴生对象就是和某个class同名的object, 并且object 必须和class在同一个scala源文件中. b.在scala中,没有像java中的静态类,静态方法和静态成员等, ...
- linux程序调试命令addr2line之入门简单介绍(本文先不聊gdb调试)
addr2line有什么作用呢? 可别小瞧它, 它能够定位到代码出错的位置. 以下, 我们来看看这个简单的代码: #include <stdio.h> int main() { int * ...
- MongoDB学习笔记（四）--索引 && 性能优化
索引 基础索引 ...
- C++变量未进行初始化时的默认值
对于built-in类型,未初始化的变量的值是undefined value. 对于自定义类型,未初始化变量的值是类型默认构造函数指定的值.
- 【深入JAVA】java注解
在阅读的过程中有不论什么问题,欢迎一起交流 邮箱:1494713801@qq.com QQ:1494713801 1.什么是java注解 注解,顾名思义,注解,就是对某一事物进行加入凝视 ...
- easyui form validate总是返回false原因
最近做表单验证用了easyui form组件.又一次发现在测试表单都填写正确了但是调试表单的代码监测到调用form的"validate"方法总是返回false 最后查了一下原因在h ...
- -Prefix.pch has been modified 的错误修复
方法一: 选择 Product > Clean 然后重新编译--运行: 方法二: 找到-Prefix.pch文件,把中间的 #ifdef __OBJC__ #import <UIKit/U ...