jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。库就类似于是Python中的模块,简称为jq,就是js、css等的封装版本。
前端最大的问题就是兼容性问题,需要兼容各个浏览器,使用jQuery就不用担心兼容问题,其内部已经做好了。
它的宗旨就是:“Write less, do more.“
jQuery的优势
1. 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
jQuery内容
1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax
jQuery的使用:
官方网站:https://jquery.com/
中文文档:https://jquery.cuishifeng.cn/
jQuery版本
● 1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
● 2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
https://www.bootcdn.cn/------>下载jquery、bootstrap、vue等文件
使用方式:
1. 直接引入外链的js库
2. 把jQuery文件直接下载到本地,通过本地引入, 推荐该方式
CDN: 加快我们的加载文件的速度
jQuery对象
1. jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。如果一个对象是jQuery对象,那么它就使用jQuery提供的很多方法。
2. 标签对象
标签对象:直接就是通过各种选择器得到的标签,标签对象不能直接使用jQuery库提供的很多方法。
eg:
$("#i1").html(); // 拿到id为i1的文本内容,$的含义:$ 就相当于jQuery jQuery("#i1").html(); // 和上面代码意思一样,jQuery === $
以后的代码里都使用$符号代替jQuery
jQuery基础语法
jQuery("selector").action();
$("selector").action();
jQuery的学习步骤:
1. 先学会如何查找标签
2. 找到标签之后再做相对于的操作
基本选择器
jQuery对象和标签对象之间的相互转换:
jQuery对象转为标签对象----------------->直接通过索引取值得到标签对象标签对象转为jQuery对象----------------->$(document.getElementById('d1')) --->使用jQuery把DOM抱起来--------------->就可以使用jQuery提供的方法了
id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1" class="c1"></div> <script> // 在Js中通id查询 // var div = document.getElementById('d1'); //结果:<div id="d1" class="c1"></div>标签 // 当加上$,div就变成了jQuery对象 var div = $(document.getElementById('d1')); console.log(div); //jq中的id选择器查询: var div1 = $("#d1"); //拿到的是一个jQuery对象,可以通过索引取值(结果如图1) console.log(div1); </script> </body> </html>
结果:
图1:
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1" class="c1"></div> <script> // 标签选择器 var div = $('div'); console.log(div); </script> </body> </html>
结果:
class选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1" class="c1"></div> <script> // class选择器 var div = document.getElementsByClassName('c1')[0]; // 在Js中 console.log(div); var div1 = $('.c1'); // jQuery对象 console.log(div1); </script> </body> </html>
结果:
配合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1" class="c1"></div> <script> //配合使用 var div = $("div#d1");// 找到d1 id类的div标签 console.log(div); var div1 = $("div.c1");// 找到有c1 class类的div标签 console.log(div1); </script> </body> </html>
结果:
通用选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1" class="c1"></div> <script> // 通用选择器 var div = $("*"); //查询所有的选择器 console.log(div); </script> </body> </html>
结果:
组合选择器
$('#d1,.c1,p') :并列+混用
$('div span'):后代
$('div>span'):儿子
$('div+span') : 毗邻
$('div~span') :弟弟
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div id="d1">div <span>div>span</span> <p> <span></span> </p> </div> <span class="c1">span</span> <p>pppp</p> <script> var res = $("#d1, .c1, p").css('color', 'red'); // 并列+混用 console.log(res); var res1 = $("div span").css('color', 'green'); // div的后代 </script> </body> </html>
结果如图:
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素,从 0 开始计数 :odd // 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
:first // 第一个
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li class="c1">5</li> </ul> <script> $("ul li:first").css('color','hotpink'); // 第一个 </script> </body> </html>
结果:
:last // 最后一个
$("ul li:last").css('color','hotpink');
:eq(index) // 索引等于index的那个元素
$("ul li:eq(4)").css('color','hotpink');
结果:
:even // 匹配所有索引值为偶数的元素,从 0 开始计数(:odd,匹配所以索引值为奇数的元素,从0开始)
$("ul li:even").css('color','hotpink');
结果:
:gt(index) // 匹配所有大于给定索引值的元素 # gt ---> greater than(:lt(index),与之相反,lt----> less than)
$("ul li:gt(1)").css('color','hotpink');
结果:
:not(元素选择器) // 移除所有满足not条件的标签
$("ul li:not('.c1')").css('color', 'hotpink');
结果:
属性选择器:
[attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于
eg:
<input type="text"> <input type="password"> <input type="checkbox"> $("input[type='checkbox']");// 取到checkbox类型的input标签 $("input[type!='text']");// 取到类型不是text的input标签
结果:
表单筛选器:
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性:
:enabled 可用的
:disabled 不可用的
:checked 被选中的
:selected 下拉框
eg:找到input标签
<input type="text"> <input type="password"> <input type="checkbox"> <input name="id" /> console.log($("input[type='checkbox']"));//找到所有的checkbox,相当于:$(":checkbox") console.log($($(':password') )); console.log($(":text"));
结果:
eg2:找到被选中的option
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女 <script> console.log($(":checked")) //它会将checked和selected都拿到 console.log($(":selected")); // 找到所有被选中的option console.log($("input:checked")); //自己加一个限制条件 </script> </body> </html>
结果:
筛选器方法
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUntil("#i2")
父亲元素:
$(".ss1").parent().parent()
$(".ss1").parents()
$(".ss1").parentsUntil('#i1') : 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div class="c1">div <p> <span class="ss1"></span> </p> </div> <p class="p1">p</p> <span class="s1" id="i1">span</span> <span class="s1">span</span> <span class="s1" id="i2">span</span> <span class="s1">span</span> <script> // 下一个元素:结果如图1所示 console.log($(".c1").next()); //下一个元素 console.log($(".c1").nextAll()); // 下面所有的元素 console.log($(".c1").nextUntil('#i2')); // .c1 class类下面的元素到id为i2的截止,不包括i2 // 父亲元素:结果如图2 console.log($(".ss1").parent().parent()); //一个parent就是往上找一个父辈,结果是 div标签 console.log($(".ss1").parents());//所有的父辈 console.log($(".ss1").parentsUntil('#i1')); </script> </body> </html>
图1:
图2:
儿子和兄弟元素:
$("#id").children();// 儿子们 $("#id").siblings();// 兄弟们
查找(掌握)
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")----------------->等价于$("div p") $("div p").find("a")----------------->等价于$("div p a") $("#d1 .c1").find("a")----------------->等价于$("#d1 .c1 a")
补充:
.first() // 获取匹配的第一个元素 $('div span:first')-------------->$('div span').first() .last() // 获取匹配的最后一个元素 $('div span:last')----------------->$('div span').last() .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 $('div span:not("#d3")') --------------->$('div span').not('#d3') .has() // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
样式类:
在js中:classList.add、remove、containes、toggle
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名,如果有就移除,如果没有就添加。
eg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div class="c1" id="d1"> div </div> <script> // document.getElementById('d1').classList.add("c2"); // 在js中添加 $("#d1").addClass('c2'); $("#d1").removeClass('c1'); console.log($("#d1").hasClass('c1')); $("#d1").toggleClass('c1'); </script> </body> </html>
文本操作
在js中:innerText innerHtml
html()// 取得第一个匹配元素的html内容 html(val)// 设置所有匹配元素的html内容 text()// 取得所有匹配元素的内容 text(val)// 设置所有匹配元素的内容
属性操作(重要)
用于ID等或自定义属性:
attr(attrName):返回第一个匹配元素的属性值
attr(attrName, attrValue):为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}):为所有匹配元素设置多个属性值
removeAttr():从每一个匹配的元素中删除一个属性
用于checkbox和radio:
prop():获取属性
removeProp():移除属性
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script> </head> <body> <div class="c1" username="jack">div</div> <input type="checkbox" value="1" checked="true" > <input type="radio" value="2"> <script> // js: // console.log(document.getElementsByClassName('c1')[0].getAttribute('username')); // console.log(document.getElementsByClassName('c1')[0].setAttribute('password', '123')); // console.log(document.getElementsByClassName('c1')[0].removeAttribute('username')); console.log($(".c1").attr('username')); // 返回第一个匹配元素的属性值 console.log($(".c1").attr('password', 123)); //为所有匹配元素设置一个属性值,如图2所示 $(".c1").removeAttr('username'); //从每一个匹配的元素中删除一个属性 console.log($(":checkbox[value='1']").prop("checked")); // 获取属性,有该属性就返回true,没有就返回false。 $(":checkbox[value='1']").prop("checked", true); //和上面代码意思一样 console.log($(":radio[value='2']").prop("checked"));// 获取属性,有该属性就返回true,没有就返回false。 </script> </body> </html>
结果:
图1:
图2:
图4:
图5:
prop和attr的区别:
attr全称attribute(属性):它的作用范围只限于HTML标签内的属性
prop全称property(属性):prop不支持获取标签的自定义属性。
虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
当设置或者获取单选框和复选框的属性值的时候,就使用prop()。除此之外,获取属性和设置属性都使用attr()。