您的位置：首页 > Web前端 > JQuery

jQuery wrap wrapAll wrapInner使用

2015-11-05 17:45 633 查看

<%@ 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);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航