jQuery wrap wrapAll wrapInner使用

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <%
  3.     String path = request.getContextPath();
  4.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  5. %>
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9. <base href="<%=basePath%>">
  10. <meta charset="UTF-8">
  11. <title>b index</title>
  12. <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
  13. </head>
  14. <body style="margin:150px;">
  15.     <div id="div001">div001</div>
  16.     <div id="div002">div002</div>
  17.     <div id="div003">div003</div>
  18.     <div>
  19.         <div id='div004'>
  20.             <div id='div005'></div>
  21.         </div>
  22.         <button id="btn001">click me to wrap div001</button>
  23.         <button id="btn002">click me to wrap div</button>
  24.         <button id="btn003">click me to wrapAll div001</button>
  25.         <button id="btn004">click me to wrapAll div</button>
  26.         <button id="btn005">click me to wrapInner div001</button>
  27.         <button id="btn006">click me to wrapInner div</button>
  28.     </div>
  29.     <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
  30.     <script type="text/javascript" src="b/js/bootstrap.js"></script>
  31.     <script type="text/javascript" src="js/index030.js"></script>
  32. </body>
  33. </html>
  1. $(function() {
  2.     $('#btn001').click(btn001Click);
  3.     $('#btn002').click(btn002Click);
  4.     $('#btn003').click(btn003Click);
  5.     $('#btn004').click(btn004Click);
  6.     $('#btn005').click(btn005Click);
  7.     $('#btn006').click(btn006Click);
  8. });
  9. function btn001Click() {
  10.     // wrap返回的是选择器选择的对象；
  11.     var obj = $('#div001').wrap('<div>');
  12.     console.log(obj);
  13. }
  14. function btn002Click() {
  15.     // 这个返回的是所有选择器选择的对象；每个对象都被包裹了；
  16.     var obj = $('div').wrap('<div>');
  17.     console.log(obj);
  18. }
  19. function btn003Click() {
  20.     // 这样精确查找的情况下和wrap
  21.     var obj = $('#div001').wrapAll('<div>');
  22.     console.log(obj);
  23. }
  24. function btn004Click() {
  25.     // 这样会把层次结构中的div都抻平级了；把div004、div005都移出来了，成为平级的东西；
  26.     var obj = $('div').wrapAll('<div>');
  27.     console.log(obj);
  28. }
  29. function btn005Click() {
  30.     // 返回的就是div001；
  31.     var obj = $('#div001').wrapInner('<b>');
  32.     console.log(obj);
  33. }
  34. function btn006Click() {
  35.     // 会把所有div层里面都加上了<b>,但是不会把元素结构改变；
  36.     var obj = $('div').wrapInner('<b>');
  37.     console.log(obj);
  38. }

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. fragment 数据传递，传值，通信

    [原][Fragment精深系列4]Fragment与Activity之间的数据交互 2015-5-26阅读389 评论0   以下内容来自于自己的实践和网络资料的整理,希望对你有帮助. 一.Acti ...

  2. android里uri和url的区别

    URI :是从虚拟根路径开始的 URI,是uniform resource identifier URL:是整个链接  URI,是uniform resource location uri:file: ...

  3. Javascript 浏览器探测

    1.根据浏览器的性能 var is = { ff: window.globalStorage, ie: document.all && !window.opera, ie6: !win ...

  4. MAC 系统升级10.10以后PHP验证码错误的解决办法。[ 一行代码轻松解决！ ]

    MAC 升级到10.10 以后PHP版本为5.5,初步判定是由于FreeType 字体库的原因,导致GD库有些问题,总之就是验证码出不来.很多大牛给出的办法是重新编译PHP,这对于手头有项目的人来说可 ...

  5. javascript深入理解js闭包(看了挺多的，感觉这篇比较透彻)

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  6. SQL复习四（完整性约束）

    完整性约束是为了表的数据的正确性.主要有主键,外键的约束. 1 主键 当某一列添加了主键约束后,该列的数据就不能重复出现.这样每行记录中其主键列就能唯一的标识着以行.如学生可以用学号作为唯一的标识. ...

  7. Laravel 安装

    其实,laravel的安装网上给了很多方法,但是你可以直接根据laravel中国官网http://www.golaravel.com/docs/4.1/installation/给出的三种方法,选择其 ...

  8. Linux ALSA声卡驱动之二：声卡的创建

    1. struct snd_card 1.1. snd_card是什么 snd_card可以说是整个ALSA音频驱动最顶层的一个结构,整个声卡的软件逻辑结构开始于该结构,几乎所有与声音相关的逻辑设备都 ...

  9. abs函数

    absolute 绝对值函数 abs函数是一个取绝对值函数,你得确保ABS()括号里的表达式所计算出的结果是数字,String是字符串的意思,你括号你的数据肯定是字符串了,如果A.B两变量你是这样定义 ...

  10. Thinking in scala (4)----阶乘与尾递归

    code1: object factorial{ def main(args:Array[String])={ println(factorial(args(0).toInt)) } def fact ...