JQuery_DOM 节点操作之包裹节点
jQuery 提供了一系列方法用于包裹节点,那包裹节点是什么意思呢?其实就是使用字符串代码将指定元素的代码包含着的意思。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ //$('div').wrap('<strong></strong>'); //在div 外层包裹一层strong //$('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容 //$('div').wrap('<strong><em></em></strong>'); //包裹多个元素 //$('div').wrap($('strong').get(1)); //也可以包裹一个原生DOM,先获取到strong元素,后再包裹div元素 //$('div').wrap(document.createElement('strong')); //临时的原生DOM $('div').wrap(function (index) { //匿名函数 return '<strong>'+index+'</strong>'; }); }); </script> </head> <body> <strong>DOM</strong> <strong>DFM</strong> <div>节点</div> <div>节点</div> </body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $('div').unwrap(); //移除一层包裹内容,多个需移除多次 }); </script> </head> <body> <strong><div>节点</div></strong> <strong><em><div>节点</div></em></strong> </body>
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ //$('div').wrapAll('<strong></strong>'); //所有div 外面只包一层strong //$('div').wrapAll($('strong').get(0)); //同上 }); </script> </head> <body> <div>节点</div> <div>节点</div> </body>
.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。
这两种都是在外层包含,而.wrapInner()在内层包含。
<script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> $(function(){ $('div').wrapInner('<strong></strong>'); //包裹子元素内容,这里包裹了div里面的节点变成<div><strong>节点</strong></div> //$('div').wrapInner($('strong').get(0)); //DOM 节点 //$('div').wrapInner(function () { //匿名函数 //return '<strong></strong>'; //}); }); </script> </head> <body> <div>节点</div> <div>节点</div> </body>
JQuery_DOM 节点操作之包裹节点的更多相关文章
- 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- JQuery_DOM 节点操作之创建节点、插入节点
一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- Jquery6 DOM 节点操作
学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...
- 51 jquery 节点操作和 bootstrapt
jquery 和 bootstrapt1.jquery each 函数 1.each 循环方式一: 可循环对象: var arr =["alex","deng" ...
- js节点操作实例
写了一个简单的小例子来引用js实例 1. 初步节点操作: 2.兼容性节点操作: 3.节点的类型,名字: 4.使用setAttribute设置属性 5.节点复制操作: 6.删除和替换节点 如有错误,还望 ...
- 事件委托,元素节点操作,todolist计划列表实例
一. 事件委托 事件委托就是利用冒泡的原理,把事件加到父级上,来代替子集执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新加入的子元素也可以拥有相同的操作. 比如有20个&l ...
- jQuery中的DOM操作------复制及包裹节点
1.复制节点: 如果单击<li>元素后需要再复制一个<li>元素,可以用clone()方法来完成: $(this).clone().appendTo("ul" ...
- jQuery 节点操作(创建 插入 删除 复制 替换 包裹)
一,创建元素节点: 第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下: $(html); $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一 ...
随机推荐
- HDU 5458 Stability(双连通分量+LCA+并查集+树状数组)(2015 ACM/ICPC Asia Regional Shenyang Online)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5458 Problem Description Given an undirected connecte ...
- (一)GPIO 编程实验 LED 流水灯控制
7个寄存器 是R1-R16.(当然,里面有很多是分几个模式的,所以总共有37个)类似于单片机的R0-R7. GPXCON,GPXDAT等等是另外的寄存器,应该叫,特殊功能寄存器,类似于单片机的P0,P ...
- CryptographicException异常处理方法
在调用System.Security.Cryptography.ProtectedData.Protect方法来保护私密信息时,IIS可能会报以下错误:CryptographicException: ...
- java基础复习:final,static,以及String类
2.final 1)为啥String是final修饰的呢? 自己答: 答案: 主要是为了“效率” 和 “安全性” 的缘故.若 String允许被继承, 由于它的高度被使用率, 可能会降低程序的性能,所 ...
- windows下使用火狐浏览器插件AutoProxy+MyEnTunnel+SSH访问海外站点(转)
windows下使用火狐浏览器插件AutoProxy+MyEnTunnel+SSH访问海外站点 平时需要查阅一些技术资料,光走VPN太浪费流量,所以这儿教大家一种使用火狐浏览器的插件 AutoPr ...
- python 查找指定内容的txt文件
程序设计思路:1. 利用os.walk()找出所有的文件;2.利用正则找到指定后缀的文件:3.找到需要的txt文件后,通过open().readlines()读取文件中每行数据;4.读取后,保存正则匹 ...
- 让我轻轻的告诉你AliSQLselect语句中in多少个合适
在以往的分享中,不止一次被开发问: 在MySQL的官方手册上有这么一句话: the optimizer can estimate the row count for each range using ...
- JAVA join()方法
转自:http://www.open-open.com/lib/view/open1371741636171.html 一.为什么要用join()方法 在很多情况下,主线程生成并起动了子线程,如果子线 ...
- php 中文繁简体转换
<?php $testC = new TestC (); $testC->index (); class TestC { private $utf8_gb2312; private $ut ...
- 9. nginx服务实验笔记
LNMP安装与配置 Nginx与apache.lighttp性能综合对比,如下图: 一.系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu系统 需要3GB以上硬盘 ...