JQuery包裹DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery包裹DOM节点的方法。分享给大家供大家参考。具体分析如下:

如果要将某个节点用其他标记包裹起来,JQuery提供了相应的方法,即wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且它不会破坏原始文档的语义。

wrap()

$("#li_1").wrap("<strong></strong>");

得到的结果如下:

<strong>
  <li id="li_1" title="PHP编程">简单易懂的PHP编程</li>
</strong>

包裹节点操作还有其他两个方法,即wrapAll()和wrapInner()。

wrapAll()方法

该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。JQuery代码如下:

$(".li_2").wrapAll("<strong></strong>");

使用wrapAll()方法包裹后的HTML是这样的:

<strong>
  <li class="li_2" title="C编程">简单易懂的C编程</li>
  <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li>
</strong>

wrapInner()方法

该方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。

$("#li_4").wrapInner("<strong></strong>");

运行代码后,发现<strong>标签内的内容被一对<li>标签包裹了,结果如下:

<li id="li_4" title="JQuery">
  <strong>简单易懂的JQuery编程</strong>
</li>

本例的JQuery代码如下:

<script type="text/javascript">
//<![CDATA[
$(function(){
  $("#btn_1").click(function(){
    //用<strong>元素把<li>元素包裹起来
    $("#li_1").wrap("<strong></strong>");
  })
  $("#btn_2").click(function(){
    $(".li_2").wrapAll("<strong></strong>");
  })
  $("#btn_3").click(function(){
    $("#li_4").wrapInner("<strong></strong>");
  })
});
//]]>
</script>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
Vuejs第十篇之vuejs父子组件通信
Sep 06 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
js取小数点后两位四种方法
Jan 18 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JQuery替换DOM节点的方法
Jun 11 #Javascript
JavaScript中实现map功能代码分享
Jun 11 #Javascript
JQuery复制DOM节点的方法
Jun 11 #Javascript
JavaScript中标识符提升问题
Jun 11 #Javascript
JQuery删除DOM节点的方法
Jun 11 #Javascript
JQuery插入DOM节点的方法
Jun 11 #Javascript
JQuery创建DOM节点的方法
Jun 11 #Javascript
You might like
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[04:45]DOTA2上海特级锦标赛主赛事第四日RECAP
2016/03/06 DOTA
python实现查询苹果手机维修进度
2015/03/16 Python
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
python解释器安装教程的方法步骤
2020/07/02 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
2014年教师培训的自我评价
2014/01/03 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
图文详解nginx日志切割的实现
2022/01/18 Servers
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL