1.JQuery介绍
1.1JQuery是什么
-
是原生js封装的一个库,里面有很多方法 事件处理 动画方法等等
-
JQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
1.2JQuery的网站
-
官网:jQuery
1.3引入JQuery
-
在线引入 (不推荐)
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
-
本地引入
-
将文件存到本地直接引入即可
<script src="./jquery3.6.1.js"></script>
-
==注意:中文官网找JQuery CSDN选项即可 官网找Download选项即可==
1.4$变量名覆盖问题
<script> console.log(jQuery) var $ = 40; console.log($);// 全局变量中$ 40 //解决方法:使用自执行函数 自执行函数中$是Jquery (function ($) { console.log($);//局部变量$就指向jquery })(jQuery) //JQuery变量也是指的Jquery库 </script>
1.5ready的作用
-
语法:$(document).ready(function(){})
-
简写1:$().ready(function(){})
-
简写2:$(function(){})
// 2.$(document).ready(function(){ }) 先加载文档标签再加载ready函数中的js代码 重写不会被覆盖 $(document).ready(function () { console.log($("div")); console.log(1); }) // 3.简写1:$().ready(function(){}) $().ready(function () { console.log($("div")); console.log(2); }) // 4.简写2:$(function(){}) $(function () { console.log($("div")); console.log(3); })
-
==window.onload和ready的区别==
-
onload: 原生js方法 先加载标签和资源 在加载window.onload中的js代码 重写会覆盖
-
ready:先加载文档标签再加载ready函数中的js代码 重写不会被覆盖
-
1.6JQuery对象和DOM对象
==注意:Jquery方法获取的标签不能使用原生Js的方法,同理:DOM对象获取的标签不能使用Jquery的方法==
<script> // 1.DOM方法获取标签-------DOM对象 var oDiv = document.getElementsByTagName("div"); console.log(oDiv);//HTMLCollection [div] //DOM对象的形式设置样式 oDiv[0].style.backgroundColor = "red"; // 2.Jquery方法获取标签------Jquery对象 var oBox = $("div"); console.log(oBox); //JQuery.fn.init[div, prevObject: jQuery.fn.init(1)] // Jquery对象的形式设置样式 oBox.css("backgroundColor", "green"); // 问题 不能混用 如果使用Jquery获取的标签 不要用style的方法 // oDiv[0].css("color", "pink"); // oBox.style.width = "200px"; // 3.Jquery对象和DOM对象相互转换 //转Jquery对象 $(标签) console.log($(oDiv[0])); //转DOM对象 $('选择器')[下标] console.log($("div")[0])
2.选择器
2.1 基础选择器
<script> /* 基础选择器: $("选择器") 选择器:id名 类名 标签名 通配符* */ console.log($("li")); console.log($("#wrap")); console.log($(".box")); console.log($("*")) </script>
2.2 层次选择器
-
后代选择器:父元素 子元素
-
子代选择器:父元素>子代元素
-
相邻选择器:选择器1+选择器2
-
兄弟选择器:选择器~选择器2
<script> /* $("选择器") 后代选择器 父元素 子元素 子代选择器 父元素>子元素 相邻选择器 选择器1+选择器2 获取的是选择器1后相邻的元素 兄弟选择器 选择器1~选择器2 */ console.log($("ul li")); console.log($(".father li")); console.log($("li span")); console.log($("li>span")); console.log($(".box+li")); console.log($(".box~li")); </script>
2.3基础过滤选择器
-
元素:first 当前元素列表的第一个
-
元素:last 当前元素列表的最后一个
-
元素:gt 获取大于指定下标的元素
-
元素:lt 获取小于指定下标的元素
-
元素:eq 获取指定下标的元素
-
元素:even 获取下标是偶数的元素
-
元素:odd 获取下标是奇数的元素
/* $("选择器") 选择器:获取当前元素列表中的 元素:first 当前元素列表的第一个 元素:last 当前元素列表的最后一个 元素:eq(n) 获取当前元素列表中下标为n的元素 元素:lt(n) 下标小于n的元素 元素:gt(n) 下标大于n的元素 元素:even 获取下标是偶数的元素 元素:odd 获取下标是奇数数的元素 */ console.log($("li:first")) console.log($("li:last")) console.log($("li:eq(2)")) console.log($("li:lt(2)")) console.log($("li:gt(2)")) console.log($("li:even")) console.log($("li:odd"))
-
first-child 获取当前父元素下的第一个孩子
-
last-child 获取当前父元素下的最后一个孩子
-
nth-child 获取当前父元素下的第n个孩子
/* $("选择器") 选择器:获取父元素下的子元素 first-child:获取当前父元素下的第一个孩子 last-child:获取当前父元素下的最后一个孩子 nth-child(n):获取当前父元素下的第n个孩子 */ console.log($("ul li:first-child")) console.log($("ul li:last-child")) console.log($("ul li:nth-child(2)"))
2.4属性选择器
-
E[attr]:匹配有attr属性的E标签
-
E[attr=value]:匹配有attr属性并且值位value的E标签
-
E[attr!=value]:匹配有attr属性并且值不为value的E标签
-
E[attr^=value]:匹配有attr属性并且值以value开头的E标签
-
E[attr$=value]:匹配有attr属性并且值以value结尾的E标签
-
E[attr*=value]:匹配有attr属性并且值包含value的E标签
console.log($("li[class]")); console.log($("li[class='box1 box2']")); console.log($("li[class='lisi']")); console.log($("li[class!='lisi']")); console.log($("li[class^='z']")); console.log($("li[class$='u']")); console.log($("li[class*='box1']"));
2.5表单选择器
-
$(":input") 获取form中所有的表单元素
-
$(":type类型") 获取该type值的表单元素
-
$(":属性") 获取拥有该属性的表单元素
<script> // $(":input") 获取form中所有的表单元素 console.log($(":input")); // $(":type类型") 获取该type值的表单元素 console.log($(":radio")) console.log($(":checkbox")) // console.log($(":date"));//报错 console.log($("textarea")) // $(":属性") 获取拥有该属性的表单元素 console.log($(":checked")) // 获取含有checked属性的checkbox表单元素 console.log($(":checkbox:checked")) </script>
3.JQuery方法的特性
<script> // Jquery方法中的特性 // 特性1:jquery取赋值一体化 console.log($("li").css("font-size")) $("li").css("font-size", "50px"); // 特性2:隐式迭代 $("li").click(function () { console.log(this) }) // 特性3:链式操作 $("li").css("color", "red").css("background-color", "pink") // 特性4:jquery的方法只能jquery对象使用 var oDiv = document.getElementsByTagName("div"); $(oDiv[0]).click(function () { }) </script>
4.查找节点
4.1获取节点
// 1.获取子元素 // $(选择器).children 直接子元素 console.log($("ul").children());//获取ul下所有的直接子元素 console.log($("ul").children("div"))//获取ul下所有div子元素 // 2.获取父元素 console.log($(".box").parent());//直接父元素 console.log($(".box").parents());//获取所有的父元素 到html console.log($(".box").parents("body"));//获取父元素body标签 // 3.参考元素.prev 紧跟着参考元素的上一个 console.log($(".box").prev()) //4.参考元素.prevAll() 参考元素的前面的所有兄弟元素 console.log($(".box").prevAll()) console.log($(".box").prevAll("li")) // 5.参考元素.next() 紧跟着参考元素的下一个 console.log($(".box").next()) // 6.参考元素.nextAll() 参考元素的后面的所有兄弟节点 console.log($(".box").nextAll()) console.log($(".box").nextAll("div")) // 7.参考元素.siblings 获取参考元素的所有兄弟节点 console.log($(".box").siblings()) // 8.元素.eq(下标) 获取当前元素列表中指定下标的元素 console.log($("li:eq(3)")) console.log($("li").eq(3))
4.2过滤节点
<script> // 元素.first() 元素.last() 获取当前元素列表中的第一个或者最后一个 console.log($("li").first()) console.log($("li").last()) </script>