学习总结
- jquery是javascript的一个函数库
- jquery可以简化代码量，尽可能少的代码做多的事情
- 使用最新的jquery库，最新的chrome浏览器引用jquery时，会报错，不知道原因，使用火狐和ie正常
1 index.html
<!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>
2.代码运行效果
3.使用chrome引用jquery库是报错
