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小技巧
Jul 21 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
js实现购物车商品数量加减
Sep 21 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中一个有意思的日期逻辑处理
2012/03/25 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
python快速查找算法应用实例
2014/09/26 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
Python创建字典的八种方式
2019/02/27 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python实现时间序列可视化的方法
2019/08/06 Python
python批量解压zip文件的方法
2019/08/20 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
经济管理毕业生求职信
2014/03/15 职场文书
讲座主持词
2014/03/20 职场文书
婚前财产公证书
2014/04/10 职场文书
企业宣传工作方案
2014/06/02 职场文书
初中学习计划书范文
2014/09/15 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers