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实现）

    最近在做分布式服务熔断,因为要实现一个熔断器状态机,所以想到状态模式.状态模式是当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决的是当控制一个对象状态的条件表达 ...

  2. C# 的sql server like 的参数

    //试了多种方式,这样写like的参数才正确 sb.Append(" and a.GOODSID like '%'+@GOODSID+'%'"); list.Add(new Sql ...

  3. JavaFX 2.0+ WebView /WebEngine render web page to an image

    http://stackoverflow.com/questions/7796558/javafx-2-0-webview-webengine-render-web-page-to-an-image ...

  4. Bundle display name 与 Bundle name 的区别

    Bundle display name 与 Bundle name 的区别是什么?"Bundle Name" and "Bundle display name" ...

  5. CodeForces 616D Longest k-Good Segment

    用队列维护一下即可 #include<cstdio> #include<cstring> #include<queue> #include<algorithm ...

  6. 程序ajax请求公共组件-- app-jquery-http.js

    $.HTTP = { getUrlParam : function (name) { var reg = new RegExp ("(^|&)" + name + &quo ...

  7. 神经网络 Neuroph - Java Neural Network Platform Neuroph

    http://neuroph.sourceforge.net/image_recognition.html https://github.com/neuroph/neuroph

  8. highcharts柱状图和饼图的数据填充

    1.其实数据填充很简单,它们就是json的格式,然后后台按照这种格式去套数据发给前端:前端再做一下连接处理等就行了. $('#program_statistics_bar').highcharts({ ...

  9. lpc1788IO口模拟IIC

    #ifndef __MYIIC_H_ #define __MYIIC_H_ #include "common.h" #include "delay.h" #in ...

  10. cygwin的安装,vi的使用,gcc,g++的使用（转）

    源:cygwin的安装,vi的使用,gcc,g++的使用 Gcc的Makefile简单使用