jQuery wrap wrapAll wrapInner使用
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使用的更多相关文章
- wrap(),wrapAll(),wrapInner()的区别
wrap从字面上理解就是包裹的意思,这三个函数也都是起到将内部节点进行包裹的作用,但是他们的各自的功能有又大不相同. 1. a.wrap(b) 这个函数的作用是用b将a进行包裹,其中a所选中的可以为 ...
- jQuery中 wrap() wrapAll() 与 wrapInner()的区别
今晚看书的时候发现jQuery有三个包裹节点的方法,百度了一下jQuery wrap() / wrapAll() / wrapInner(),果然搜索结果 W3School的文档说明是排第一的. 可是 ...
- 浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
本文结合W3School的文档,分析了jQuery中 wrap() wrapAll() 与 wrapInner()的差异,并给出了图文对比教程,非常的简单实用,有需要的朋友可以参考下 今晚看书的时候发 ...
- jQuery中 wrap() wrapAll() 与 wrapInner()的差异
wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中.jQuery 文档操作 - wrapAll() 方法 wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素.jQ ...
- JQuery第二天——JQuery的DOM操作
JQuery拥有隐式迭代和显式迭代 因为JQuery为类数组对象,可以使用手动遍历实现显式 .each():也可以使用 $("p").click(function(){ var t ...
- jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- Jquery day02
jquery day01回顾 语法: $("选择器") , $(dom对象) , $("<div>") 选择器: 基本:#id.ele ...
- 《锋利的jQuery》读书笔记
jQuery理念:write less, do more! 第 一 章一:jQuery简介 a:轻量级 b:强大选择器 c:DOM封装 d:ajax封装 e:不污染顶级变量 只建立一个jQuery对象 ...
随机推荐
- PAT (Advanced Level) 1048. Find Coins (25)
先对序列排序,然后枚举较小值,二分较大值. #include<iostream> #include<cstring> #include<cmath> #includ ...
- linux下的安装百度云网盘
linux下的百度网盘 (2014-10-20 18:01:14) 标签: linux 百度网盘 网盘 百度 forlinux 分类: 技术博文 百度网盘说实话,其实我挺喜欢的,好处什么的,就不说了, ...
- c#如何序列化与反序列化json文件
见网站: http://www.json.org/ 代码如下: /* * Copyright (c) 2013 Calvin Rien * * Based on the JSON parser by ...
- opencart配置
1.安装opencart 2.修改后台目录(慎重,修改后插件安装会出错) Opencart默认的后台是网站/admin这样子,很多人可以猜到这种组合对于正式生产环境很不安全,我们可以把这个admin改 ...
- Android Studio的使用(一)--显示行号、快速查找方法源
1.显示行号,只需要右击编辑窗体的边界就可以了.(这种方法只能临时显示,下次打开文件就没了,对其他文件也没用). 2.永久显示行号 3.查找某个变量.类.方法定义的源头,同时可以查找布局文件,资源文件 ...
- webfont 字体
http://www.phpdl.com/demo/webfont/index.html 淘宝web font字体,开源. 自定义字体,网站可以用服务端字体. 一般来说,只能用客户端字体.格式不同,为 ...
- Git 常用命令汇总
#安装git yum install -y curl-devel expat-devel gettext-devel openssl-devel zlib-devel yum install -y g ...
- 网页解析的全过程(输入url到展示页面)
1.用户输入网址,浏览器发起DNS查询请求 用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址. 域名解析服务器是基于UDP协议实现的一个应用程序,通常通过监听53端口来 ...
- php命名空间如何引入一个变量类名?
例子如下: $className = 'Test'; 正常 new \Require\allClass\Test(); 当然OK,但是 new \Require\allClass\$className ...
- JS基础知识——定时器
1.定时器——setInterval("执行函数名",间隔时间); setInterval(fun,1000);每隔1秒钟执行一次fun函数 setInterval("f ...