jQuery初学习之dom操作

jQuery初学习

使用JQuery前必须先引入库

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1. dom操作

html

<ul id="one">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>
<ul id="two">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

html图

1.1 添加元素

1.1.1 append（与html()功能一样）：父元素.append(子元素)

$("body").append("<h2>hello~</h2>");

1.1.1 图

// >后面可以使用函数
$("body").append("<ol></ol>");
    $("ol").append(()=>{
        let str="";
        for(let i=1;i<5;i++){
            str+="<li>"+ "这是第"+ i +"个新的商品" + "</li>";
    }
    return str;
});

图

---

1.1.2 appendTo:子元素.appendTo(父元素)

$("<h1>Title</h1>").appendTo($("body"));

1.1.2 图

---

1.1.2 appendTo:子元素.appendTo(父元素)

$("<h1>Title</h1>").appendTo($("body"));

1.2 filter():过滤器

console.log($("ul").filter("#one"));//获取id为one的ul
console.log($("ul").filter("#one").children());//获取id为one的ul的所以子元素
console.log(document.querySelector("#one").children);//原生写法
// 获取第一个元素
console.log($("ul").filter("#one").children().first().text());//item1 jq写法
console.log(document.querySelector("#one").firstElementChild.textContent);//item1 原生写法
//获取最后一个元素
console.log($("ul").filter("#one").children().last().text());//item3 jq写法
console.log(document.querySelector("#one").lastElementChild.textContent);//item3 原生写法
//获取第n个元素
console.log($("ul").filter("#one").children().eq(1).text());//item2 jq写法
console.log(document.querySelector("#one").children.item(1).textContent);//item2 原生写法
console.log(document.querySelector("#one").children[1].textContent);//item2 原生写法

1.3 find():获取所有层级的元素；children()：获取子元素集合