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. StartUML 各种类图的例子

    1.UML分为: 1)静态建模:系统基础和系统固定框架结构,这些图形往往是“静态”的. 类图(Class Diagram):常用来分析业务概念 用例图(Use Case Diagram):常用 对象图 ...

  2. SUSE Linux Enterprise Server 11 SP1安装图解教程

    一.说明:操作系统:SUSE Linux Enterprise Server 11 SP1下载地址:需要注册才能下载二.安装系统 用启动盘成功引导之后,出现下面的界面 系统运维 温馨提醒:qihang ...

  3. Cron 时间元素

    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...

  4. STM32 IAP 在线升级详解(转)

    源:http://blog.csdn.net/yx_l128125/article/details/12992773 (扩展-IAP主要用于产品出厂后应用程序的更新作用,考虑到出厂时要先烧写IAP   ...

  5. hibernate---一对一双向外键关联 (重要)

    husband--wife: one to one 双向外键关联: 主导方: @OneToOne @JoinColumn(name="wifeId") 被主导方: @OneToOn ...

  6. CodeForces 618C CodeForces 618C

    第一反应是在凸包上随便找一条边,然后找剩下n-2个点里面距离这条边最短的一个点,这三点就构成了符合要求的三角形..然而..精度被卡死. 换种思路,随便找两个点P1,P2,找剩下n-2个点中哪一个点与P ...

  7. 7 -- Spring的基本用法 -- 11...

    7.11 基于XML Schema的简化配置方式 Spring允许使用基于XML Schema的配置方式来简化Spring配置文件. 7.11.1 使用p:命名空间简化配置 p:命名空间不需要特定的S ...

  8. Selinux是什么?

    在新的基于RHEL一般都自带了selinux,多数情况下我们把selinux禁用了,事实上既然RHEL要集成它,必然有他的优点和长处,我们通过下文来了解selinux,也许你会喜欢用上它. 英文原文来 ...

  9. iOS设置状态栏的字体颜色

    设置statusBar的[前景色部分] 1.plist设置statusBar 在plist里增加一行 UIStatusBarStyle(或者是“Status bar style”也可以),这里可以设置 ...

  10. transform和transition

    作者:zccst 例如:图片墙  .另外还有,便签墙 使用的样式: 1,正常情况下 ul#index_cards li {     background: url("../images/ca ...