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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
Aug 03 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
微信小程序picker组件下拉框选择input输入框的实例
Sep 20 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
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文件锁函数flock()详细介绍
2014/11/18 PHP
Javascript开发包大全整理
2006/12/22 Javascript
基于jquery的表格排序
2010/09/11 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Python 导入文件过程图解
2019/10/15 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
销售总监岗位职责
2014/01/04 职场文书
自我鉴定四大框架
2014/01/17 职场文书
护士进修自我鉴定
2014/02/07 职场文书
幼儿教师研修感言
2014/02/12 职场文书
红头文件任命书范本
2014/06/05 职场文书
感谢信范文大全
2015/01/23 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
农民工工资支付承诺书
2015/05/04 职场文书
食品药品安全责任书
2015/05/11 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python PIL按比例裁剪图片
2022/05/11 Python