![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：jquery的对象快速迭代处理效率非常高
Collection
Collection
jQuery 是一个 JavaScript 的函数库。jQuery 经常用于 DOM 查询, 常用动画, Ajax 等常用操作。
我们可以通过以下这种方式加载 CDN jQuery 核心文件。
<head><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script></head>
$(selector).action()//英文版$(选择器).操作();//中文版
美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action() 执行对元素的操作
所谓工厂函数，顾名思义，就好比一个工厂一样，可以批量制造某种类型的东西，通过该方法可大批量的创建对象。
例如,我们可以用工厂函数来批量创建学生信息：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>什么是工厂函数</title></head><body><script>function student(name, sex) {var obj = new Object();obj.name = name;obj.sex = sex;obj.saysex = function () {alert("我的性别是${this.sex}");};return obj;}var no1 = student("王小丁", "男");console.log(no1.name);// no1.saysex();var no2 = student("李晓静", "女");console.log(no2.name);// no2.saysex();var no3 = student("周一楠", "男");console.log(no3.name);// no3.saysex();var no4 = student("汪玉敏", "女");console.log(no4.name);// no4.saysex();var no5 = student("刘焕文", "男");console.log(no5.name);// no5.saysex();</script></body></html>
通过 jQuery工厂函数，我们可以选取查询 HTML 元素，并对它们执行“操作”（actions）。
1.$(选择器，上下文):返回jQuery对象2.$(js对象):返回一个jQuery对象,将js对象包装成jQuery对象3.$(html文本):将html文本包装成一个jQuery对象并返回4.$(callback):当html文档结构加载完成后就会立即执行这个回调函数
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- CDN 方式加载jquery --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><title>jquery工厂函数的功能</title></head><body><ul id="first"><li>item1</li><li>item2</li><li>item3</li></ul><ul id="second"><li>item1</li><li>item2</li><li>item3</li></ul><h1 id="01">获取父级HTML元素</h1><h2 id="02">我们一起去郊游吧！</h2><h3 id="03">你们开心吗？</h3><h4 id="04">他们在干什么呢？</h4><p id="demo"></p></body><script>//$():工厂函数是自动循环的//$():工厂函数的功能// 1.$(选择器，上下文):返回jQuery对象//javascrip原生操作document.querySelectorAll("li").forEach(function (item) {item.style.color = "red";});//jQuery操作$("li").css("color", "green");// $("li", "#first").css("color", "blue");不要用$("#first li").css("color", "skyblue");// 2.$(js对象),返回一个jQuery对象,将js对象包装成jQuery对象var lis = document.querySelectorAll("#second li");lis.forEach(function (item) {item.style.backgroundColor = "yellow";});//lis === jQuery对象$(lis).css("background-color", "cyan");// 3.$(html文本),将html文本包装成一个jQuery对象并返回//html文本：hello不是html文本，<p>hello</p>带标签的才是html文本$("<h3>Laravel开发者</h3>").insertAfter("#second");// 4.$(callback):当html文档结构加载完成后就会立即执行这个回调$(function () {//$(document.body).css( "font-size", "18px").css("background-color", "wheat");链式写法//可以简写为下面这种方式$(document.body).css({"font-size": "18px","background-color": "wheat",});});$(document).ready(function () {var myParent = $("#02").parent();$("#demo").text(myParent.prop("nodeName"));});$("<h3>Laravel开发</h3>").insertBefore("#01");</script></html>
输出效果：
查询就是筛选的意思，根据某个字或词语，在数据库中进行有条件的查询，然后将查询到的结果集返回给客户端，这样在客户端上就可以将查询到的结果以各种方式呈现出来。
toArray():将查询结果转为真正的数组.$.each():回调的参数顺序与forEach不一样.$.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反.index():返回jQuery查询集合中的索引.
代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><title>jQuery查询结果的处理方式</title></head><body><ul><li>item1</li><li>item2</li><li>itme3</li><li>item4</li><li>item5</li></ul><script>// 1.toArray():将查询结果转为真正的数组var lis = $("ul > li");console.log(lis);console.log(lis.get(3));for (var i = 0; i < lis.length; i++) {//原生方式lis.get(i).style.color = "red";}lis.toArray().forEach(function (item, index) {if (index >= 2) console.log("元素" + index + ":" + item);});// 2. $.each(): 回调的参数顺序与forEach不一样,$().each((callback))lis.each(function (index, value) {//原生方式this.style.color = "green";//jQuery方式$(this).css("color", "blue");});// 3.$.map():必须要有返回值,回调参数的参数和$.each()的回调参数的参数完全相反var arr = $.map(lis, function (value, index) {if (index % 2) return value;});console.log(arr);console.log($(arr));$(arr).css("color", "red");// 4.index():返回jQuery查询集合中的索引// jQuery对象是一个类数组，具有从0开始递增的正整数索引，并有一个length属性console.log(lis);lis.click(function () {console.log("点击了第：", $(this).index() + 1, "个<li>");});</script></body></html>
输出效果：
1.jQuery可以极大地简化 JavaScript 编程。
2.jQuery可以更快速获取文档元素。
3.jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页。
4.jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像。
5.jQuery简化了原本使用JavaScript代码需要处理的方式。