jQuery基础DOM和CSS操作和DOM节点操作

基础DOM和CSS操作
DOM在JavaScript，它是一种文档对象模型。方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中，DOM不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery中，已经将最常用的DOM操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
一.DOM几个基本概念：
1.D表示的是页面文档Document、O表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
2.DOM有三种形式，标准DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在jQuery中并不需要深刻理解它。
3.树形结构用来表示DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。
二．设置元素及内容
通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行DOM的操作。那么，最常用的操作就是对元素内容的获取和修改。
html()和text()方法

<body>
<div id="box">
    <strong>www.xixi.com</strong>
</div>
</body>

(1)html()获取元素中HTML内容

$(function () {        
    alert($(\'#box\').html());            //获取html内容输出：<strong>www.xixi.com</strong>
});

(2)text()获取元素中文本内容

$(function () {        
    alert($(\'#box\').text());            //text获取的是文本，有html会自动被清理输出：www.xixi.com
});

(3)html(value)设置元素中HTML内容

$(function () {        
    $(\'#box\').html(\'<em>www.xi.cc</em>\');        //替换HTML内容，会HTML会自动解析输出：www.xi.cc
});

(4)text(value)设置原生中文本内容

$(function () {        
    $(\'#box\').text(\'<em>www.li.cc</em>\');        //替换文本内容，有HTML会自动转义输出：<em>www.li.cc</em>
});

(5)val()获取表单中的文本内容
如果元素是表单的话，jQuery 提供了val()方法进行获取或设置内部的文本数据

<body>
<input type="text" value="西西"/>
</body>

获取表单内容西西

$(function () {        
    alert($(\'input\').val());     //输出：西西
});

设置表单内容为诗诗

$(function () {        
    $(\'input\').val(\'诗诗\');      //输出：诗诗
});

如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

<body>
<input type="radio" value="男" /> 男
<input type="radio" value="女" /> 女
<input type="checkbox" value="编程" /> 编程
</body>

把下拉菜单选框默认是选定状态

$(function () {        
    $(\'input\').val([\'男\',\'女\',\'编程\']);    //value值是这些的将被选定
});

三．元素属性操作
除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
attr()和removeAttr()

<body>
<div id="box">
    <strong>www.xixi.com</strong>
</div>
</body>

(1)attr(key)获取某个元素key属性的属性值

$(function () {        
    alert($(\'#box\').attr(\'id\'));     //返回：box
});

(2)attr(key,value)设置某个元素key属性的属性值

<body>
<div id="box">
    <strong>www.xixi.com</strong>
</div>
<div id="box">
    <strong>www.xixi.com</strong>
</div>
</body>

给div里加上title="我是西西"

$(function () {        
    $(\'div\').attr(\'title\',\'我是西西\');
});

(3)attr({key1:value2,key2:value2...})设置某个元素多个key属性的属性值
给div里加上title="西西" class="red" data="123"

$(function () {        
    $(\'div\').attr({
        \'title\' : \'西西\',
        \'class\' : \'red\',            //class不建议用attr来设置，后面有功能更强大和更丰富的方法代替 
        \'data\' : \'123\'
    });
});

(4)attr(key,function(index,value){})设置某个元素key通过fn来设置

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
<div id="box">
    <strong>www.xixi.com</strong>
</div>
</body>

value得到原来的值，原来没有值的话value没用

$(function () {        
    $(\'div\').attr(\'title\', function (index, value) {
        return \'原来的title是：\' + value + \'，现在的title是：我是\' + (index+1) + \'号域名\';
    });
});

最后改变结果：

<div title="原来的title是：aaa，现在的title是：我是1号域名">
    <strong>www.xixi.com</strong>
</div>
<div id="box" title="原来的title是：undefined，现在的title是：我是2号域名">
    <strong>www.xixi.com</strong>
</div>

注意：jQuery中很多方法都可以使用 function(){}来返回出字符串，比如 html()、text()、val()和is()、filter()方法。而如果又涉及到多个元素集合的话，还可以传递index参数来获取索引值，并且可以使用第二个参数value(并不是所有方法都适合，有兴趣可以自己逐个尝试)。

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
</body>

追加通过匿名函数赋值，并传递index

$(function () {        
    $(\'div\').html($(\'div\').html() + \'<em>www.xixi.com</em>\');   //结果：www.xixi.com www.xixi.com
});

还可以实现追加内容

$(function () {        
    $(\'div\').html(function (index, value) {
        return value + \'<em>www.xixi.com</em>\';   //www.xixi.com www.xixi.com
    });
});

注意：我们也可以使用attr()来创建id属性，但我们强烈不建议这么做。这样会导致整个页面结构的混乱。当然也可以创建class属性，但后面会有一个语义更好的方法来代替attr()方法，所以也不建议使用。
删除指定的属性，这个方法就不可以使用匿名函数，传递index和value均无效。

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
</body>

删除指定的属性title

$(function () {        
    $(\'div\').removeAttr(\'title\');    //删除指定的属性title
});

编译后的结果是(源代码不会被删除)：
<div>
<strong>www.xixi.com</strong>
</div>

四．元素样式操作
元素样式操作包括了直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法。而在整个jQuery使用频率上来看，CSS样式的操作也是极高的，所以需要重点掌握。
1.CSS操作方法

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
</body>

(1)css(name)获取某个元素行内的CSS样式
获取www.xixi.com样式的颜色

$(function () {        
    alert($(\'div\').css(\'color\'));   //rgb(0,0,0)
});

(2)css([name1,name2,name3])获取某个元素行内多个CSS样式
在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
获取某个元素行内多个CSS样式
方式一：

$(function () {        
    var box = $(\'div\').css([\'color\', \'width\', \'height\']);    //得到多个CSS样式的数组对象
    for (var i in box) {
        alert(i + \':\' + box[i]);     //逐个遍历出来分别输出：color:rgb(0,0,0) width:1166px  height:18px
    }
});

方式二：jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
遍历原生态对象数组

$(function () {        
    var box = $(\'div\').css([\'color\', \'width\', \'height\']);
    $.each(box, function (attr, value) {
        alert(attr + \':\' + value);      //遍历JavaScript原生态的对象数组输出：color:rgb(0,0,0) width:1166px  height:18px
    });
});

使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？
遍历jQuery对象数组

$(function () {        
    var box = $(\'div\').css([\'color\', \'width\', \'height\']);
    $(\'div\').each(function (index, element) {
        alert(index + \':\' + element);   //结果：0:[object HTMLDivElement]
    });
});

(3)css(name,value)设置某个元素行内的CSS样式
把www.xixi.com设置为红色

$(function () {        
    $(\'div\').css(\'color\',\'red\');
});

(4)css(name,function (index, value))设置某个元素行内的CSS样式
如果想设置某个元素的CSS样式的值，需要计算可以传递一个匿名函数。
将全局的操作包装成局部操作给width原长度为1066减去300

$(function () {        
    $(\'div\').css(\'width\', function (index, value) {
        //局部操作，很舒服
        return parseInt(value) - 300 + \'px\';
    })
});

最后结果
<div style="width: 866px;">
<strong>www.xixi.com</strong>
</div>

(5)css({name1 : value1, name2 : value2})设置某个元素行内多个CSS样式
传递多个CSS样式的键值对方法

$(function () {        
    //$(\'div\').css(\'color\',\'red\').css(\'background-color\',\'#ccc\');
    $(\'div\').css({
        \'color\' : \'blue\',
        \'background-color\' : \'#eee\',
        \'width\' : \'200px\',
        \'height\' : \'30px\'
    });    
});

index.html原页面：

<body>
<div>
    <strong>www.xixi.com</strong>
</div>
</body>

style.css代码:

.red {
    color:red;
}

.bg {
    background-color:#ccc;
}
.size {
    font-size:20px;
}

(6)addClass(class)给某个元素添加一个CSS类
直接引用style.css给div添加一个class="red"

$(function () {        
    $(\'div\').addClass(\'red\');   //添加一个CSS类 
});

添加结果:
<div class="red">
<strong>www.xixi.com</strong>
</div>

(7)addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
直接引用style.css给div添加多个class="red bg size"

$(function () {        
    $(\'div\').addClass(\'red bg size\');   //添加多个CSS类
});

添加结果
<div class="red bg size">
<strong>www.xixi.com</strong>
</div>

(8)removeClass(class) 删除某个元素的一个CSS 类
直接引用style.css给div删除class里的bg

$(function () {        
    $(\'div\').addClass(\'red bg size\');   //添加多个CSS类
    $(\'div\').removeClass(\'bg\');         //删除一个CSS类    
});

删除结果：
<div class="red size">
<strong>www.xixi.com</strong>
</div>

(9)removeClass(class1 class2 class3...)删除某个元素的多个CSS类
直接引用style.css给div删除class里的red和size

$(function () {
    $(\'div\').addClass(\'red bg size\');   //添加多个CSS类        
    $(\'div\').removeClass(\'red size\');
});

删除结果：
<div class="bg">
<strong>www.xixi.com</strong>
</div>

(10)toggleClass(class)来回切换默认样式和指定样式
点击www.xixi.com实现默认样式和指定样式的切换

$(function () {
    $(\'div\').click(function () {
        $(this).toggleClass(\'red\');                //两个样式之间的切换，默认样式和指定样式的切换
    });
});

(11)toggleClass(class1 class2 class3...)多个样式来回切换默认样式和指定样式
点击www.xixi.com实现默认样式和指定样式的切换

$(function () {
    $(\'div\').click(function () {
        $(this).toggleClass(\'red size\');                //两个样式之间的切换，默认样式和指定样式的切换
    });
});

(12)toggleClass(class, switch) 来回切换样式的时候设置切换频率

$(function () {
    var count = 0;
    $(\'div\').click(function () {
        alert(\'\');
        $(this).toggleClass(\'red size\', count++ % 2 == 0);            //频率问题
    });
});

(13)toggleClass(function () {}) 通过匿名函数设置切换的规则
默认的CSS类切换只能是无样式和指定样式之间的切换，如果想实现样式1和样式2之间的切换还必须自己写一些逻辑。
style.css代码:

.red {
    color:red;
}
.green {
    color:green;
}
.bg {
    background-color:#ccc;
}
.size {
    font-size:20px;
}

实现指定样式绿红切换

$(function () {
    $(\'div\').click(function () {
        //这里只是click的局部，而又是toggle的全局
        $(this).toggleClass(\'red\');             //一开始切换到样式2    
        if ($(this).hasClass(\'red\')) {       //判断样式2存在后
            $(this).removeClass(\'green\');    //删除样式1
        } else {
            $(this).toggleClass(\'green\');     //添加样式1，这里也可以addClass
        }
    });
});

另一种写法：

$(function () {
    $(\'div\').click(function () {
        $(this).toggleClass(function () {
            //局部
            if ($(this).hasClass(\'red\')) {
                $(this).removeClass(\'red\');
                return \'green\';
            } else {
                $(this).removeClass(\'green\');
                return \'red\';
            }
        });                
    });
});

(14)toggleClass(function () {}, switch) 在匿名函数设置时也可以设置频率

$(function () {
var count  = 0;
    $(\'div\').click(function () {
        $(this).toggleClass(function () {
            //局部
            if ($(this).hasClass(\'red\')) {
                $(this).removeClass(\'red\');
                return \'green\';
            } else {
                $(this).removeClass(\'green\');
                return \'red\';
            }
        }, count++ % 2 == 0);        //出现问题            
    });
});

(15)toggleClass(function (i, c, s) {}, switch) 在匿名函数设置时传递三个参数
对于.toggleClass()传入匿名函数的方法，还可以传递 index 索引、class类两个参数以及频率布尔值，可以得到当前的索引、class 类名和频率布尔值。

$(function () {
var count  = 0;
    $(document).click(function () {
        $(\'div\').toggleClass(function (index, className, switchBool) {
            alert(index + \':\' + className + \':\' + switchBool);       //得到当前值
            //局部
            if ($(this).hasClass(\'red\')) {
                $(this).removeClass(\'red\');
                return \'green\';
            } else {
                $(this).removeClass(\'green\');
                return \'red\';
            }
        }, count++ % 2 == 0);                
    });
});

五．CSS方法
jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS操作方法
1.长度width()方法:

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
</body>

(1)width()获取某个元素的长度

$(function () {
     alert($(\'div\').width());   //1166
});

(2)width(value) 设置某个元素的长度

$(function () {
     $(\'div\').width(500);       //设置为500px
});

(3)width(function (index, width) {})通过匿名函数设置某个元素的长度

$(function () {
    $(\'div\').width(function (index, width) {
        return width - 500 + \'px\';                //虽然可以不加，会智能添加，但还是建议加上单位，更加清晰。
    });
});

2.高度height()方法:

<body>
<div title="aaa">
    <strong>www.xixi.com</strong>
</div>
</body>

(1)height()获取某个元素的长度

$(function () {
   alert($(\'div\').height());   // 默认高度是18
});

(2)height(value)设置某个元素的长度

$(function () {
   $(\'div\').height(500); //设置元素高度，直接传数值，默认加 px
});

(3)height(function (index, width) {})通过匿名函数设置某个元素的长度

$(function () {
    $(\'div\').height(function (index, value) {  //index 是索引，value 是原本值
    return value - 1;                          //无须调整类型，直接计算
    });
});

内外边距和边框尺寸方法
innerWidth()获取元素宽度，包含内边距padding
innerHeight()获取元素高度，包含内边距padding
outerWidth()获取元素宽度，包含边框border和内边距padding
outerHeight()获取元素高度，包含边框border和内边距padding
outerWidth(ture)同上，且包含外边距
outerHeight(true)同上，且包含外边距

<body>
<div title="aaa" style="width:200px;padding:100px">
    <strong>www.xixi.com</strong>
</div>
</body>

当style="width:200px;padding:100px"

$(function () {
                                            //padding
    alert($(\'div\').width());                //200       
    alert($(\'div\').innerWidth());            //400       
    alert($(\'div\').outerWidth());            //400        
    alert($(\'div\').outerWidth(true));        //400      
});

~~~~

<body>
<div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;">
    <strong>www.xixi.com</strong>
</div>
</body>

当style="width:200px;padding:100px; border:100 solid #ccc;

$(function () {
                                            //padding, border
    alert($(\'div\').width());                //200        200   
    alert($(\'div\').innerWidth());            //400        400     
    alert($(\'div\').outerWidth());            //400        600     
    alert($(\'div\').outerWidth(true));        //400        600   
});

~~~~

<body>
<div title="aaa" style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;">
    <strong>www.xixi.com</strong>
</div>
</body>

当style="width:200px;padding:100px; border:100 solid #ccc;margin:100px;"

$(function () {
                                            //padding, border, margin
    alert($(\'div\').width());                 //200        200       200
    alert($(\'div\').innerWidth());            //400        400       400
    alert($(\'div\').outerWidth());            //400        600       600
    alert($(\'div\').outerWidth(true));        //400        600       800
});

元素偏移方法
(1)offset()获取某个元素相对于视口的偏移位置

<body>
<div title="aaa" style="position:absolute;top:10px;">
    <strong>www.xixi.com</strong>
</div>
</body>

查看div相对于视口的偏移位置是多少

$(function () {
    alert($(\'div\').offset().top);      //10
});

查看<strong></strong>离<div></div>的偏移位置

$(function () {
    alert($(\'strong\').offset().top);    //11
});

(2)position()获取某个元素相对于父元素的偏移位置

<body>
<div title="aaa" style="position:relative;">
    <strong style="position:absolute;top:1px;">www.xixi.com</strong>
</div>
</body>

查看<strong></strong>相对的<div></div>的像素

$(function () {
    alert($(\'strong\').position().top);   //1
});

(3)scrollTop()获取垂直滚动条的值

<body>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>

查看目前滚动条的位置和上面点的位置

$(function () {
    alert($(window).scrollTop());   //318像素
});

(4)scrollTop(value)设置垂直滚动条的值
设置滚动条刷新的值是300像素的位置

$(function () {
    $(window).scrollTop(300);
});

(5)scrollLeft() 获取水平滚动条的值
(6)scrollLeft(value) 设置水平滚动条的值

DOM节点操作
DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。
一．创建节点
为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。

$(function () {
    var box = $(\'<div id="box">节点</div>\');       //创建节点(在内存中)赋值给变量box
    $(\'body\').append(box);                         //将节点插入到<body>元素内部
});

结果：
<body>
<div id="box">节点</div>
</body>

二．插入节点
在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但除了这个方法之余呢，jQuery提供了其他几个方法来插入节点。

<body>
<div>节点</div>
</body>

1.内部插入节点方法
(1)append(content)向指定元素内部后面插入节点content

$(function () {
    $(\'div\').append(\'<strong>DOM</strong>\');   //向div内部插入strong节点DOM
});

(2)append(function(index, html) {})使用匿名函数向指定元素内部后面插入节点

$(function () { 
    $(\'div\').append(function (index, html) {             //使用匿名函数插入节点，html 
        return \'<strong>DOM</strong>\' + index + html;    //第一个参数index=0第二个参数html传值DOM
    });
});

(3)appendTo(content)将指定元素移入到指定元素content内部后面

<body>
<strong>DOM</strong>
<div>节点</div>
</body>

将<strong>DOM</strong>放到<div>节点</div>同级节点的后面去

$(function () { 
    $(\'strong\').appendTo(\'div\');                                //移入操作，不需要创建节点
});

(3)prepend(content)向指定元素 content 内部的前面插入节点

<body>
<div>节点</div>
</body>

创建<strong>DOM</strong>插入到<div>节点</div>节点前面

$(function () { 
    $(\'div\').prepend(\'<strong>DOM</strong>\');    /将span移入div内部的前面
});

(4)prepend(function(index, html) {}) 使用匿名函数向指定元素内部的前面插入节点

$(function () { 
    $(\'div\').prepend(function (index, html) {
        return \'<strong>DOM</strong>\' + index + html;
    });
});

结果：DOM0节点节点
(5)prependTo(content)将指定元素移入到指定元素 content内部前面

<body>
<div>节点</div>
<strong>DOM</strong>
</body>

将<strong>DOM</strong>放到<div>节点</div>同级节点的前面去

$(function () { 
    $(\'strong\').prependTo(\'div\');    
});

2.外部插入节点方法

<body>
<div>节点</div>
</body>

(1)after(content)向指定元素的外部后面插入节点content

$(function () { 
    $(\'div\').after(\'<strong>DOM</strong>\');   ////向div的同级节点后面插入span
});

结果：
节点
DOM
(2)after(function (index, html) {}) 使用匿名函数向指定元素的外部后面插入节点

$(function () { 
    $(\'div\').after(function (index, html) {
        return \'<strong>DOM</strong>\' + index + html;
    });
});

结果：
节点
DOM0节点
(3)before(content)向指定元素的外部前面插入节点content

$(function () { 
    $(\'div\').before(\'<strong>DOM</strong>\');       //向div的同级节点前面插入span
});

结果：
DOM
节点
(4)before(function (index, html) {})使用匿名函数向指定元素的外部前面插入节点

$(function () { 
    $(\'div\').before(function (index, html) {
        return \'<strong>DOM</strong>\' + index + html;
    });
});

结果：
DOM0节点
节点
(5)insertAfter(content)将指定节点移到指定元素content外部的后面

<body>
<strong>DOM</strong>
<div>节点</div>
</body>

将<strong>DOM</strong>移入到<div>节点</div>的后面

$(function () { 
    $(\'strong\').insertAfter(\'div\');       //将span元素移到div元素外部的后面
});

(6)insertBefore(content)将指定节点移到指定元素content

<body>
<div>节点</div>
<strong>DOM</strong>
</body>

将<strong>DOM</strong>移入到<div>节点</div>的前面

$(function () { 
    $(\'strong\').insertBefore(\'div\');    
});

三．包裹节点
jQuery提供了一系列方法用于包裹节

<body>
<div>节点</div>
</body>

1.包裹节点
(1)wrap(html)向指定元素包裹一层html代码
第一种写法：

$(function () { 
    $(\'div\').wrap(\'<strong class="xi"></strong>\');   //在div外层包裹一层strong
});

结果：
<strong class="xi"><div>节点</div></strong>
第二种写法：自动转化成双标签把div节点包含在里面

$(function () { 
    $(\'div\').wrap(\'<strong />\');
});

结果：
<strong>
<div>节点</div>
</strong>
第三写法：添加内容

$(function () { 
    $(\'div\').wrap(\'<strong>西西</strong>\');   //包裹的元素可以带内容
});

结果：
<strong>西西
<div>节点</div>
</strong>
第四种：多个节点包裹

$(function () { 
    $(\'div\').wrap(\'<strong><em></em></strong>\');
});

结果：
<strong>
<em>
<div>节点</div>
</em>
</strong>
(2)wrap(element)向指定元素包裹一层DOM对象节点

<body>
<strong></strong>
<div>节点</div>
</body>

方式1：把<strong></strong>获取到包裹到div里面

$(function () { 
    $(\'div\').wrap($(\'strong\').get(0));
});

结果：
<strong></strong>
<strong>
<div>节点</div>
</strong>
方式2：

$(function () { 
    $(\'div\').wrap(document.createElement(\'strong\'));  //临时的原生DOM
});

(3)wrap(function (index) {})使用匿名函数向指定元素包裹一层自定义内容

$(function () { 
    $(\'div\').wrap(function (index) {
        return \'<strong>\' + index + \'</strong>\'
    });
});

结果：
<strong>0
<div>节点</div>
</strong>
(4)unwrap() 移除一层指定元素包裹的内容

$(function () { 
    $(\'div\').wrap(\'<strong><em></em></strong>\');   //创建俩层
    $(\'div\').unwrap();                             //移除一层
});

结果：
<strong>
<div>节点</div>
</strong>
(5)wrapAll(html)用html将所有元素包裹到一起

<body>
<div>节点</div>
<div>节点</div>
</body>

把俩个<div>节点</div>包含在<strong></strong>里

$(function () { 
    $(\'div\').wrapAll(\'<strong></strong>\');   //所有div外面只包一层strong
});

结果：
<strong>
<div>节点</div>
<div>节点</div>
</strong>
(6)wrapAll(element)用DOM对象将所有元素包裹在一起

$(function () { 
    $(\'div\').wrapAll(document.createElement(\'strong\'));
});

结果：
<strong>
<div>节点</div>
<div>节点</div>
</strong>
(7)wrapInner(html)向指定元素的子内容包裹一层html

$(function () { 
    $(\'div\').wrapInner(\'<strong></strong>\');   ////包裹子元素内容
});

结果：
<body>
<div>
<strong>节点</strong>
</div>
<div>
<strong>节点</strong>
</div>
</body>
(8)wrapInner(element) 向指定元素的子内容包裹一层DOM对象节点

$(function () { 
    $(\'div\').wrapInner(document.createElement(\'strong\'));
});

结果：
<body>
<div>
<strong>节点</strong>
</div>
<div>
<strong>节点</strong>
</div>
</body>
(9)wrapInner(function (index) {})用匿名函数向指定元素的子内容包裹一层

$(function () { 
    $(\'div\').wrapInner(function (index) {
        return \'<strong>\' + index + \'</strong>\'
    });
});

结果：
<body>
<div>
<strong>0节点</strong>
</div>
<div>
<strong>1节点</strong>
</div>
</body>
注意：.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。
四．节点操作
除了创建、插入和包裹节点，jQuery还提供了一些常规的节点操作方法：复制、替换和删除节点。

<body>
<div>节点</div>
</body>

复制节点：

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');                    //事件处理点击div这个节点弹出xixi.com
    });
    $(\'div\').clone(true).appendTo(\'body\');    //复制一个节点添加到HTML中
});

复制节点后第二个复制出来的节点也可以做到事件处理点击div这个节点弹出xixi.com
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来。
删除节点：

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'div\').remove();              //直接删除div元素
});

带参数删除：

<body>
<div class="box">节点</div>
<div>节点</div>
</body>

只删除class="box"的div节点

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'div\').remove(\'.box\');
});

注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本事也可以带选择符参数的，比如：$(\'div\').remove(\'#box\');只删除 id=box 的 div。
保留事件的删除节点

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'div\').detach().appendTo(\'body\');     //保留事件行为的删除
});

注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。
清空节点保留div空标签

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'div\').empty();
});

替换节点把<div>节点</div>节点换成<span>DOM</span>
方式一：

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'div\').replaceWith(\'<span>DOM</span>\');     //将div替换成span元素
});

方式二：

$(function () { 
    $(\'div\').click(function () {
        alert(\'xixi.com\');
    });
    $(\'<span>DOM</span>\').replaceAll(\'div\');      //将div替换成span元素
});

注意：节点被替换后，所包含的事件行为就全部消失了。

posted on 2018-03-31 12:18 我不是西西阅读(1502) 评论(0) 编辑收藏举报