jQuery wrap wrapAll wrapInner使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div id="div001">div001</div>

    <div id="div002">div002</div>

    <div id="div003">div003</div>

    <div>

        <div id='div004'>

            <div id='div005'></div>

        </div>

        <button id="btn001">click me to wrap div001</button>

        <button id="btn002">click me to wrap div</button>

        <button id="btn003">click me to wrapAll div001</button>

        <button id="btn004">click me to wrapAll div</button>

        <button id="btn005">click me to wrapInner div001</button>

        <button id="btn006">click me to wrapInner div</button>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index030.js"></script>

</body>

</html>
$(function() {

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

    $('#btn003').click(btn003Click);

    $('#btn004').click(btn004Click);

    $('#btn005').click(btn005Click);

    $('#btn006').click(btn006Click);

});

function btn001Click() {

    // wrap返回的是选择器选择的对象；

    var obj = $('#div001').wrap('<div>');

    console.log(obj);

}

function btn002Click() {

    // 这个返回的是所有选择器选择的对象；每个对象都被包裹了；

    var obj = $('div').wrap('<div>');

    console.log(obj);

}

function btn003Click() {

    // 这样精确查找的情况下和wrap

    var obj = $('#div001').wrapAll('<div>');

    console.log(obj);

}

function btn004Click() {

    // 这样会把层次结构中的div都抻平级了；把div004、div005都移出来了，成为平级的东西；

    var obj = $('div').wrapAll('<div>');

    console.log(obj);

}

function btn005Click() {

    // 返回的就是div001；

    var obj = $('#div001').wrapInner('<b>');

    console.log(obj);

}

function btn006Click() {

    // 会把所有div层里面都加上了<b>,但是不会把元素结构改变；

    var obj = $('div').wrapInner('<b>');

    console.log(obj);

}

jQuery wrap wrapAll wrapInner使用的更多相关文章

  1. wrap(),wrapAll(),wrapInner()的区别

    wrap从字面上理解就是包裹的意思,这三个函数也都是起到将内部节点进行包裹的作用,但是他们的各自的功能有又大不相同. 1.  a.wrap(b) 这个函数的作用是用b将a进行包裹,其中a所选中的可以为 ...

  2. jQuery中 wrap() wrapAll() 与 wrapInner()的区别

    今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是 ...

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

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

  4. jQuery中 wrap() wrapAll() 与 wrapInner()的差异

    wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中.jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.jQ ...

  5. JQuery第二天——JQuery的DOM操作

    JQuery拥有隐式迭代和显式迭代 因为JQuery为类数组对象,可以使用手动遍历实现显式 .each():也可以使用 $("p").click(function(){ var t ...

  6. jquery基本操作笔记

    来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...

  7. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  8. Jquery day02

    jquery day01回顾 语法: $("选择器")        , $(dom对象) , $("<div>") 选择器: 基本:#id.ele ...

  9. 《锋利的jQuery》读书笔记

    jQuery理念:write less, do more! 第 一 章一:jQuery简介 a:轻量级 b:强大选择器 c:DOM封装 d:ajax封装 e:不污染顶级变量 只建立一个jQuery对象 ...

随机推荐

  1. php运行机制初探

    对于这个结果我也很吃惊,但是事实就在眼前,没办法啊,那么到底为什么会有这样的效果呢,咱们继续一探究竟: *.php(php代码) -----Scanner(zend引擎逐行扫描变为zend可以识别的语 ...

  2. javascript类的继承

    1.构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承 这里父类,子类都采用构造函数方式写,不用原型.子类调用父类函数来复制父类的属性. 1 2 3 4 5 6 7 8 9 10 11 ...

  3. higncharts 去掉Highcharts.com链接

    将credits属性设为false credits: { enabled: false },

  4. html中DIv并排显示问题

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  5. PAT (Advanced Level) 1011. World Cup Betting (20)

    简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...

  6. highcharts第一篇---简介和使用

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  7. CodeForces 617C Watering Flowers

    无脑暴力题,算出所有点到圆心p1的距离的平方,从小到大排序. 然后暴力枚举p1的半径的平方,计算剩余点中到p2的最大距离的平方,枚举过程中记录答案 #include<cstdio> #in ...

  8. Keil MDK下如何设置非零初始化变量（转）

    源:Keil MDK下如何设置非零初始化变量 一些工控产品,当系统复位后(非上电复位),可能要求保持住复位前RAM中的数据,用来快速恢复现场,或者不至于因瞬间复位而重启现场设备.而keil mdk在默 ...

  9. 用PS给图标添加外发光效果

    最近在做app的时候用到了图标需要根据点击和非点击显示两种状态(原始状态和外发光状态). 如下图: 没办法,因为这是毕业设计的东西,总不能叫同事帮忙处理下.所以自己充当了回美工. 做法如下: 1.打开 ...

  10. MapReduce 简单的全文搜索

    上一个已经实现了反向索引,那么为什么不尝试下全文搜索呢.例如有了 Hello     file3.txt:1; MapReduce     file3.txt:2;fil1.txt:1;fil2.tx ...