jQuery 元素操作

jQuery 元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

$("div").each(function (index, domE1e) {
    console.log(index, domE1e)
})

1. each() 方法遍历匹配的每一个元素。 主要用 DOM 处理。each 每一个
2. 里面的回调函数有 2 个参数: index 是每个元素的索引号; demEle 是每个 DOM 元素对象，不是 jquery 对象
3. 所以要想使用 jquery 方法，需要给这个 dom 元素转换为 jquery 对象 $(domEle)

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

语法2

$.each(object, function (index, element) {
    console.log(index, domE1e)
})

1. $.each 方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有 2 个参数: index 是每个元素的索引号; element 遍历内容

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

演示代码

html

<div>1</div>
<div>2</div>
<div>3</div>

javascript

$(function () {
    // $("div").css("color", "red");
    // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似 for ，但是比 for 强大）
    var sum = 0

    // 1. each() 方法遍历元素
    var arr = ['red', 'green', 'blue']
    $('div').each(function (index, domEle) {
        // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
        // 回调函数第二个参数一定是 dom 元素对象 也是自己命名
        console.log('index:\t', index, domEle)

        // domEle.css("color"); dom 对象没有 css 方法
        $(domEle).css('color', arr[index])
        sum += parseInt($(domEle).text())
    })
    console.log('sum:\t', sum)

    // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
    console.log('遍历数据')
    $.each($('div'), function (i, ele) {
        console.log(i, ele)
    })

    $.each(arr, function (i, ele) {
        console.log(i, ele)
    })

    console.log('遍历对象')
    $.each({
        name: 'andy',
        age: 18,
    }, function (i, ele) {
        console.log(i, ele) // 输出的是 key value
    })
})

增删改节点

创建

$("<li></li>");

动态的创建了一个 <li>

内部添加

element.append("内容")

把内容放入匹配元素内部最后面，类似原生 appendChild.

element.prepend("内容")

把内容放入匹配元素内部最前面。

外部添加

element.after("内容") //把内容放入目标元素后面

element.before("内容") // 把内容放入目标元素前面

1、内部添加元素，生成之后，它们是父子关系。 2、外部添加元素，生成之后，他们是兄弟关系。

删除元素

element.remove() // 删除匹配的元素(本身)
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容

1、remove 删除元素本身。

2、empty() 和 html("") 作用等价，都可以删除元素里面的内容，只不过html还可以设置内容。

注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。

案例代码

html

<ul>
    <li style="color: red"> 原先的 li 1</li>
</ul>
<div class="test">我是原先的 div 1</div>

javascript

$(function () {
    // 1. 创建元素
    var li0 = $('<li>我是后来创建的 li 0</li>')
    var li2 = $('<li>我是后来创建的 li 2</li>')
    // 2. 添加元素
    // 2.1 内部添加
    $("ul").append(li0);  // 内部添加并且放到内容的最后面
    $('ul').prepend(li2) // 内部添加并且放到内容的最前面

    // 2.2 外部添加
    var div0 = $('<div>我是后妈生的 div 0</div>')
    var div2 = $('<div>我是后妈生的 div 2</div>')
    $('.test').before(div0)
    $(".test").after(div2);

    // 3. 删除元素
    // $("ul").remove();  // 可以删除匹配的元素自杀
    // $('ul').empty() // 可以删除匹配的元素里面的子节点孩子
    // $("ul").html(""); // 可以删除匹配的元素里面的子节点孩子
})