Loading

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

 

posted @ 2015-11-05 17:45  stono  阅读(291)  评论(0)  编辑  收藏  举报