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. HDU 3715 Go Deeper

    二分答案 + 2-SAT判断 #include<cstdio> #include<cstring> #include<cmath> #include<vect ...

  2. rsa or dsa?

    http://www.linuxquestions.org/questions/linux-security-4/which-is-better-rsa-or-dsa-public-key-12593 ...

  3. mtp

    http://www.android.gs/mount-google-nexus-4-mtp-sd-card-on-ubuntu-and-other-linux-computers/ https:// ...

  4. 一个UWSGI的例子

    摘要:uwsgi执行顺序:启动master进程,执行python脚本的公共代码(import同一层).然后生成worker进程,uwsgi.post_fork_hook=init_functions, ...

  5. Hibernate---O/R Mapping

    1. JDBC数据库繁琐 2. sql语句不是面向对象 3. 可以在对象和关系表之间建立关联简化编程 4. O/R Mapping可以简化编程, 跨越数据库平台 比较流行的O/R Mapping Fr ...

  6. 串口通信中ReadFile和WriteFile的超时详解！

    源:串口通信中ReadFile和WriteFile的超时详解! 在用ReadFile和WriteFile读写串行口时,需要考虑超时问题.如果在指定的时间内没有读出或写入指定数量的字符,那么ReadFi ...

  7. express4.x中路由中间件和挂载路径的关系

    express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...

  8. OC与Swift创建pod

    Cocoa pods 是iOS最常用的类库管理工具   OC的使用   删除源   sudo gem sources -r https://rubygems.org/ 添加源(使用淘宝的镜像,记住要用 ...

  9. 下标脚本(Swift)

    下标脚本 可以定义在类(Class).结构体(structure)和枚举(enumeration)这些目标中,可以认为是访问集合(collection),列表(list)或序列(sequence的快捷 ...

  10. axis2开发实例（一）

    主要参考<axis2之webservice新手超详细教程http://wenku.baidu.com/view/6eae036d011ca300a6c390a4.html> <axi ...