一、jQuery
1、jQuery的简介
jQuery是一个优秀的JavaScript库。使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery 最大的优势，就是特别的方便，最重要的是 jQuery 的代码兼容性非常好。
2、jQuery的引用
本地调用：<script src="./js/jquery-3.6."></script>
远程调用：<script src="/jquery-3.6."></script>
3、jQuery执行小函数
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready $(document).ready(function() {}); 可简写为：$(function(){});
| $(document).ready() |
||
| 执行时机 |
必须等待网页全部加载完毕（包括 图片等），然后再执行包裹代码 |
只需要等待网页中的DOM结构 加载完毕， 就能执行包裹的代码 |
| 执行次数 |
只能执行一次，如果第二次， 那么 第一次的执行会被覆盖 |
可以执行多次，第N次都不会被上 一次覆盖 |
4、jQuery对象和DOM对象互相转换
-
// dom对象转换为jquery
-
// $(dom对象)
-
$("#box") === $(("box"));
-
// jquery对象 转换为 dom对象
-
// jquery对象[索引]
-
// jquery对象.get(索引)
-
$("div")[1]. = "red";
-
$("div").get(0). = "red";
二、jQuery选择器
1、基本选择器
| 选择器 |
描述 |
示例 |
| #id |
根据指定的id匹配元素 |
$(“#box”)选择id=box的元素 |
| .class |
根据类匹配元素 |
$(“.box”)选择class=box的元素 |
| Element |
根据元素名匹配元素 |
$(“div”)选择所有的div元素 |
| * |
匹配所有元素 |
$(“*”)选择所有元素 |
| E1,E2,E3 |
分组匹配元素 |
$(“div,span,.box”)选择所有div，span,和class为box的元素 |
2、层次选择器
$("E+F")
$("E").next()或$("E").next("F")
往后查找，紧邻E选择器后的那一个F兄弟选择器
$("E").prev()或$("E").prev("F")
往前查找，紧邻E选择器前的那一个F兄弟选择器
$("E~F")
$("E").next()或$("E").next("F")
往后查找，紧邻E选择器后的所有的F兄弟选择器
$("E").prev()或$("E").prev("F")
往前查找，紧邻E选择器前的所有的F兄弟选择器
$("E:eq(索引)")=$("E").eq(索引)
3、过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号(:)开头
-
$(document).ready(function () {
-
$("ul li:first").css("color", "red");//文档里的第一个li元素 唯一
-
$("ul li").first().css("color", "blue");
-
$("ul li:last").css("color", "red");
-
$("ul li").last().css("font-size", "30px");
-
$("li:odd").css("background-color", "red"); //文档里[索引为奇数]li
-
$("li:eq(0)").css("color", "red");
-
$("li").eq(0).css("color", "red");
-
$("li:lt(3)").css("color", "green");//索引小于3的li
-
$("li:gt(3)").css("color", "green"); //索引大于3的li
-
-
$("ul li:first-child").css("color", "red");//每一组里的第一个li子元素 可能是多个
-
$("ul li:last-child").css("color", "red");
-
$("ul li:nth-child(odd)").css("background-color", "red"); //每一组里[第奇数]个li
-
-
$("input[id=user]").val(111);
-
-
});
-
-
// get() 与 eq() 区别
-
// 都是jquery对象调用 jquery对象.get(索引) jquery对象.eq(索引)
-
-
// 不同点：
-
// jquery对象.get(索引) dom对象
-
// jquery对象.eq(索引) jquery对象
| 选择器 |
描述 |
示例 |
| :first |
选择第1个元素 |
$(“ul li:first”)选择第1个div元素 |
| :last |
选择最后1个元素 |
$(“ul li:last”)选择最后1个div元素 |
| :even |
选择索引是偶数的所有元素，索引从0开始 |
$(“li:even”)选择表格中所有偶数的行 |
| :odd |
选择索引是奇数的所有元素，索引从0开始 |
$(“li:odd”)选择表格中所有奇数的行 |
| :eq(index) |
选择索引值是index的元素，index从0开始 |
$(“li:eq(1)”)选择表格行索引等于1的行 |
| :gt(index) |
选择索引值大于index的元素,index从0开始 |
$(“li:gt(1) ”)选择表格行索引大于1的行 |
| :lt(index) |
选择索引值小于index的元素,index从0开始 |
$(“li:lt(1)”)选择表格行索引小于1的行 |
| [attribute=value] | 选择属性值为value的元素 | $(“div[id=test]”)选择id属性值为test的div元素 |
| :input | 匹配所有<input> <textarea> <select> <button>元素 |
$(“:input”)匹配所有<input> <textarea> <select> <button>元素 |
jquery对象.siblings() 选择除了自身之外的其他jquery兄弟对象
三、操作
1、特殊符号
“.”、”#”、”(“、”]”
$(“#id#b”)和$(“#id[1]”)程序就会出错
正确的写法：使用转义符\\将特殊符号转义 $(“#id\\#b”) $(“#id\\[1\\]”)
2、设置和获取
获取：
jquery对象.text() / jquery对象.html() / jquery对象.val()
如果jquery对象是多个时，jquery对象.html() / jquery对象.val()获取时，
获取的是第一个jquery对象里的内容
jquery对象如果是多个的，jquery对象.text()获取时，
获取多个jquery对象里的内容
设置：
jquery对象.text(内容) / jquery对象.html(内容) / jquery对象.val(内容)
3、增删事件
jquery对象.bind("事件名1 事件名2 ...", function () {});
jquery对象.bind({ 事件名1: function () {}, 事件名1: function () {} });
-
$("button").bind("mouseover mouseout", function (ev) {});
-
$("button").bind("click", function () {});
4、样式和类
jquery对象.css("属性名") 通过样式属性名获取属性值
设置一条样式 jquery对象.css("属性名","属性值")
设置多条样式 jquery对象.css({"属性名":"属性值","属性名":"属性值",...})增加类 可增加/删除多个类
.addClass(“类名1 类名2 ……”) 多个类名之间用空格隔开
.removeClass(“”)
.toggleClass(“”) .toggleClass(“类名”,true/false) 用来判断样式类添加还是移除的 布尔值
-
$(".box").addClass("bg"); //添加类
-
$(".box").removeClass("bg box"); //删除类
-
$(".box").removeClass(); //清空
-
$(".box").toggleClass("fz box");
-
$(".box").toggleClass(); //removeClass()
-
$(".box").toggleClass("bg", false);//removeClass()
-
$(".box").toggleClass("fz", true); //addClass()