对于页面的元素,在DOM编程中可以通过各种查询、修改手段进行管理,非常麻烦。jQuery提供了一整套的方法来处理页面的元素。包括元素的内容、复制、移动和替换等。本节将介绍一些常用的内容。
1.直接获取、编辑内容。
在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容。其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml;而text()则用来获取元素的纯文本,text(content)为设置纯文本。
这两种方法有时配合着使用,text()通过用来过滤页面中的标记,而html(text)用来设置节点中的innerHtml。例如:
$(function() {
var sString = $("p:first").text(); //获取纯文本
$("p:last").html(sString);
});
利用text()的方法获取第一个P的文本,然后用html()方法赋给最后一个<p>。
text()和html()方法的巧用。
<script type="text/javascript"> $(function() { $("p").click(function() { var sHtmlStr = $(this).html(); //获取innerHTML $(this).text(sHtmlStr); //将代码做为纯文本传入 }); }); </script> <p><b>文本</b>段 落<em>示</em>例</p>
鼠标一次点击、二次点击、三次点击这些可以用在代码获取转移上。
2.移动和复制元素
在普通的DOM中,如果希望在某个元素后面添加一个元素,通常是使用父元素的appendChild()或者inserBefore()方法,很多时候需要反复需找节点的位置。十分麻烦,jQuery中提供了append()方法,可以直接为某个元素添加新的子元素。
<script type="text/javascript"> $(function() { //直接添加HTML代码 $("p:last").append("<b>直接添加</b>"); }); </script> <p>11<em title="huge, gigantic">22</em>...</p> <p>33<em title="running">44</em>...</p>
除了直接添加html代码,append()方法还可以用来添加固定的节点,例如
$("p").append($("a"));
这个情况会有一些不同,倘若添加的<p>是唯一的一个元素,那么$("a")就会被移动到该元素的所有子元素的后面,而如果目标<p>,是多个元素,那么$("a")将会以复制的形式,在每个P中都添加一个子元素,而自身保持不变。例:使用append()方法复制和移动元素。
<script type="text/javascript"> $(function() { $("p").append($("a:eq(0)")); //添加目标为多个<p> $("p:eq(1)").append($("a:eq(1)")); //添加目标是唯一的<p> }) </script> <a href="#">链接1</a> <a href="#">链接2</a> <p>文字1</p> <p>文字2</p>
以上代码中设置了两个超链接<a>用于append()调用。对于第1个超链接,添加目标$("p"),一共有两个<p>元素,对于第2个超链接,添加目标是唯一的<p>元素。
可以看到第一个超链接是以复制的形式添加的,第二个超链接则是以移动的方式添加的。
另外从上述可以看出,append()后面的<a>标记被运用了目标<p>的样式风格,同时也是保持了自身的样式风格。这是因为append()是将<a>作为<p>的子标记进行添加的,将<a>放到了<p>的所有子标记(文本)节点后面。
除了append()方法,jQuery还提供了appendTo(target)方法,用来将目标元素添加到指定目标的子元素。它的使用方法和运行结果与append()完全类似。
$(function() { $("img:eq(0)").appendTo($("p")); //添加目标为多个<p> $("img:eq(1)").appendTo($("p:eq(0)")); //添加目标是唯一的<p> }); <img src="08.jpg"> <img src="09.jpg"> <hr> <p><img src="10.jpg"></p> <p><img src="10.jpg"></p> <p><img src="10.jpg"></p>
对于第一幅照片,同事将其添加到3个p标记中,对于第二幅图片则把单独添加到1个P元素中,从执行结果可以看出,第一幅图片是以复制的形式添加到3个P元素中的,而第二幅图片是以移动的方式添加的。
与append()和appendTo()方式对应,JQ还提供了prepend()和prependTo()方法这两种方法是将元素添加到目标的所有子元素之前,也遵循:复制、移动的添加原则。
除了上述的4种方法之外Jq还提供了before()、insertBefore()、after()、和insertAfter(),用来将元素直接添加到某个节点之前或之后,而不是作为子元素插入。
其中before()与insertBefore()完全相同,after()和insertAfter()也是完全一样的,这里以after()为例
<script type="text/javascript"> $(function() { $("p").after($("a:eq(0)")); //添加目标为多个<p> $("p:eq(1)").after($("a:eq(1)")); //添加目标是唯一的<p> }); </script> <a href="#">链接1</a> <a href="#">链接2</a> <p>内容1</p> <p>内容2</p>
以上代码运行结果,可以看到after()方法同样遵循单个目标移动,多个目标复制的原则,并且不再是作为子元素添加。而是紧贴在目标元素之后的兄弟元素。
3.删除元素。
在DOM编程中,要删除某个元素往往借助父元素的removeChild()方法,而jQuery提供了remove()方法,可以直击删除元素。
例如$("p").remove();是删除整个页面中的所有p元素标记。
remove()也接受参数。
<script type="text/javascript"> $(function() { $("p").remove(":contains('1')"); //$("p:contains('1')").remove(); }); </script> <a href="#">链接1</a> <a href="#">链接2</a> <p>内容1</p> <p>内容2</p>
以上代码中remove()使用了过滤选择器,文本内容包含1的P元素被删除掉了。
虽然remove()可以接受参数,但是通常还是建议在选择器阶段就将要删除的对象确定,然后用remove()一次性删除。("p:contains('1')").remove();其效果是完全一样的,并且效果和其它代码的风格是统一的。
在DOM中,如果希望把某个元素的子元素全部删除,往往for循环的配合hasChildNodes()来判断,并用removeChildNode()逐一删除,Jquery提供了empty()方法直接删除所有的子元素。
<script type="text/javascript"> $(function() { $("p").empty(); //删除p的所有子元素 }); </script> <a href="#">链接1</a> <a href="#">链接2</a> <p>内容1</p> <p>内容2</p>
4.克隆元素。
第二节提到元素的复制和移动,但这取决于目标数的个数,很多时候开发者希望即使目标对象只要一个,同样能执行复制操作。
jQuery提供了clone()方法来完成这项任务。
<script type="text/javascript"> $(function() { $("img:eq(0)").clone().appendTo($("p")); $("img:eq(1)").clone().appendTo($("p:eq(0)")); }); </script> <img src="08.jpg"> <img src="09.jpg"> <hr> <p><img src="10.jpg"></p> <p><img src="10.jpg"></p> <p><img src="10.jpg"></p>
同样完成了上上节中appendTo()方法达到的结果。
另外clone()函数还接受布尔值对象作为参数,的那个参数为true时,除了克隆本身,它所携带的时间方法将一块被复制。
<script type="text/javascript"> $(function() { $("input[type=button]").click(function() { //克隆自己,并且克隆点击的行为 $(this).clone(true).insertAfter(this); }); }); </script> <input type="button" value="Clone Me">
以上代码在单击按钮时克隆按钮本身,同时克隆单击事件,克隆出来的按钮同样具备有克隆自己的功能。
相关推荐
主要介绍了jQuery使用之处理页面元素用法,实例分析了jQuery针对元素的内容、复制、移动和替换等操作技巧,需要的朋友可以参考下
jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。 编辑本段Jquery对象 jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧...
4.3 使用toggleClass()函数切换页面元素的样式类 4.4 为body增加class类支持 4.5 操作div的显示与隐藏 4.6 如何设定div始终居中显示 4.7 测试浏览器是否支持某些CSS 3属性 4.8 如何添加hover类到指定元素 4.9 基于...
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的...
一、问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素。... live()和bind()的区别就是live不仅可以给页面中现有的元素绑定事
主要介绍了jQuery使用之标记元素属性用法,实例分析了jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等使用技巧,需要的朋友可以参考下
第二十一节:jQuery速成- 页面的载入事件与事件处理 第二十二节:jQuery速成- 鼠标事件与交互 第二十三节:jQuery速成- 焦点事件 第二十四节:jQuery速成- 键盘事件 第二十五节:jQuery速成- 其他事件 第六章:效果...
在第三章里,你会学习如何触发事件,浏览器发事件时,你将会使用 jQuery 的事件处理机 制处理行为。你 也能够在 jQuery的秘密 sauce中获得内在的消息:在 页面完成加载前不经意 地附加事件。 在第四章里,你会学习到...
8. 如何使用jQuery来代替一个元素: 4 9. 如何验证某个元素是否为空: 4 10. 如何从一个未排序的集合中找出某个元素的索引号 4 11. 如何把函数绑定到事件上: 4 12. 如何追加或是添加html到元素中: 4 13. 在创建...
1、关于页面元素的引用; 2、jQuery对象与dom对象的转换; 3、如何获取jQuery集合的某一项; 4、同一函数实现set和get; 5、集合处理功能; 6、扩展我们需要的功能; 7、支持方法的连写; 8、操作元素的样式; 9、...
jQuery-1.8.2.js(js+css)页面的美化,更新,动画等 包含以下特点: ⒈DOM元素选择。基于开源的选择器引擎sizzle(从1.3版开始使用)。 ⒉DOM元素遍历及修改(包含对CSS1-3的支持) ⒊事件处理 ⒋动态特效 ⒌AJAX ...
jQuery的选择机制构建于Css的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。 jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript...
3.7 子元素 53 3.7.1 :nth-child 53 3.7.2 :first-child 54 3.7.3 :last-child 55 3.7.4 :only-child 55 3.8 表单 56 3.8.1 :input 56 3.8.2 :text 57 3.8.3 :password 57 3.8.4 :radio 57 3.8.5 :checkbox 58 3.8.6...
统一元素事件处理入口,让事件管理就像jQuery一样简单。 引入全局事件及跨页面事件管理机制,让跨页面间的模块调用变得简单。 引入第三方Teambition的then.js库作为promise处理替代,提高同、异步操作效率。 快速...
1、关于页面元素的引用; 2、jQuery对象与dom对象的转换; 3、如何获取jQuery集合的某一项; 4、同一函数实现set和get; 5、集合处理功能; 6、扩展我们需要的功能; 7、支持方法的连写; 8、操作元素的样式...
有了jQuery和这《jQuery实战》,你不需要再费心劳力地纠缠于各种高深复杂的javascript技巧,只需要使用层迭样式表、XHTML以及普通的javascript知识,就能直接操作页面元素,实现更快速更高效的Web开发。
第4章介绍通过jQuery实现动画的技术,我们将学会隐藏、显示和移动页面元素,获得赏心悦目的效果。 2 前 言 第5章讲述如何通过命令改变页面。这一章讲述的是动态修改HTML文档结构及其内容的技术。 第6章讨论通过...
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需使用选择器查找即可。 jQuery能做什么 ? 1. 访问和操作DOM元素 2. 控制页面样式 3. 对页面事件进行...