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 相关文章推荐
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
jquery调用wcf并展示出数据的方法
Jul 07 Javascript
JavaScript中string转换成number介绍
Dec 31 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
再次研究下cache_lite
2007/02/14 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
大一自我鉴定范文
2013/12/27 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
初三学习计划书范文
2014/04/30 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
解除施工合同协议书
2014/10/17 职场文书
春秋淹城导游词
2015/02/11 职场文书
个人催款函范文
2015/06/24 职场文书
社区安全温馨提示语
2015/07/14 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL