JQuery初识
JQuery初识
1.JQuery介绍
1.1JQuery是什么
- 是原生js封装的一个库，里面有很多方法 事件处理 动画方法等等
- JQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
1.2JQuery的网站
- 官网：https://jquery.com/
- 中文官网：https://www.jquery123.com/
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>
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
