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. Java笔记（三）

    12. 字符串 String s1 = "abc"; String s2 = new String("abc"); s1在内存中有一个对象:s2在内存中有两个对 ...

  2. css3新增的background属性

    1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...

  3. html5中的postMessage解决跨域问题

    解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...

  4. R.layout.main cannot be resolved解决办法

    今天敲的代码 package com.sharpandroid.activity; import android.R; import android.app.Activity; import andr ...

  5. linux 细节 问题解决

    Ubuntu 12.04 启动时停在Checking battery state…… 1.在停止的界面按下Ctrl+Alt+F1 2.reboot halt

  6. Java中Date对象与String互转

    package com.java.test; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...

  7. JS——基础知识

    1.alert语句 弹出一个对话框. 2.console 这个是在浏览器的控制台打印输出,也有一些公司将招聘信息打印到浏览器的console窗口,比如百度首页. 3.typeof 用这个关键字可以测试 ...

  8. strlen sizeof strcat strcpy区别

      strlen(p): 能计算出p指向字符串的长度(以当前p的位置开始),不包含终止字符'\0': p可以声明为char* p或者char p[],这两种形式strlen均能正确计算. sizeof ...

  9. [Colony]RHCS集群理论

    什么是集群?     集群是一组(>2)相互独立的,通过高速网络互联的计算机组成的集合.群集一般可以分为科学集群,负载均衡集群,高可用性集群三大类.     科学集群是并行计算的基础.它对外就好 ...

  10. 有趣的keil MDK细节（转）

    源:有趣的keil MDK细节 1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed ch ...