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 相关文章推荐
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
Jun 01 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
Vue filter介绍及其使用详解
Oct 21 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
10个简化PHP开发的工具
2014/12/25 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
类似框架的js代码
2006/11/09 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
详解webpack引用jquery(第三方模块)的三种办法
2019/08/21 jQuery
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
2019/10/15 Javascript
python3+PyQt5自定义视图详解
2018/04/24 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
十岁生日父母答谢词
2014/01/18 职场文书
运动会稿件300字
2014/02/14 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
2014财务年终工作总结
2014/12/08 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL