目录

一.jQuery遍历元素操作

 二.jQuery遍历对象操作

三.创建元素 

1.内部添加子元素

2.外部添加兄弟元素

四.删除元素


一.jQuery遍历元素操作

我们知道jQuery隐式迭代非常的方便,对同一类元素做出了相同的操作,如果想要给同一类元素做不同的操作的话,那么就需要用到遍历

$('element').each(function(index,$(documentElement)){xxx})

//回调函数中有俩个参数,分别为每个元素的索引号以及每个DOM元素对象
//既然是DOM元素对象,那么我们需要将它转换为jQuery对象$(documentElement)
<script>
    $(function(){
        $("ul").children("li").each(function(i,e){
            console.log(i)
            console.log($(e).html())
        })
    })
</script>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>


 二.jQuery遍历对象操作

$.each(object,function(index,element){xxx})

//可用于遍历任何对象,主要用于数据处理,比如数组、对象
//俩个参数分别代表:每个元素的索引号以及遍历内容
$(function(){
    const obj = {
        name:"小蜗",
        age:22,
        hobby:[
            "健身",
            "打代码",
            "玩游戏"
        ]
    }

    $.each(obj,function(i,e){
        console.log(`${i}:${e}`)
        console.log(i)
        console.log(e)
    })
})

 tips:如果想遍历DOM对象,使用each()合适;如果想遍历数据,使用$.each()


三.创建元素 

1.内部添加子元素

//创建
const li = $("<li>你好</li>")

//放置在指定元素子元素集最后,对标原生JS:appendChild
$("ul").append(li)

//放置在指定元素子元素集最前
$("ul").prepend(li)

2.外部添加兄弟元素

//放置在指定元素后面
$("ul").after("<ol>你好</ol>")

//放置在指定元素前面
$("ul").before("<ol>你好</ol>")

四.删除元素

//删除匹配元素本身
$("ul").remove()

//删除匹配元素集合中的所有子节点
$("ul").empty()

//清空匹配元素内容(这个有一点牵强,不过可以实现就是好功能)
$("ul").html("")