Jquery中的wrap wrapAll wrapInner实战代码

最新推荐文章于 2022-03-16 21:00:09 发布
最新推荐文章于 2022-03-16 21:00:09 发布
阅读量287 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32000485/article/details/53813256
版权 
1:wrap();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrap("<div></div>")
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>


上面这个代码,根据p这个节点进行操作,那么wrap()这个方法操作之后网页会变成:



2:wrap(  ,function(){})  //回调函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrap(function(){return "<div></div>";})
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>

总结:wrap() 使用回调函数或者不使用回调函数都是一样的---都是从每个匹配的位置添加相应的HTML文档 
 



 

 

3 unwrap():与wrap()相反 将匹配的元素父级元素删除,保留自身和兄弟元素在原来位置
 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').unwrap();
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <div><p>第一段</p></div>
        <div><p>第一段</p></div>
        <div><p>第一段</p></div>
    </div>
</div>

</body>
</html>



 此处删除的都是父类的东东,对其他父类的父类--不管什么用 

 


 
 


 
 

4----wrapAll() 这个方法
 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrapAll("<div></div>")
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>




 

 

按照原来意思,就知道  一大块包裹起来  共用一个div
 

 

5 wrapAll() 这个方法的回调函数
 

  (和一般的wrap一样)

 

 
 
  

 

 

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrapAll(function (){
                return "<div></div>";
            })
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>


 
 

 

 

 

 

 

6 wrapInner()方法
 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrapInner("<div>添加的内容</div>")
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>











7 wrapInner()方法  回调函数




<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="application/javascript" src="jquery-1.8.0.min.js"></script>
    <title>wrap</title>
    <script rel="stylesheet" type="application/javascript">
        $(function(){
            $('p').wrapInner(function (){
                return "<div>添加的内容</div>"
            })
        })
    </script>
</head>
<body>
<div style="width: 900px; height: 900px;">
    <div style="width: 900px; height: 100px;">
        <p>第一段</p>
        <p>第一段</p>
        <p>第一段</p>
    </div>
</div>

</body>
</html>














===================总结


wrap() 一般情况 回调函数 都是从每个元素外面添加节点


unwrap()  删除父亲的节点,也就是父级元素


wrapAll


一般情况是把所有的节点当做一个小块,用一个节点把他们包括起来


回调函数是和wrap()一样从每个元素外面添加节点


wrapInner() 在每个节点的内容前面  ,,,注意是内容 添加内容节点  
















                

        

        

    




    

      

        

            

              
                
                  dalovehui
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
相位 unwrap 与 wrap 算法详解（附代码）

				
			

			

				

					奇思妙想赵老师的博客
				

				

					07-09
					
					1万+
					
				

			

		

		

			
				
信号处理中有一种相位处理算法，叫做 wrap 和 unwrap，本文从一个非通信专业的软件开发者的角度，简要分析了其算法原理，给出了对离散的相位数据进行 wrap 与 unwrap 解算的方法，并提出一些可能导致解算错误的因素。

			
		

	



                

              
                



	

		

			

				
					
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异

				
			

			

				

					10-25
				

			

		

		

			
				
本文结合W3School的文档，分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异，并给出了图文对比教程，非常的简单实用，有需要的朋友可以参考下

			
		

	



                


  
              

                


	

		

			

				
					
jQuery中的wrap()方法

				
			

			

				

					kongjunchao159的博客
				

				

					11-18
					
					501
					
				

			

		

		

			
				
jQuery中wrap()、wrapAll()和wrapInner()的区别
(使用指定的HTML元素来包裹被选元素)
例子：
原代码：
段落1
段落2


wrap()方法：
$('p').wrap('');
结果：

段落1
段落2



wrapAll()方法：
$('p').wrap('');
结果：


段落1
段落2




wr

			
		

	





	

		

			

				
					
文档处理 包裹

				
			

			

				

					theowl的专栏
				

				

					12-07
					
					478
					
				

			

		

		

			
				
wrap(html|ele|fn)

概述


把所有匹配的元素用其他元素的结构化标记包裹起来。


这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素（它是由所提供的HTML标记代码动态生成的），并在它的代码结构中找到最上层的祖先元素－－这个祖先元素就是包裹元素。当HTML标记代码中的元素包含文本时无法使用这个函

			
		

	



		

			
		



	

		

			

				
					
使用Wrap加密，保护Oracle程序源代码（引）

				
			

			

				

					changyanmanman的专栏
				

				

					09-22
					
					2351
					
				

			

		

		

			
				
原文转自：http://space.itpub.net/17203031/viewspace-695700

存储过程、函数、包等结构，表示了软件系统的业务逻辑和领域逻辑。将业务逻辑组织在数据层之上，特别是数据库软件中，是一种比较传统和常见的做法。虽然这种方式与时下流行的设计理念有差异，但是在实际工作中却有着很多优势。


作为领域逻辑的代表，具体的过程实现对软件企业来说，是一笔重要的无

			
		

	





	

		

			

				
					
jQuery源码分析之wrap,wrapInner,wrapAll,unwrap方法

				
			

			

				

					高山上的鱼
				

				

					10-12
					
					1218
					
				

			

		

		

			
				
首先我们回忆一下each实例方法的用法：




$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(i,elem){
     //首先这个each实例函数中，第一个参数是调用对象下标，第二个参数是调用对象DOM元素
     //this指的是调用对象的DOM元素!

			
		

	





	

		

			

				
					
wrap&wrapAll;&wrapInner;.html

				
			

			

				

					08-18
				

			

		

		

			
				
[蛋白·蛋黄】创意写法wrap&wrapAll;&wrapInner;方法应用

			
		

	





	

		

			

				
					
轻松掌握jQuery中wrap()与unwrap()函数的用法

				
			

			

				

					11-23
				

			

		

		

			
				
总结来说，`wrap()`、`wrapAll()`、`wrapInner()`和`unwrap()`是jQuery中用于处理元素包裹和解包的强大工具，它们帮助开发者更方便地构建和调整DOM结构。理解并熟练运用这些函数，能够极大地提升前端开发的效率。

			
		

	





	

		

			

				
					
详解jQuery中的DOM操作

				
			

			

				

					10-20
				

			

		

		

			
				
最后，jQuery提供`wrap()`、`wrapAll()`和`wrapInner()`来包裹元素。`wrap()`包裹单个元素，`wrapAll()`用于一组元素，`wrapInner()`则将元素的子内容包裹起来。  总的来说，jQuery的DOM操作极大地简化了JavaScript...

			
		

	





	

		

			

				
					
Flutter Widgets 之 Wrap

				
			

			

				

					老孟Flutter
				

				

					02-20
					
					1015
					
				

			

		

		

			
				
注意：无特殊说明，Flutter版本及Dart版本如下：

Flutter版本： 1.12.13+hotfix.5
Dart版本： 2.7.0


Wrap可以为子控件进行水平或者垂直方向布局，且当空间用完时，Wrap会自动换行，也是常说的流式​布局。
创建多个子控件做为Wrap的子控件，代码如下：
Wrap(
      children: List.generate(10, (i) {
 ...

			
		

	





	

		

			

				
					
JQuery中的wrap、wrapAll、wrapInner、unwrap方法

				
			

			

				

					qiangzhogshou的博客
				

				

					11-29
					
					159
					
				

			

		

		

			
				
一、wrap
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>--abc...

			
		

	





	

		

			

				
					
R3DS Wrap基本使用方法

				
			

			

				

					Michael’s Blog
				

				

					03-16
					
					4149
					
				

			

		

		

			
				
中文的R3DS Wrap软件的教程较少，最近刚好实操了一遍，特此记录下来。
为了描述方便，下面将R3DS Wrap简称Wrap。
软件官网：https://www.russian3dscanner.com/
一、 目的及所需输入材料
下面介绍一下使用Wrap将高模转为低模的方法。
虽说目的是将高模转为低模，但是从软件名称和实际操作可以看出，软件是使用低模或者说是base mesh去包裹(wrap)高模，从而得到高模上对应与低模的顶点位置。
要将高模转为低模，首先需要两个模型，一个是预先定义的低模，一个是通过

			
		

	





	

		

			

				
					
用wrap加密自己的源代码

				
			

			

				

					观想的专栏
				

				

					03-12
					
					964
					
				

			

		

		

			
				
Oracle提供了一种简易的源代码保护方式，WRAP，它能把程序的代码变成一堆看不懂的字符。



Oracle很多内置程序都使用WRAP进行加密

比如下面是SYS用户下的一个函数：



create or replace function CUBE_TABLE wrapped
a000000
1
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abcd
abc...

			
		

	





	

		

			

				
					
DOM包裹wrapInner()方法

				
			

			

				

					qq_37036642的博客
				

				

					08-03
					
					263
					
				

			

		

		

			
				
如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

听起来有点绕，可以用个简单的例子描述下，简单的看一段代码：

p元素
p元素


给所有元素增加一个p包裹

$('div

			
		

	





	

		

			

				
					
html css js网页设计

				
			

			

				

					07-12
				

			

		

		

			
				
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍：

### HTML (HyperText Markup Language)
- **定义**：HTML是构建网页内容的标准标记语言。
- **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。
- **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。

### CSS (Cascading Style Sheets)
- **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。
- **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。
- **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。

### JavaScript
- **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。
- **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。
- **语法**：Java

			
		

	





	

		

			

				
					
2023年数字乡村建设解决方案PPT(34页).pptx

					
最新发布

				
			

			

				

					07-12
				

			

		

		

			
				
数字乡村建设解决方案旨在通过数字化转型促进乡村振兴和农业农村现代化。该方案强调了数字乡村建设的战略机遇，以"1+3+5"工程为总体框架，即一个大数据中心、三大服务平台和五类主题应用。方案着重于乡村治理、产业发展和公共服务三大问题，通过完善治理体系、升级治理能力、强化产业链条和改善资源配置来推动乡村全面振兴。

方案中提出的数字乡村大数据中心是信息资源的集散地，依托大数据、AI、物联网等新技术，实现数据驱动的决策支持。三大服务平台包括产业服务、民生服务和治理服务，旨在提升农业生产智能化、经营网络化，同时优化乡村治理结构和提升服务效能。五类主题应用覆盖生产管理、流通营销、行业监管、公共服务和乡村治理，通过具体业务应用体系，实现农业全产业链的数字化管理和服务。

预期建设效益包括通过信息技术促进乡村优势产业发展，形成城郊融合型数字乡村治理新模式，以及创新服务方式，提升服务能力，保障农民权益。整体而言，该方案以数字化为手段，推动乡村经济、治理、文化等多方面的全面升级和发展。

			
		

	





	

		

			

				
					
脉冲强光技术在灭菌烧结固化应用解决方案

				
			

			

				

					07-12
				

			

		

		

			
				
脉冲强光技术在灭菌烧结固化应用解决方案，已经得到厂家授权，可以对外公示。

			
		

	





	

		

			

				
					
2024年欧洲辣椒素市场主要企业市场占有率及排名.docx

				
			

			

				

					07-12
				

			

		

		

			
				
2024年欧洲辣椒素市场主要企业市场占有率及排名.docx

			
		

	





	

		

			

				
					
1ewqeqweqweqweq

				
			

			

				

					07-12
				

			

		

		

			
				
1ewqeqweqweqweq

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值