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下利用fso判断文件是否存在的代码
Dec 11 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
jquery与ajax获取特殊字符实例详解
Jan 08 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
如何在Vue.JS中使用图标组件
Aug 04 Javascript
openlayers4实现点动态扩散
Aug 17 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一些有意思的小区别
2006/12/06 PHP
php入门学习知识点三 PHP上传
2011/07/14 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
vue 过滤器filter实例详解
2018/03/14 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Python使用正则表达式实现文本替换的方法
2017/04/18 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Python中bisect的使用方法
2019/12/31 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
Python利用命名空间解析XML文档
2020/08/10 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
写得不错的求职信范文
2014/07/11 职场文书
圣诞节开幕词
2015/01/29 职场文书
张思德观后感
2015/06/09 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL