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写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
js仿微信抢红包功能
Sep 25 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
JS中call和apply函数用法实例分析
Jun 20 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的ZIP压缩类分享
2014/05/04 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
详解Python中for循环的使用
2015/04/14 Python
python回调函数用法实例分析
2015/05/09 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python如何调用字典的key
2020/05/25 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
求职推荐信范文
2013/12/01 职场文书
医院工作检讨书范文
2014/02/10 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
高考寄语大全
2014/04/08 职场文书
525心理活动总结
2014/07/04 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
初中作文评语
2014/12/25 职场文书
实名检举信范文
2015/03/02 职场文书
安全教育片观后感
2015/06/17 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书