jQuery使用之处理页面元素用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
javascript使用链接跨域下载图片
Nov 01 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 #Javascript
jQuery使用之设置元素样式用法实例
Jan 19 #Javascript
jQuery学习笔记之基础中的基础
Jan 19 #Javascript
jQuery 选择器详解
Jan 19 #Javascript
jQuery使用之标记元素属性用法实例
Jan 19 #Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
You might like
使用PHP模拟HTTP认证
2006/10/09 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
建筑设计专业求职自我评价
2014/03/02 职场文书
成绩单公证书
2014/04/10 职场文书
学生评语大全
2014/04/18 职场文书
实习推荐信格式模板
2015/03/27 职场文书
四年级作文之植物
2019/09/20 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
Python 绘制多因子柱状图
2022/05/11 Python