jQuery使用之(三)处理页面的元素
对于页面的元素,在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 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- JQuery操作iframe父页面与子页面的元素与方法
JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...
- 控制使用jquery load()方法载入新页面中的元素
最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
- 利用Jquery的load函数实现页面的动态加载
利用Jquery的load函数实现页面的动态加载 js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...
- Android+Jquery Mobile学习系列(4)-页面跳转及参数传递
关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同.撸主前段时间就是很急躁地上手开发程序,结果在页面转场 ...
- jQuery基础(三)事件
1.鼠标事件 jQuery鼠标事件之click与dblclick事件 click方法用于监听用户单击操作,dbclick方法用于监听用户双击操作. 方法一:$ele.click() 绑定$ele元素, ...
随机推荐
- 【温故而知新-Javascript】对象
1 创建对象 Javascript 支持对象的概率.有多种方法可以用来创建对象. <!DOCTYPE html> <html lang="en"> < ...
- 【Android UI设计与开发】3.引导界面(三)实现应用程序只启动一次引导界面
大部分的引导界面基本上都是千篇一律的,只要熟练掌握了一个,基本上也就没什么好说的了,要想实现应用程序只启动一次引导界面这样的效果,只要使用SharedPreferences类,就会让程序变的非常简单, ...
- 边工作边刷题:70天一遍leetcode: day 79
3Sum Smaller 要点:类似的题还有lintcode的triangle count:https://github.com/delbao/onlineJudge/blob/master/lint ...
- HDU 3333 Turing Tree --树状数组+离线处理
题意:统计一段序列[L,R]的和,重复元素只算一次. 解法:容易看出在线做很难处理重复的情况,干脆全部讲查询读进来,然后将查询根据右端点排个序,然后离散化数据以后就可以操作了. 每次读入一个数,如果这 ...
- mysql创建表
说明:此文件包含了blog数据库中建立所有的表的Mysql语句. 在sql语句中注意“约束的概念": 1.实体完整性约束(主键--唯一且非空) primary key() 违约处理:No a ...
- 仙人掌(cactus)
仙人掌(cactus) Time Limit:1000ms Memory Limit:64MB 题目描述 LYK 在冲刺清华集训(THUSC) !于是它开始研究仙人掌,它想来和你一起分享它最近研究的 ...
- Unity手机平台播放影片
播放视频方法 截止到目前的Unity4.2版本,要在手机平台上播放影片,有两种方法: 使用Unity自带的Move Texture http://docs.unity3d.com/Documentat ...
- Java Executor并发框架(一)整体介绍
一.概述 Java是天生就支持并发的语言,支持并发意味着多线程,线程的频繁创建在高并发及大数据量是非常消耗资源的,因为java提供了线程池.在jdk1.5以前的版本中,线程池的使用是及其简陋的,但是在 ...
- Android Studio系列教程四--Gradle基础
Android Studio系列教程四--Gradle基础 2014 年 12 月 18 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://stormzhang ...
- 运维工作中sed常规操作命令梳理
sed是一个流编辑器(stream editor),一个非交互式的行编辑器.它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间",接着用sed命令处理缓冲 ...