![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：querySelector()/querySelectorAll(), 不论是在哪调用, 都是在整个document范围内搜索, 请始终在document上调用
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>JQery基础知识</title><script src="js/jquery-3.5.1.js"></script><link rel="stylesheet" href="index.css" /></head><body><ul><li>item1-1</li><li>item1-2</li><li>item1-3</li><li>item1-4</li><li>item1-5</li><li>item1-6</li></ul><ul><li>item2-1</li><li>item2-2</li><li>item2-3</li><li>item2-4</li><li>item2-5</li><li>item2-6</li></ul></body><script>// 1.通过$()工厂函数选择标签元素$("ul:first-of-type>li:last-of-type").css("color", "red");//2.通过$(js对象)可以把一个js对象包装成一个jquery对象，进而使用jquery中的方法和属性var li = document.querySelector("ul:first-of-type>li:first-of-type");$(li).css("color", "green");//3.可以把一段html代码包装为一个jquery对象，进而使用jquery中的方法和属性$("<h2>jquery基础知识</h2>").insertBefore("ul:first-of-type");//4.$(回调函数) 当html文档加载完毕后，就会调用这个回调函数$(function () {$("ul:last-of-type>li:first-of-type").css({"background-color": "lightblue","font-size": "26px",});});// ----------------------------------------------------------//jquery处理查询结果;var lis = $("ul:last-of-type>li:nth-last-of-type(-n+2)");//1.可以用toArray()方法把一个jquery对象转换为一个普通数组,然后进行操作lis.toArray().forEach(function (li, index) {li.innerText = "更改item的值";});//2.可以用each()方法直接遍历jquery对象lis.each(function (index, li) {//但是遍历出来的数据是一个原生的js对象li.style.color = "lightgreen";});lis = $("ul:first-of-type>li");//3.用map()方法遍历jquery对象,返回值也是一个jquery对象lisJs = lis.map(function (index, li) {//遍历出来的数据是js对象li.style.backgroundColor = "lightblue";if (index % 2) return li; //把索引值是奇数的li返回});console.log(lisJs);lisJs.css("background-color", "lightgreen");//4.index()方法返回jquery对象的索引值lis.click(function () {console.log("当前点击的是第" + ($(this).index() + 1) + "个li");});</script></html>
天蓬老师