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 ...
随机推荐
- 使用jquery操作iframe
1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe id="mainiframe ...
- 读书笔记-C#中装箱拆箱性能
前言 最近在看王涛大神的<你必须知道的.NET(第二版)>一书,嗯,首先膜拜一下…. 在书中的第五章-品味类型中,对装箱与拆箱一节感触很深,概念本身相信每一个程序猿都不陌生,装 ...
- C#全屏截图
Image baseImage = new Bitmap(Screen.PrimaryScreen.Bounds.Width, Screen.PrimaryScreen.Bounds.Height); ...
- android 中的 window,view,activity具体关系
通过讨论这个问题,我们能够见识到google是对面向对象模式的理解,能够理解android底层的一些调用.这也是一道很常见的面试题. 我们这篇文章就来解决这四个问题: Android 中view的显 ...
- 基于Sql Server 2008的分布式数据库的实践（终结）
学习.操作心得 以前在做网站程序的时候一直用的是MYSQL,但是网上搜到MYSQL不支持分布式操作,然后便开始查询MSSQL的分布式数据库的设计与操作,后来在网上找到了<基于SQL SERVER ...
- Android -- SharedPreferences存储信息
背景 Share ...
- GISer面对创业的困惑
最近看各大IT门户网站都会看到很多XXX的创业经历,特别是最近比较火爆的手机APP,更是让很多吊丝程序员成功逆袭.不得不佩服人家对自身技术的坚持和面对机会的把握能力,但是身为GIS专业的自己,每次都很 ...
- Android ProgressBar具体解释以及自己定义
版本号:1.0 日期:2014.5.16 版权:© 2014 kince 转载注明出处 这一次主要说一下Android下的进度条.为什么是它呢,由于最近被其各种美轮美奂的设计所倾倒,计划逐渐 ...
- Escape字符总结
有如下的 escape字符. 对于十进制来说,\后面只涵盖3个字符,比如\1234,是\123和字符4. 但是对于十六进制,后面会涵盖四个字符,比如\x1234,后面的四个字符都在\的涵盖范围内.
- Opera Unite如何架设自己的网站
1使用Opera的File Sharing可以共享你的文件 2使用Opera的Stream media可以共享你的视频,有些格式甚至可以直接在浏览器端打开(比如MOV,但是需要安装Quicktime的 ...