![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：注意, 10日前完成, 三阶段可正常提交
Collection
Collection
CDN方式引用, 即内容分发方式
BootCDN或者又拍云的CDN的速度都可以
<!-- CDN方式引用 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script scr="jquery-3.5.1.min.js"></script>
$(selector).operator() , 即: $(选择器).操作函数() .类似给 console.log 函数起别名 cl , $ 是 jquery 函数的一个别名.
工厂函数$()的四大功能
- `$(选择器)` 的返回值是**jQuery对象**.
$(HTML元素对象) : 把HTML元素对象封装成jQuery对象, 然后就能调用jQuery对象提供的方便的方法进行操作.$(htmlStr) : 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象.$(回调函数) : 当HTML文档结构加载完成后, 会自动加载这个回调函数.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery工厂函数$()的四大功能</title><!-- 引入本地jQuery文件 --><script src="jquery-3.5.1.min.js"></script></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></body><script>// jQuery工厂函数的四大功能// 1. 选择器功能/* 把第一个列表的字体颜色变成橙色 *//* 使用JS原生操作 */document.querySelectorAll('#first > li').forEach(function(ele) {ele.style.color = 'orange';});/* 使用jQuery实现 */$('#first > li').css('color', 'orange');// 2. 创建jQuery对象/* 把第二个列表的第二个列表项的背景色设置为黄色 *//* 用js原生操作获取第二个列表的第二个li元素 */var li2 = document.querySelector('#second > li:nth-of-type(2)');/* 把li元素封装成jQuery对象, 再调用css()方法设置背景色 */$(li2).css('background-color', 'yellow');// 3. 把带有HTML标签的文本解析成html元素对象, 再将其封装成jQuery对象./* 把htmlStr字符串解析成HTML元素对象, 并在浏览器中显示 */var htmlStr = '<span>hello jQuery!</span>';$(htmlStr).css('color', 'red').appendTo($('body'));// 4. $(回调函数): 当HTML文档结构加载完成后, 会自动加载这个回调函数./* 弹出"页面加载完毕"的提示框 */$(function() {alert('页面加载完毕');});</script></html>
jQuery对象可以封装1个或多个js对象, 包括但不限于HTML元素对象.
可以使用类似访问数组元素的方式访问jQuery对象封装的元素. 如: $('div')[0] .
也可以调用jQuery对象的get()方法来获取其封装的元素: $('div').get(1) .
有 length 属性, 值是jQuery对象封装的元素个数.
jQuery对象提供了很多方便操作HTML元素的各种属性的方法.
jQuery对象没有 forEach() 方法, 但提供了 $.each() 静态方法遍历其中的元素.
$.each() 方法的使用方法:
$.each(jQuery对象, function(当前元素索引, 当前元素) {// do something...});
$.each() 也可以当做非静态方法调用:
jQuery对象.each(function(当前元素索引, 当前元素) {// do something...});
toArray() 方法, 可以将其封装的所有元素转换成真正的js对象数组, 然后就能使用 forEach() 方法遍历其元素了.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery对象</title><!-- CDN方式引用, 即内容分发方式 --><!-- BootCDN或者又拍云的CDN的速度都可以 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><!-- 本地引用 --></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></body><script>// console.log函数起别名var cl = console.log.bind(console);// 封装所有元素的jQuery对象var $all = $('*');cl($all);// length属性返回封装的元素个数cl($all.length);// 获取封装的元素/* 方法1: 类似数组的array[index]方式 */cl($all[0]);/* 方法2: 调用get(index)方法 */cl($all.get(1));// 调用toArray()方法转成js数组cl($all.toArray());// 遍历封装的元素/* 方法1: $.each()静态方法: */$.each($all, function(index, ele) {cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);})/* 方法2: 动态调用$.each()方法: */$all.each(function(index, ele) {cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);});/* 方法3: 用toArray()方法转成js数组, 然后用forEach遍历 */$all.toArray().forEach(function(ele, index) {cl('第' + (index + 1) + '个元素是: ' + ele.nodeName);});</script></html>
toArray() 方法转成js数组来处理查询结果中的对象.$.each() / $(selector).each() 来处理查询结果中的对象.$.map(jQuery查询结果, function(当前元素, 当前元素索引) {...}) 来遍历jQuery查询结果, 并使用传入的回调函数处理遍历的每个对象, 将回调函数处理后返回的对象组成数组.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jq查询结果的处理</title><!-- CDN方式引用, 即内容分发方式 --><!-- BootCDN或者又拍云的CDN的速度都可以 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><!-- 本地引用 --></head><body><ul id="first"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>var cl = console.log.bind(console);// 1. 使用 `toArray()` 方法转成js数组来处理查询结果中的对象./* 见上一节实例, 略 */// 2. 使用 `$.each()` / `$(selector).each()` 来处理查询结果中的对象./* 见上一节实例, 略 */// 3. 使用$.map()遍历并处理jQuery查询结果var $lis = $('li');/* 返回偶数索引的元素 */var array = $.map(lis, function(ele, index) {if (index % 2 == 0) {return ele;}});/* 背景色改成橙色 */$(array).css('background-color', 'orange');// 4. 为jQuery查询结果绑定事件处理脚本.lis.click(function(event) {// index()使用方式1:// cl('点击了第' + (lis.index(event.target) + 1) + "个元素");// index()使用方式2:cl('点击了第' + (event.target.index() + 1) + "个元素");});</script></body></html>
jQuery是JS的一个类库, 是为了简化JS操作出现的. jQuery能做的, JS都能做.
jQuery的特点: 写得少, 做得多.
jQuery的方法基本都是自动循环的, 所以jQuery很少循环.
一个奇怪的情况, 如果以CDN的方式引入jQuery, cl($('*')) 显示的是 jQuery.fn.init[...] , 即, $(selector)的返回结果是jQuery对象; 而如果引入本地的jQuery文件, 上述表达式显示的结果是 S.fn.init[...] . 这两者有什么区别?