jQuery 第二课 操作包装集元素代码


Posted in Javascript onMarch 14, 2010

例如:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Wrapper</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("<p>I am a red line.</p>").css("color", "Red").appendTo("#foo"); 
}); 
</script> 
</head> 
<body> 
<div id="foo"> 
</div> 
</body> 
</html>

$创造了一个p元素的包装元素,这个包装元素和用上文提到的选择符选到的元素是一样的。同样也可以调用jQuery的一些方法,最后用appendTo(以后介绍)把这个元素移动到div里。最终结果是:

jQuery 第二课 操作包装集元素代码

下面介绍对包装集操作的函数。

1. html(),html(text). 第一个函数返回包装集第一个元素内部的html,第二个函数将包装集中的所有元素的内部html设置为text。

2.size()。返回包装集包含的元素。

3.get(),get(n)。第一个函数将包装集合内的HTML元素以javascript数组的形式返回,第二个元素返回第n个HTML元素。

4.index(elem). 返回传入的HTML元素elem在包装集中的位置。如果不在包装集中,则返回-1。

5.add(s),add(elem),add(array). add函数用于向包装集中添加元素。如果是选择器,则添加所有被选中的元素,如果是HTML片段,则根据此片段创建HTML元素并添加此元素;如果是HTML元素或者HTML元素的数组,则直接添加。

6. not(expression),filter(expression). 这两个函数是用来筛选包装集的元素的。expression可以是一个字符串(选择符),或者是html元素或者元素数组。not函数除去符合选择符的元素或者包含在数组中的元素。filter则相反,留下符合选择符的元素或者包含在数组中的元素。

7.slice(begin,end) 这个函数返回的是一个新建的包装集,内容是原包装集从第begin到第end个元素。end省略则表示最大长度。

先来看几个例子。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Wrapper</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('span').html($('li').size()); 
$('li').not('li:first').add('p:first').css('color', 'Red'); 
$('li').get(0).innerHTML = "First Special Item"; 
$('p:last').html($('li').html()); 
}); 
</script> 
</head> 
<body> 
<ul> 
<li>First Item</li> 
<li>Second Item</li> 
<li>Third Item</li> 
<li>Forth Item</li> 
<li>Fifth Item</li> 
</ul> 
<p>I am a lonely p.</p> 
<p>The UL has <span></span> elements.</p> 
<span>Hello jQuery.</span> 
<p></p> 
</body> 
</html>

第一行演示了html和size的用法。按上面的介绍,两个span中的内容都应该会变成5. 第二行演示了not和add的一个用法。最终后四个li和第一个p会变成红色。第三行演示了get的用法,一旦调用get之后,返回值就不是包装元素而是HTML元素,因此可以使用HTML DOM提供的方法设置innerHTML。最后一行还是演示html()的用法,要注意html()返回的是第一个元素的内部内容,但是html(text)会把所有元素的内容都设置成text。 最终的结果如下:

jQuery 第二课 操作包装集元素代码

9. 这是一大类非常有用的函数,可以根据位置关系筛选元素。

children() 返回包装集内元素的子元素(儿子元素,往下多层的不算)
contents() 返回包装集的内容的包装集,可能有文本节点(这个包装集有些特殊,下面介绍)
next() 包装集元素中不重复的下一个元素。
nextAll() 包装集元素中所有的下一个元素。
parent() 包装集中元素不重复的父元素的包装集
parents() 同上,但是一直向上追溯到文档根元素(不包括根元素)
prev() 类似next(),所有不重复的前一个元素
prevAll() 类型nextAll(),所有前一个元素
siblings() 包装集中所有不重复的兄弟元素。

先看前两个函数的区别,HTML代码还是用上一个例子的,js脚本如下:

$(function() { 
var ul = $('ul:first'); 
$('p span').html(ul.children().size()); 
var content = ul.contents(); 
alert(content.size()); 
});

children()返回的包装集的数量是6,说明最后一个嵌套的<ul>仅算作一个元素。但是contents()返回的包装集的数量多达13。利用调试器查看一下它的内容:
jQuery 第二课 操作包装集元素代码
它和children的区别就是包含了大量的Text节点,包括仅仅是一个空行的文本节点。

再看next和nextAll方法,仍然使用上面的HTML的代码,js脚步如下:

$(function() { 
$('span:last').html($('ul').next().html()); 
$('p:last').html($('ul').nextAll().size()); 
});ul的下个元素应该是I am a lonely p.所有 下个元素共有4个。故结果为:

jQuery 第二课 操作包装集元素代码 
其他函数使用类似,不再举例。
10.find
find方法和filter方法很容易混淆,同样也是传入一个选择符筛选包装集中的元素。不过find筛选的是包装集内元素的子元素,filter是筛选的包装集内的元素。下面会举一个例子。
11 clone
clone方法返回一个包装集的副本。
例子:
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Wrapper</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('body').children().filter('p:first').css('color', 'Red').appendTo('#container'); 
$('body').children().find('p').css('color', 'Green').appendTo('#container'); 
$('p:last').clone().css('color', 'Red').appendTo('body'); 
}); 
</script> 
</head> 
<body> 
<p>I am a lonely p.</p> 
<div>The UL has <p>Inner P</p> elements.</div> 
<p>Hello jQuery.</p> 
<div id='container'></div> 
</body> 
</html>

这是一个比较有意思的例子。第一行筛选出第一个p并且设为红色,再移动到最后的一个div中。第二行筛选出包含在包装集中的p,设为绿色,移动到最后一个div中,注意这里,此时这句筛选到的p有两个,一个是Inner P,还有一个是被第一句移动到最后的div中的 I am a lonely p.再把这两个元素添加到最后的div中,由于InnerP本身就在这个div中,所以相当于没有移动。最后,把最后一个p复制一份,设置为红色,添加到body最后。因此,最终的页面和色彩如下:
jQuery 第二课 操作包装集元素代码 
最后介绍连缀链的管理。所谓连缀链,上面的例子也有体现,就是每调用一个jQuery方法它都返回一个包装集,这个包装集作为下一个方法的调用者,构成一个链。在这个过程中有可能会产生新的包装集(比如调用clone())方法。在一个连缀链中,如果调用end方法,则返回上一个包装集,如果调用andSelf方法则把当前和上一个包装集合并成一个包装集并返回。可以想到,jQuery内部把这些连缀的包装集存在一个堆栈中。下面的简单例子展示上述原理:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Wrapper</title> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('div:eq(0)').find('p:lt(2)').css('color', 'red'); 
$('div:eq(1)').find('p:lt(2)').end().css('color', 'blue'); 
$('div:eq(2)').find('p:last').prev().andSelf().css('color', 'Green'); 
}); 
</script> 
</head> 
<body> 
<div> 
<p>div1 p1</p> 
<p>div1 p2</p> 
<p>div1 p3</p> 
</div> 
<div> 
<p>div2 p1</p> 
<p>div2 p2</p> 
<p>div2 p3</p> 
</div> 
<div> 
<p>div3 p1</p> 
<p>div3 p2</p> 
<p>div3 p3</p> 
</div> 
</body> 
</html>

jQuery 第二课 操作包装集元素代码
Javascript 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
JavaScript实现alert弹框效果
Nov 19 Javascript
jQuery入门第一课 jQuery选择符
Mar 14 #Javascript
使用JavaScript switch case 另类写法
Mar 14 #Javascript
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 #Javascript
input的focus方法使用
Mar 13 #Javascript
JavaScript prototype对象的属性说明
Mar 13 #Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 #Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
php创建多级目录代码
2008/06/05 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
JS批量操作CSS属性详细解析
2013/12/16 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS实现的对象去重功能示例
2019/06/04 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python反转序列的方法实例分析
2018/03/21 Python
如何在python中执行另一个py文件
2020/04/30 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
公务员转正考察材料
2014/02/07 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
合伙经营协议书
2014/04/18 职场文书
单位实习鉴定评语
2015/01/04 职场文书
春季运动会加油词
2015/07/18 职场文书
高三化学教学反思
2016/02/22 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书