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 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
Aug 10 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
js表单验证实例讲解
Mar 31 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
微信小程序 JS动态修改样式的实现方法
Dec 16 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
优化使用mysql存储session的php代码
2008/01/10 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
给Python入门者的一些编程建议
2015/06/15 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python 中如何写注释
2020/08/28 Python
Python request post上传文件常见要点
2020/11/20 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
小学生暑假感言
2014/02/06 职场文书
领导调研接待方案
2014/02/27 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
保险内勤岗位职责
2015/04/13 职场文书
消费者理赔投诉书
2015/07/02 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers