jQuery操作DOM(3)

​ DOM在整个网页开发中都是很关键的，它是可用于检索网页内任意元素或内容的索引目录。利用DOM提供的接口可以操作页面中的元素，还可以添加、删除以及修改元素的属性、样式、内容等。

1. 操作元素样式

​ 虽然传统的CSS样式表可以实现对元素的修饰，但如果可以任意操作元素现有的样式，或者为元素添加新的样式，Web页面就会变得灵活多变。为此，jQuery提供了一些操作元素样式的方法。

1.1 操作样式属性

1.获取样式属性值

获取样式属性： 把需要获取的样式作为属性名传递到css()方法中，即样式值。

获取多个属性： $(selector).css([‘property1’, ‘property2’…])。

获取单个属性： $(selector).css(‘property’)。

原理：

• 以数组的形式传入css()方法中；
• 返回的结果是对象的属性名和属性值；

    <div style="color: red;font-size:50px;font-family:'楷体';">
        越努力，越幸运
    </div>
    <script>
        //获取多个属性的值
        var obj = $('div').css(['color', 'font-size', 'font-family']);
        //在控制台查看obj
        console.log(obj);
    </script>

2.设置样式属性值

设置样式属性： 把需要设置的样式作为参数值传递到css()方法中，即样式值。

设置多个样式属性： $(selector).css({‘property1’: ‘value’, ‘property2’: ‘value’…})；

设置单个样式属性： $(selector).css(‘property’, ‘value’)；

原理：

• css()方法中传入一个对象，该对象中包含多个键值对；
• 每个键值对都是元素样式属性名以及对应的属性值；

    <input id="btn" type="button" value="设置样式">
    <div></div>

    <script>
        $('#btn').click(function () {
            $('div').css({ backgroundColor: 'pink', 
            width: '150px', 
            height: '150px', 
            'border-radius': '50%' })
        });
    </script>

3.通过函数设置样式属性值

函数设置样式属性： 每个样式属性对应的value值还可以替换为函数形式。

<!--语法-->
<script>   
    //设置单个属性
    /*index ——— 元素的索引值从0开始
      value ——— 元素样式属性的当前值
      newValue ——— 函数的返回值
     */
     $(selector).css('property', function (index, value) {
         return nweValue;
      });

     //设置多个属性
     $(selector).css({
           'property1': function (index, value2) {
                return newValue;
            },
            'property2': function (index, value2) {
                return newValue;
            }
     });
</script>

<!--示例-->
<script>
    //将div的宽度修改为原div宽度的2倍。
    $('div').css('width',function(index,value){
        return parseFloat(value)*2+'px';
    });
    
    //将第4个div的宽度修改为原div宽度的2倍
    $('div').css('width',function(index,value){
        if(index==3){
            return parseFloat(value)*2+'px';
        }
    })
</script>

<input id="btn" type="button" value="设置样式">
    <div></div>
    <div></div>

    <script>
        $('div').css({
            backgroundColor: 'pink',
            width: '100px',
            height: '50px',
            'border-radius': '50%'
        });

        //在原有样式的基础上，为div元素新样式
        $('#btn').click(function () {
            $('div').css({
                width: function (index, value) {
                    return parseFloat(value) * 2;
                },
                height: function (index, value) {
                    //为索引值为1的匹配元素设置高度
                    if (index === 1) {
                        return parseFloat(value) * 2;
                    }
                }
            });
        });
    </script>

1.2操作元素类

​ jQuery提供了专门的操作类的方法，包括添加类、移除类、切换类以及判断某个类是否存在等常用的方法。

方法	描述
addClass()	将指定的类添加到匹配元素中
removeClass()	从所有匹配的元素中删除全部或者指定的类
toggleClass()	对设置或移除被选元素的一个或多个类进行切换
hasClass()	确定是否有匹配的元素被分配了给定类

1.addClass()方法

<script>
    //添加单个类“c”
    $(selector).addClass('c');
    //添加多个类c1、c2、c3
    $(selector).addClass('c1 c2 c3');
</script>

addClass()方法： 在保留已有的样式上，再去添加新的一些样式。

添加多个类： 使用空格隔开，调用addClass()方法后，元素将具备这三个类定义的样式。

2.removeClass()方法

在网页开发中，有时需要移除一些元素已经存在的类，需要用removeClass()方法 。

removeClass()的参数：

• 是可选的，不传递参数时，会移除当前元素的所有类名。
• 一次移除指定的多个类时，需要使用空格隔开。

<script>
    //移除所有类
    $(selector).remove();
    //移除单个类
    $(selector).remove('c1');
    //移除多个类
    $(selector).remove('c1 c2 c3');
</script>

    <div></div>
    <script>
        var div = $('div');
        //添加单个类
        div.addClass('c1');
        //输出结果：<div class='c1'></div>
        console.log(div[0].outerHTML);
        //添加多个类
        div.addClass('c2 c3');
        //输出结果：<div class='c1 c2 c3'></div>
        console.log(div[0].outerHTML);
        //移除单个类
        div.remove('c1');
        //输出结果：<div class='c2 c3'></div>
        console.log(div[0].outerHTML);
        //移除所有类
        div.remove();
        //输出结果：<div class=''></div>
        console.log(div[0].outerHTML);
    </script>

注意：

css()方法与addClass()、removeClass()方法虽然都可以改变元素的样式，但适用的场景不同。建议使用addClass()、removeClass()对类进行操作，而css()方法适合CSS样式值不固定的情况。例如，为元素随机生成背景色。

3.toggleClass()方法

toggleClass()方法： 在网页开发中，当用户在多个标签中，选择一个标签时，会增加特定的样式，否则，取消该样式。

• $(selector).toggleClass(‘c’)，参数c表示一个自定义的类。
• 指定元素中若没有c，则添加，否则执行移出操作。
• addClass()和removeClass()方法虽然可以实现，但不够简便。
• 直接对元素的类进行切换。

<div></div>
    <script>
        /*匹配到的元素对指定的类名进行切换无则加，
        否则去掉。outerHTML用于获取元素内的html
        内容和文本。
        */
        var div = $('div');
        //第一次调用
        div.toggleClass('c');
        //输出结果：<div class='c'></div>
        console.log(div[0].outerHTML);
        //第二次调用
        div.toggleClass('c');
        //输出结果：<div class=''></div>
        console.log(div[0].outerHTML);
        //第三次调用
        div.toggleClass('c');
        //输出结果：<div class='c'></div>
        console.log(div[0].outerHTML);
</script>

toggleClass()方法： 还支持使用第2个参数手动控制类的添加或移除。

参数： 是一个布尔值，若值为true表示添加类，值为false表示移除类。

<script>
    //添加类
    $(selector).toggleClass('c',true);
    //移除类
    $(selector).toggleClass('c',false);
    //条件返回值
    $(selector).toggleClass('c',条件判断);
</script>

    <script>
        //案例演示：还可以通过条件判断的返回值情况设置
        var count=0;
        $('div').click(function(){
            $(this).toggleClass('c',++count%3 === 0);
        });
    </script>

扩展：在操作元素类的方法中使用函数

jQuery中用于操作元素类的addClass()、removeClass()、toggleClass()方法，都支持使用函数作为参数，通过函数的返回值来操作元素的类

<script>
        //addClass()方法
        $('div').addClass(function (index, value) {
            console.log('元素的索引：' + index);
            console.log('元素原来的class值；' + value);
            return 'item-' + index;//将返回值作为要添加的class
        });

        //removeClass()方法
        $('div').removeClass(function (index, value) {
            return 'item-' + index;//将返回值作为要移除的class
        });

        //toggleClass()方法
        $('div').toggleClass(function (index, value) {
            return 'item-' + index;//将返回值作为要移除的class
        });
</script>

<!--示例-->
<style>
    .c1 {
        color: blue;
    }

    .c2 {
        color: red;
    }

    .c3 {
        color: yellow;
    }
</style>
<body>
    <div>How</div>
    <div>are</div>
    <div>you?</div>
    <script>
        $('div').toggleClass(function (index, value) {
            if (index === 0) {
                return 'c3';
            } else if (index === 1) {
                return 'c2';
            } else if (index === 2) {
                return 'c1';
            }
        });
    </script>
</body>

4.hasClass()方法

在网页开发过程中，有时需要判断元素的某个类是否存在，然后执行某些操作。

语法： $(selector).hasClass(‘c’)；

分析： 必选参数c用于检测该类名是否存在，存在时返回true，否则返回false。

<style>
    .c {
        color: pink;
    }
</style>
<body>
    <div>test</div>
    <script>
        $('div').click(function () {
            if ($(this).hasClass('c')) {
                $(this).removeClass('c');
            } else {
                $(this).addClass('c');
            }
        });
    </script>
</body>

1.3操作元素的尺寸

元素尺寸的操作是Web开发中常用的功能之一，例如登录框的拖拽特效、图片的放大等功能。

方法	描述
width()	获取或设置元素的宽度
height()	获取或设置元素的宽度
innerWidth()	获取元素的宽度(包括内边距)
innerHeight()	获取元素的高度(包括内边距)
outerWidth()	获取元素的宽度(包括内边距和边框)
outerHeight()	获取元素的高度(包括内边距和边框)
outerWidth(true)	获取元素的宽度(包括内边距、边框和外边距)
outerHeight(true)	获取元素的高度(包括内边距、边框和外边距)

1.操作元素的宽度

width()方法： 包括设置元素的宽度和获取元素的宽度。

<script>
    $(selector).width(); //获取宽度
    $(selector).width('30px'); //设置宽度
</script>

注意：

在设置宽度时，参数的引号可以省略。但是如果不添加引号，里面传递的只能是数字，不能包含单位，如果包含单位就会出现语法错误。

height()方法： 包括设置元素的高度和获取元素的高度。

<script>
    $(selector).height(); //获取高度
    $(selector).height('30px'); //设置高度
</script>

<style>
    div {
        width: 100px;
        height: 100px;
        background: darkorange;
        border-radius: 25%;
        color: aliceblue;
        text-align: center;
        padding: 10px;
        line-height: 25px;
    }
</style>

<body>
    <input type="button" value="按钮">
    <div>只要努力，人生的长度和宽度都可以改变</div>
    <script>
        //使用width()方法和height()方法在原div元素宽高的基础上增加了50像素。
        $('input').click(function () {
            $('div').width($('div').width() + 50);
            $('div').height($('div').height() + 50);
        });
    </script>
</body>

2.获取元素的内部宽度和高度

jQuery中innerWidth()和innerHeight()方法也是用于获取元素的宽度和高度。

与width()方法和height()方法不同的是： 这两个方法包括元素的内边距。

需要注意：width()和height()不传递参数时，表示获取元素宽度和高度；传递参数时设置值，参数的引号可以省略，如果省略只能传递数字不能包含单位，否则会出现语法错误。

3.获取元素外部的宽度和高度

outerWidth()和outerHeight()方法也可获取元素的宽度和高度。

与width()方法和height()方法不同的是：

• 只是除了元素本身的宽高值，还包括内边距和边框值。
• 若在调用方法时传递参数true，获取到的结果中还会包含元素的外边距。

<style>
    body {
        border: 1px solid #ccc;
    }

    div {
        width: 100px;
        height: 100px;
        background: red;
        padding: 10px;
        border: 5px solid pink;
        margin: 20px;
    }
</style>

<body>
    <input type="button" value="获取元素的高度">
    <div>人人都是主角，过着属于自己楚门的世界</div>
    <script>
        $('input').click(function () {
            console.log($('div').width());
            console.log($('div').height());
            console.log($('div').innerWidth());
            console.log($('div').innerHeight());
            console.log($('div').outerWidth());
            console.log($('div').outerHeight());
            console.log($('div').outerWidth(true));
            console.log($('div').outerHeight(true));
        });
    </script>
</body>

div元素的外边距margin： 上下左右都是20像素。

带有参数true的outerWidth()方法和outerHeight()方法：

• 与不带有参数的这两个方法取得的外部元素宽高值，相差了40像素；
• 这40像素就是div元素的外边距。

1.4.操作元素的位置

jQuery提供了专门的操作元素位置的方法，可以操作元素在页面中的位置以及相对滚动条的位置等，包括offset()、position()、scrollLeft()等方法。

方法	描述
offset()	获取匹配元素的第一个元素的坐标位置，或设置每个元素的坐标
offsetParent()	获取距离匹配元素最近的含有定位信息的元素
position()	获取匹配元素相对父元素的偏移
scrollLeft()	获取或设置匹配元素相对滚动条左侧的偏移
scrollTop()	获取或设置匹配元素相对滚动条顶部的偏移

1.offset()方法

offset()可以获取匹配元素的第一个元素的坐标位置。若元素的样式属性display设置为none，则获取到的值为0.

语法：

$(selector).offset();

获取和设置div元素的位置：

<style>
    div {
        width: 200px;
        height: 100px;
        background: blue;
    }
</style>
<body>
    <div></div>
    <script>
        //获取div的top和left值
        console.log($('div').offset());
        console.log($('div').offset().left);
        console.log($('div').offset().top);
        //设置div的left和top值
        //向下移动100像素并向右移动200像素
        $('div').offset({ left: 200, top: 100 });
        //向右移动200像素
        $('div').offset({ left: 200 });

        //再次获取div的top和left值
        console.log($('div').offset().left);
        console.log($('div').offset().top);
    </script>
</body>

2.offsetParent()方法

​ offsetParent()方法回距指定元素最近的“被定位”的祖辈元素对象。“被定位”是指元素的样式属性中position属性的值为relative、absolute或fixed，不包括position属性的默认值static。

语法：

$(selector).offsetparent()；

<body>
    <button>设置背景颜色</button>
    <div style="border:1px solid black;
    width:70%;
    position:absolute;
    left:10px;
    top:50px">
        <div style="border:1px solid black;
        margin:50px;
        background-color:yellow">
            <p>点击按钮这一段的设置第一个定位的父元素的背景颜色。</p>
        </div>
    </div>
    <script>
        $('button').click(
            function () {
                $('p').offsetParent().css('backgroundColor', 'green')
            }
        )
    </script>
</body>

3.scrollLeft()和scrolTop()方法

​ scrollLeft()和scrolTop()方法可以获取或者设置指定元素相对滚动条左侧和顶部的偏移值。

//获取元素相对左侧的偏移值
$(selector).scrollLeft();
//获取元素相对顶部的偏移值
$(selector).scrollTop();

<style>
    div {
        background: green;
        border: 3px solid #999;
        width: 200px;
        height: 100px;
        overflow: auto;
    }

    p {
        background: pink;
        margin: 10px;
        width: 1000px;
        height: 1000px;
    }
</style>

<body>
    <input type="button" value="按钮">
    <div>
        <p>行动好过语言</p>
    </div>
    <script>
        $('input').click(function () {
            $('div').scrollLeft(500);
            $('div').scrollTop(50);
        });
    </script>
</body>

2.操作元素属性

元素属性是指当前元素节点的属性，

常用的元素属性：

• 有id、value、type；
• 以及用于标识元素状态的checked、disabled等；

2.1 获取和设置元素的属性值

1.获取元素属性值

获取元素属性值： 即把需要获取的属性名传递到attr()方法中。

语法：

 $(selector).attr('property')

语法分析：

• property可以是元素的样式属性，如style等；
• 也可以是其他属性，如value等；
• 利用attr()方法可以操作元素的任意属性；

2.设置元素属性值

设置元素属性即通过给元素设置属性名和属性值来改变元素。

设置多个属性：

$(selector).attr({‘property1’: ‘value1’,
                  ‘property2’: ‘value2’,
                  ……
                 })；

设置单个属性：

$(selector).attr('property', 'value');

语法分析：

• property表示属性的名称；
• value表示属性的值；
• 具体用法和前面学习的css()方法相似；

<!--attr()方法设置和获取元素的属性的使用。-->
<body>
    <input type="button" value="按钮一" class="btn1">
    <input type="button" value="按钮二" class="btn2">
    <script>
        $('.btn1').click(function () {
            console.log($('.btn2').attr('type'));
            $('.btn2').attr('type', 'checkbox');
        })
    </script>
</body>

<!--
将class值等于btn2的type属性设置为text；
将value属性的默认值设置为“我是文本框”
-->
<body>
    <input type="button" value="按钮一" class="btn1">
    <input type="button" value="按钮二" class="btn2">
    <script>

        $('.btn1').click(function () {
            $('.btn2').attr({ 'type': 'text', 'value': '我是文本框' });
        })
    </script>
</body>

2.2 设置元素的状态属性

jQuery中attr()方法的参数为元素状态属性时，可以用于设置元素状态；

举例： 复选框是否选中的状态，文本框或者提交按钮的启用与禁用状态等。

属性	描述
checked	获取或设置表单元素的选中状态
disabled	获取或设置表单元素的禁用状态
selected	获取或设置下拉框的选中状态

<body>
    <!--
        第1个没有定义checked属性，默认未选中；
        其余两个默认都是选中的状态；
-->
    <input type="checkbox">
    <input type="checkbox" checked="">
    <input type="checkbox" checked="checked">
    <script>
        //获取表单元素的选中状态
        /* 第1个input控件会返回undefined，
        其余两个input控件则返回checked。 
        */
        $('input:eq(0)').attr('checked');
        $('input:eq(1)').attr('checked');
        $('input:eq(2)').attr('checked');

        //设置表单元素的选中状态
        /* 无论将checked属性设置值为checked还是true，
        都可以设置元素为选中状态。 
        */
        $('input').attr('checked', 'checked');
        $('input').attr('checked', 'true');
    </script>
</body>

3.操作元素内容

jQuery中还提供了一些方法，可以操作元素内容。

举例： 设置或者返回元素的文本值、表单的字段值等。

3.1 获取和设置元素的HTML内容和文本

html()和text()方法都可以用来为元素设置文本内容。

区别： html()方法操作的元素内容包含标签，text()方法操作的内容不含标签。

方法	参数	返回值
html()	无参数	用于获取元素的HTML内容
	字符串	用于设置元素的HTML内容
text()	无参数	用于获取元素的文本内容
	字符串	用于设置元素的文本内容

<body>
<!-- 分别使用html()方法和text()方法为p元素设置文本内容。 -->
    <p id="p1"></p>
    <p id="p2"></p>
    <hr>
    <p id="p3"></p>
    <p id="p4"></p>
    <script>
        //没有带元素
        $("#p1").html('hello world!');
        $('#p2').text('hello world!');
        //带元素
        $("#p3").html('<h3>hello world!</h3>');
        $('#p4').text('<h3>hello world!</h3>');
    </script>
</body>

3.2获取和设置表单的值

val()方法：

• 可以获取和设置表单元素的值；
• 相当于JavaScript中input控件对象value属性的作用；
• value表示表单元素的value属性的值，selector一般是指表单元素。

//获取表单元素的值
$(selector).val();
//设置表单元素的值
$(selector).val(value);

<body>
    <input type="text" class="txt">
    <input type="button" value="按钮" class="btn">
    <div></div>
    <br>
    <hr><br>
    <input type="text" class="txt1">
    <input type="button" value="按钮" class="btn1">
    <div></div>
    <script>
        //text()方法
        $('.btn').click(function () {
            $('div:eq(0)').text($('.txt').val());
            $('.txt').val('');
        })
        //html()方法
        $('.btn1').click(function () {
            $('div:eq(1)').html($('.txt1').val());
            $('.txt1').val('');
        })
    </script>
</body>

4 操作DOM节点

如果需要更灵活的操作网页上的动态效果很多时候需要直接操作DOM节点。

比如： 如在网页中的某个位置动态添加a链接。

4.1创建节点

jQuery提供了动态创建节点的方法，创建节点后返回jQuery对象。

1. $()函数

$()函数在jQuery中有很多作用。$()实际可以成为工厂函数，通过此函数可以返回选择器对象，能够产生对象。

语法：

$(‘HTML代码’);

举例：

• 将DOM对象转换成为jQuery对象；
• 将HTML代码转换成DOM对象，并将其包装成jQuery对象；

//例如：将obj对象传入append()方法中，便可以在DOM中插入节点。
var p =$('<p>这是一个段落</p>');
$('body').append(p);

2. html()方法

html()方法可用来设置或返回所选元素的HTML内容。

html(‘HTML代码’) ： 可以在DOM中动态创建节点。

其作用： 与JavaScript中的 innerHTML属性类似。

语法：

$(selector).html('HTML代码');

//示例
$('body').html('<p>这是一个段落</p>');

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: yellow;
    }
</style>
<body>
    <!-- 案例演示：jQuery中创建节点的两种方式$()函数和html()方法。 -->
    <input id="btn" type="button" value="创建节点">
    <div id="dv"></div>
    <script>
        $('#btn').click(function () {
            $('#dv').html('<a href="#">腾讯</a><br/>');
            var aObj = $('<a href="#">阿里</a><br/>');
            $('#dv').append(aObj);
        });
    </script>
</body>

4. 2 插入节点

jQuery提供了一些方法用于将创建好的节点插入到DOM的不同位置。

例如： 前面用过的append()方法。

方法	描述
append(ele)	用于在匹配元素的最后一个子元素后插入ele，插入ele作为匹配元素的最后一个子元素
prepend(ele)	用于在匹配元素的第一个子元素前面插入ele，插入的ele作为匹配元素的第一个子元素
appendTo(ele)	将匹配元素插入到ele中，该匹配元素作为ele的最后一个子元素
prependTo(ele)	将匹配元素插入到ele中，该匹配元素作为ele的第一个子元素
before(ele)	在匹配元素前面插入ele元素
insertBefore(ele)	将匹配元素插入到ele之前
after(ele)	在匹配元素后面插入ele元素
insertAfter(ele)	将匹配元素插入到ele之后

<!--HTML代码-->
<nav>
    <ul>
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
</nav>

1.append()和appendTo()方法

• append()和appendTo()方法区别在于这两个方法的调用对象不同

• 不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

//append()方法
var $p ='<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部底部
$('nav').append($p);

//appendTo()方法
var $p ='<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部底部
$($p).appendTo('nav');

<!--append()和appendTo()方法运行结果-->
<nav>
   <ul>	
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
    <p>插入的节点</p>
</nav>

2.prepend()和prependTo()方法

• prepend()和prependTo()方法区别在于这两个方法的调用对象不同

//prepend()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部顶部
$('nav').prepend($p);

//prependTo()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到nav容器的内部顶部
$($p).prependTo('nav');

<!--prepend()和prependTo()方法运行结果-->
<nav>
    <p>插入的节点</p>
   <ul>	
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
</nav>

3.after()和insertAfter()方法

• after()和insertAfter()方法区别在于这两个方法的调用对象不同

//after()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之后
$('ul').after($p);

//insertAfter()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之后
$($p).insertAfter('ul');

<!--after()和insertAfter()方法运行结果-->
<nav>
   <ul>	
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
    <p>插入的节点</p>
</nav>

4.before()和insertBefore()方法

• before()和insertBefore()区别在于这两个方法的调用对象不同

//before()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之前
$('ul').before($p);

//insertBefore()方法
var $p = '<p>插入的节点</p>';
//将新创建的p节点插入到ul元素之前
$($p).insertBefore('ul');

<!--before()和insertBefore()方法运行结果-->
<nav>
    <p>插入的节点</p>
   <ul>	
        <li>序列号1</li>
        <li>序列号2</li>
        <li>序列号3</li>
    </ul>
</nav>

4.3 删除节点

在网页开发中，有时需要动态的删除某个节点。

1.remove()方法

方法	描述
remove()	从DOM中删除所有匹配的元素
detach()	从DOM中删除所有匹配的元素
empty()	删除匹配的元素集合中所有的子节点

remove()方法: 待删除元素对象调用remove()方法即可完成删除操作。

语法：

$('p').remove();

语法分析：

• $(‘p’)用于获取待删除的元素对象。
• 只会从DOM中移除匹配到的元素，但该元素还存在于jQuery对象中。

注意：

jQuery对象中不会保留元素的jQuery 数据。例如，被删除的p元素如果绑定了事件或有附加的数据等都会被移除。

2.detach()方法

detach()方法： detach()方法的使用方式与remove()基本相同。

区别：

• detach()方法不仅会保留jQuery对象中的匹配元素；
• 还会保留该元素所有绑定的事件以及附加的数据。

var obj =$(selector).detach();  //删除元素节点
$(obj).appendTo(selector);      //恢复元素节点

<button id="btn1">删除段落</button>
<button id="btn2">恢复段落</button>
<p>今天天气不错！</p>
<script>
    $('#btn1').click(function () {
        $p = $('p').detach();
    });
    $('#btn2').click(function () {
        $($p).appendTo('body')
    })
</script>

3.empty()方法

empty()方法： 清空元素中的所有后代节点。

与remove()和detach()方法不同： empty()方法并不是删除节点。

//清除div元素中的所有内容
$('div').empty();

<!--html页面-->
<ul id="ul1">
       <li><span>序列号1</span></li>
       <li><span>序列号2</span></li>
       <li><span>序列号3</span></li>
</ul>
<ul id="ul2">
       <li><span>序列号1</span></li>
       <li><span>序列号2</span></li>
       <li><span>序列号3</span></li>
 </ul>

//删除序列号2列表项
$('#ul1 li:eq(1)').remove();
//删除序列号3列表项的内容
$('#ul2 li:eq(1)').empty();

4.4 复制节点

jQuery提供一个clone()方法，专门用于处理DOM节点的复制。

语法：

$(selector).clone();

语法分析：

• 参数selector可以是选择器或HTML内容；
• 调用clone()方法后会生成一个被选元素的副本；
• 该副本需要利用插入节点的方法才能显示到DOM中；

<style>
    div {
        width: 300px;
        height: 100px;
        background-color: palegoldenrod;
        margin-top: 20px;
    }
</style>
<body>
    <input type="button" value="复制节点" id="btn">
    <div id="dv">
        <span>星星之火可以燎原</span>
    </div>
    <div id="dv1"></div>
    <script>
        $('#btn').click(function () {
            //复制第一个div中的span元素生成副本
            var spanObj = $('#dv>span').clone();
            //设置副本的样式
            spanObj.css('fontSize', '30px');
            $('#dv1').append(spanObj);
        })
    </script>
</body>

4.5 替换节点

replaceWith()和replaceAll()方法： 替换元素或元素中的内容

其区别： 在于调用方法的对象以及参数设置的不同。

语法分析：

• content可以是DOM元素对象或HTML内容。

$(selector).replaceWith(content); //replaceWith()语法
$(content).replaceAll(selector);  //replaceAll()语法

例如： 将p元素替换为span元素。

分析：

• replaceWith()方法的调用对象是待替换的元素对象。
• replaceAll()方法的使用正好与之相反。

$('p').replaceWith('<span>替换喽</span>');//实现方式一
$('<span>替换喽</span>').replaceAll('p');//实现方式二

<style>
    div {
        width: 200px;
        height: 50px;
        background-color: palegoldenrod;
        margin-top: 20px;
    }
</style>
<body>
    <input type="button" value="替代元素" id="btn">
    <div id="dv">没有永远的朋友</div>
    <div id="dv1">只有永恒的利益</div>
    <script>
        $('#btn').click(function(){
            $('#dv').replaceWith('<div>世界之所以美好</div>');
            $('<div>主要原因是有着团结奋斗的热血青年</div>').replaceAll('#dv1');
        });
    </script>
</body>

4.6 包裹节点

包裹节点是指在某个元素的外层添加父元素，将其“包裹”起来。

<!--HTML页面-->
<ul>
    <li>成都</li>
    <li>乐山</li>
    <li>宜宾</li>
</ul>

1.wrap()方法

wrap()方法用于为每个匹配到的元素添加父元素，将匹配元素包裹在其中。

语法：

 $(selector).wrap(wrapper);

语法分析： 参数wrapper表示包裹元素的结构化标记。

$('li').wrap('<strong></strong>');

<!--wrap()方法运行结果-->
<ul>
    <strong><li>成都</li></strong>
    <strong><li>乐山</li></strong>
    <strong><li>宜宾</li></strong>
</ul>

2.wrapAll()方法

wrapAll()方法： 将所有匹配元素一起包裹起来。

语法：

$(selector).wrapAll(wrapper);

语法分析： 参数wrapper表示包裹元素的结构化标记。

$('li').wrapAll('<strong></strong>');

<!--wrapAll()方法运行结果-->
<ul>
    <strong>
        <li>成都</li>
        <li>乐山</li>
        <li>宜宾</li>
    </strong>
</ul>

3.wrapInner()方法

wrapInner()方法： 为匹配元素添加子元素并且包裹匹配元素中的所有内容。

语法：

$(selector).wrapInner(wrapper);

语法分析： 参数wrapper表示包裹元素的结构化标记。

$('li').wrapInner('<strong></strong>')

<!--wrapInner()方法运行结果-->
<ul>
   <li><strong>成都</strong></li>
   <li><strong>乐山</strong></li>
   <li><strong>宜宾</strong></li>
</ul>

4.7遍历节点

在DOM元素操作中，为ul元素下的li元素内容都为添加内容。

代码实现：

$(‘ul li’).text('测试');

代码分析：

• 我们并没有去取得所有li元素然后循环添加；

• 这种实现方式被称为“隐式迭代”。它是通过jQuery内部机制实现的；

• 一般适用于对指定的元素做相同操作的处理；

1.each()方法

在实际开发中，有些需求是“隐式迭代”所不能处理的。

例如： 为ul元素下的奇数行li元素添加内容。

解决方案： 通过jQuery提供的each()方法遍历所有元素，并进行相关的处理。

语法：

$(selector).each(function(index,element){});

语法分析：

• index表示遍历索引，索引默认从0开始；
• element表示当前元素，一般使用this关键字表示当前元素；

<body>
    <ul>
        <li>刘三</li>
        <li>赵四</li>
        <li>王小五</li>
    </ul>
    <script>
        //获取第2个li元素中的文本内容
        $('li').each(function(index){
            if(index == 1){
                console.log($(this).text());
            }
        })
    </script>
</body>

<style>
    ul li {
        width: 60px;
        height: 100px;
        background-color: green;
        list-style-type: none;
        float: left;
        margin-left: 10px;
    }
</style>

<body>
    <ul id="uu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <script>
        //让ul列表中的每个li元素的背景色由浅入深。
        $('#uu>li').each(function (index, element) {
            //改变每个元素的透明度
            $(element).css('opacity', (index + 1) / 10);
        })
    </script>
</body>

扩展：jQuery链式编程

利用jQuery获取DOM元素以后，可以对该元素对象进行一系列操作，并且所有操作可以通过点号“.”的形式连接在一起形成一句代码，这种类似“链条”的调用方式称之为链式编程。

• “$(‘#pic’).css(‘border’, ‘solid 1px#FF00030’)”代码执行后，会返回当前元素的jQuery对象，这个jQuery对象与$(‘#pic’)返回的结果相同，所以可以直接使用“.”调用attr()方法。

//没有使用链式
$('#pic').css("border",'1px solid red');
$('#pic').attr('alt','myPhoto');

//使用链式
$('#pic').css("border",'1px solid red').attr('alt','myPhoto');

<!--修改div元素下的第4个p元素的内容-->
<body>
    <div>
        <p>0</p>
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <script>
        $('div').find('p').eq(3).html('我的索引值为3的元素')
    </script>
</body>

注意：

jQuery之所以可以实现链式编程，就是因为每个函数或方法被调用后返回的都是jQuery对象，在jQuery对象上可以继续调用jQuery方法执行其他操作。但是链式编程的语句不宜过长，否则会造成代码难以阅读的问题。