jQuery--.wrap()方法
1. .wrap()方法：在每个匹配的元素外层包上一个html元素。
2. 有两种使用方法：
- .wrap(wrappingElement)：其中wrappingElement可以是一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head> <body>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</body> <script type="text/javascript">
$(function(){
$('.inner').wrap('<div class="new"></div>');
});
</script> </html>浏览器中显示的代码：
- .wrap(function(index))：回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象。index 参数表示匹配元素在集合中的集合。该函函数内的this
指向集合中的当前元素。<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head> <body>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</body> <script type="text/javascript">
$(function(){
$('.inner').wrap(function(){
return "<div class='>"+$(this).text()+"<'/div>"
});
});
</script> </html>浏览器中显示的代码：
3. 这个方法还是十分简单的，我在看代码的时候不知道这是个什么方法，但是查阅了API后就知道这个方法的作用了。
jQuery--.wrap()方法的更多相关文章
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery 事件方法大全-超全的总结
jquery经常使用的事件: /* on off hover blur change click dblclick focus ...
- Django配合使用Jquery post方法
Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...
- jQuery on()方法
jQuery on()方法是官方推荐的绑定事件的一个方法. $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法 ...
- jquery ajax 方法及各参数详解
1.$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息. 参数列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type ...
- jquery.extend方法
jquery.extend()用来扩展jquery中方法,实现插件. 1.jQuery.extend函数详细用法! 扩展jQuery静态方法. 1$.extend({ 2test:function() ...
- jQuery extend方法使用及实现
一.jQuery extend方法介绍 jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部代码实现的是相同的,只是功能却不太一样 ...
- 优化加载jQuery的方法
请看下面的一段代码: <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ...
- C#实现jQuery的方法连缀
jQuery的方法连缀使用起来非常方便,可以简化语句,让代码变得清晰简洁.那C#的类方法能不能也实现类似的功能呢?基于这样的疑惑,研究了一下jQuery的源代码,发现就是需要方法连缀的函数方法最后返回 ...
- jQuery原型方法each使用和源码分析
jQuery.each方法是jQuery的核心工具方法之一,通用例遍方法,可用于例遍对象和数组.不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象.通常需要两个参数 ...
随机推荐
- 用Middleware给ASP.NET Core Web API添加自己的授权验证
Web API,是一个能让前后端分离.解放前后端生产力的好东西.不过大部分公司应该都没能做到完全的前后端分离.API的实现方式有很 多,可以用ASP.NET Core.也可以用ASP.NET Web ...
- C#递归解决汉诺塔问题(Hanoi)
using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace MyExamp ...
- Monkey Patch/Monkey Testing/Duck Typing/Duck Test
Monkey Patch Monkey Testing Duck Typing Duck Test
- c语言实现输入一组数自动从大到小排列
#include <stdio.h>main(){ int x; printf("请输入要排序数字个数:"); scanf("%d" ...
- Java基础知识笔记（五：多线程的同步问题）
编写多线程程序往往是为了提高资源的利用率,或者提高程序的运行效率,或者更好地监控程序的运行过程等.多线程同步处理的目的是为了让多个线程协调地并发工作.对多线程进行同步处理可以通过同步方法和同步语句块实 ...
- JAVA 入门第二章 （面对对象）
本渣渣鸽了一个月终于有时间更新.因为有c++基础,学起来这章还是比较简单的,本章我觉得是程序猿质变课程,理解面向对象的思想,掌握面向对象的基本原则以及 Java 面向对象编程基本实现原理,熟练使用封装 ...
- javascript的defer和async的区别。
我们常用的script标签,有两个和性能.js文件下载执行相关的属性:defer和async defer的含义[摘自https://developer.mozilla.org/En/HTML/Elem ...
- Atitit.uke 团队建设的组织与运营之道attilax总结
Atitit.uke 团队建设的组织与运营之道attilax总结 1. intro引言:2 2. aims组织成立宗旨2 1.1. Mission组织使命2 1.2. val核心价值观2 1.3. c ...
- Android Weekly Notes Issue #225
Android Weekly Issue #225 October 2nd, 2016 Android Weekly Issue #225 本期内容包括: Android 7.0的Quick Sett ...
- 12、产品经理要阅读的书籍 - IT软件人员书籍系列文章
产品经理是软件产品的主要领导者.不同于项目经理,产品经理是对产品负责,更多的是负责产品的设计定型:而项目经理则对项目负责,更多的是负责项目软件的实现.产品经理的一些工作,和项目经理是一致的,比如需求分 ...