主要内容：
- jQuery基础
- 三种引入方式
- 四个主要的$()函数：$(选择器, 上下文)、 $(js原生对象)、$(html文本)、$(callback)
- 查询结果处理：toArray()、map()、index()jQuery类对象
1. jQuery基础
1-1. jQuery 是什么
- jQuery 是一个非常流行的 JavaScript 函数库。被用来调和不同浏览器的适配性。目前还有50%网站用jQuery。
- jQuery 经常用于 DOM 查询, 常用动画, Ajax 等常用操作
- jQuery 宗旨: 写得更少,而做得更多
- 现在很多动画等css3也都可以实现；很多浏览器也都支持fetch、axios、promise这些新东西，Ajax也可以被非常容易地实现了。因此jQuery用得越来越少。
1-2. 引入 jQuery
- 官网下载。下载了后直接放到对应的目录下即可，优点像echart.js，只不过应用场景不一样。
- npm:
npm install jquery - cdn: https://www.bootcdn.cn/jquery/。这种方式下相当于一种网络调用。不用下载。
- npm下载的话，需要先下载node.js。
- npm相当于js中的composer。安装了后就可以下载安装各种组件。
1-3. 引入示例
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>Hello 大家晚上吃饱了吗?</h1> <!-- ① 通过下载方式引入jquery --> <!-- <script src="lib/jquery-3.5.1.js"></script> --> <!-- ② 引入通过npm加载的jQuery --> <!-- <script src="node_modules/jquery/dist/jquery.min.js"></script> --> <!-- ③ 网络方式引入 --> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> --> <!-- https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js --> <script> // 可以简化js代码，直接简洁。 $("h1").css("color", "red"); // document.querySelector("h1").style.color = "green"; </script> </body></html>
2. jQuery重要术语
<!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 src="lib/jquery-3.5.1.js"></script> <script> // 1. jQuery函数 // $跟jQuery是等同的。只不过在一些不方便用$的地方，可以用jQuery。 $(document.body).css("background", "wheat"); jQuery(document.body).css("background", "yellow"); document.body.style.backgroundColor = "lightgreen"; // 2.jQuery对象 // console.log($("*")); //* 代表所有元素 // console.log($("*").length); // $()=>jQuery对象。在这个对象上使用[...]可将内部的jQuery对象转为原生js对象 // console.log($("*")[5]); // <body> // $("*")[5] === $("*").get(5) $("*")[5].style.backgroundColor = "lightblue"; $("*").get(5).style.backgroundColor = "lightcoral"; // console.log($("*")[5] === $("*").get(5)); // 3. jQuery中静态方法 // $:函数, 函数对象 // $(): jQuery对象 // $.each($("*"), function (key, value) { // console.log(key, value); // }); // each()此时就不是静态方法了,为什么,它在对象上调用 $("*").each(function (key, value) { console.log(key, value); }); </script> </body></html>
2. $()函数
$(选择器, 上下文)$(js对象)$(html文本)$(callback)- 详解函数
<!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> <div id="first"> <li>item1</li> <li>item2</li> <li>item3</li> </div> <hr /> <div id="second"> <li>item1</li> <li>item2</li> <li>item3</li> </div> <script src="lib/jquery-3.5.1.js"></script> <script> // $(): 工厂函数, jquery(), $ ---> jQuery // 语法: $( selector, context ), $(选择器, 上下文) // 1. $(选择器, 上下文) // 原生 document.querySelectorAll("li").forEach(function (item) { item.style.color = "red"; }); // jquery // $("li").css("color", "green"); // $()的第二参数, 上下文，例如只更新第一组列表的颜色 $("li", "#first").css("color", "green"); $("li", "#second").css("color", "blue"); // 2. $(js原生对象) // 将js对象包装成一个jquery对象,从而可以直接调用jQuery中的方法 var lis = document.querySelectorAll("#second li"); console.log(lis); lis.forEach(function (item) { item.style.background = "yellow"; }); // 想使用jQuery中的css()方法,必须将lis包装/转换成一个jQuery对象 console.log($(lis)); $(lis).css("background-color", "cyan"); // 3. $(html文本) // var h2 = document.createElement("h2"); // h2.innerText = "Hello World"; // document.body.appendChild(h2); $("<h2>Hello World</h2>").insertBefore("#first"); // 4. $(callback): 当html文档加载完成之后立即调用这个函数 $(function () { $(document.body).css({ background: "wheat", "font-size": "20px", }); }); </script> </body></html>
3. 查询结果的处理
<!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> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <script src="lib/jquery-3.5.1.js"></script> <script> //1.toArray(): 将结果转为真正数组 // console.log(document.getElementsByTagName("li")); // document.getElementsByTagName("li").forEach(function (item) { // //... // }); // 因为不是一个数组，上面的forEach就会报错。需要下面转化下，然后才可以。 var lis = $(document.getElementsByTagName("li")).toArray(); // var lis = Array.from(document.getElementsByTagName("li")); //这种方式也可以 // console.log(lis); lis.forEach(function (item) { item.style.color = "red"; }); // 2. map(): 有返回值（map这块原生和通过jQuery封装的区别已经不大了） var arr = [1, 2, 3, 4]; var res = arr.map(function (item) { return item * 2; }); // console.log(res); var res2 = $.map(arr, function (item) { return item * 2; }); // console.log(res2); // 3. index(): 返回jQuery集合中的元素的索引 // jqueryc对象是一个类数组:具有从0开始的递增的正整数索引,并且还有一个length属性 var obj = { "0": "a", "1": "b", "2": "c", "3": "d", length: 4, }; // obj 满足类数组特征,所以它就是一个类数组(类似一个数组) // console.log($("li")); // jquery中的集合自带循环的,这里是给集合中每个li添加点击事件 $("li").click(function () { // console.log($(this).index() + 1); console.log("点击了第 %s 个元素", $(this).index() + 1); }); </script> </body></html>
4. 作业（操练了下，挺好的一个方向，不知道还有其他那些牛的玩法）
- $()四种应用场景
- $与$()的区别 ,实例演示
- attr()的常用操作,实例演示
