jQuery
jQuery
- jQuery 是一个流行的JavaScript函数库
- jQuery经常用于DOM查询，常用动画，Ajax等常用操作
jQuery的下载
打开网站https://jquery.com/download/下载jquery
也可以打开网站https://www.bootcdn.cn/jquery/直接复制使用jQuery
jQuery函数语法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title></head><body><div class="first"><li>item1</li><li>item2</li><li>item3</li></div><hr><div class="second"><li>item1</li><li>item2</li><li>item3</li></div><hr><div class="third"><li>item</li><li>item</li><li>item</li></div><script src="lib/jquery-3.5.1.js"></script><script>// $()工厂函数// $()语法1.第一个参数为选择器，第二个参数为上下文// 原生js操作document.querySelectorAll(".first>li").forEach(function (item) {item.style.color = "lightcoral";});// jQuery操作$("li", ".second").css("color", "lightgreen");// $()语法2.参数为js原生对象var lis = document.querySelectorAll(".third>li");// js原生操作lis.forEach(function (item) {item.style.color = "lightgray";});// jQuery操作(自带循环，不用再进行foreach)$(lis).css("color", "cyan");// $()语法3.参数为html文本// js原生操作var p = document.createElement("p");p.innerHTML = "PHP中文网";document.body.appendChild(p);// jQeury操作$("<p>好好学习，天天向上</p>").appendTo(document.body);// 也可以插入到任意位置$("<p>加油，努力</p>").insertBefore(document.body);// $()语法4. 参数为回调函数，当文档加载完立即执行$(function () {$(document.body).css({"background-color": "wheat","font-size": "25px","color": "red",});});</script></body></html>
$和$()区别
// $ 和 $()的区别// 直接在函数上调用方法(静态方法)$.each($(".first>li"), function (key, vaule) {console.log("键：%s，值：", key, vaule);});// 效果和上面一样但是这个是在jQuery对象上调用方法$(".first>li").each(function (key, vaule) {console.log("键：%s，值：", key, vaule);});
对于查询结果的处理
// 对查询结果处理var lis = document.querySelectorAll(".first>li");console.log(lis);// 获取的结果不是数组，不好用foreach遍历 可以通过jQuery的toArray方法转为数组后遍历$(lis).toArray().forEach(function (item) {item.style.color = "lightcoral";});var res = $(lis).toArray().map(function (item, index) {if (index < 2) {return item.innerHTML = "好好学习";} else {return item.innerHTML = "天天向上";}});console.log(res);// index()方法返回jQuery集合中元素的索引$(".second>li").click(function () {console.log("你点击了第 %s 个元素", $(this).index() + 1);});
attr方法
// getter和setter操作var div = $(".first");// 查看属性值console.log(div.attr("name"));// 更改属性值div.attr("name", "user");console.log(div.attr("name"), div.attr("id"));// 也可以同时更改多值div.attr({"name": "possword","id": "uesrname",});console.log(div.attr("name"), div.attr("id"));// 也可以通过回调进行动态更改div.attr("name", function () {var uid = $(this).attr("id").toLowerCase();return uid === "user" ? "item" : "contain";});console.log(div.attr("name"));
总结
1.对于jQuery有了些了解
2.理解了和js原生方式上的使用区别和便利性
