jQuery
下载
-
点击download，下载未压缩版本（压不压缩都行）：https://code.jquery.com/jquery-3.5.1.js
-
点击后把网页的内容ctrl+A全选，ctrl+C复制。
-
在你的项目文件夹下建立一个jquery.js文件，把内容copy进去即可。
-
使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="jquery.js"></script> <script> 使用 </script> </body> </html>
jQuery对象和DOM对象
jQuery找到的对象称为 --- jQuery对象；
原生js文件找到的对象称为 --- DOM对象。
DOM对象只能使用DOM对象的方法，不能使用jQuery对象的方法；
jQuery对象也是，不能使用DOM对象的方法。
DOM对象和jQuery对象互相转换：
jQuery对象转DOM对象 --- jQuery对象[0] 示例：$('#d1')[0]
DOM对象转jQuery对象 --- $(DOM对象)
jQuery基础语法
jQuery选择器
//同CSS
$('#d1') // id选择器
$('.c1') // 类选择器
$('标签名') //标签选择器
$("#id, .className, tagName") // 组合选择器
选择器找到的可能是多个标签，会放到数组里边，但还是jQuery对象，能够直接使用jQuery方法，意思是找到的所有标签进行统一设置，如果要单独设置选中的所有标签的某个标签，可以用索引取值的方式找到，然后注意，通过索引取值拿到的标签是个DOM对象，要转换成jQuery对象。
//层级选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
# 用法示例：
//html文件
<body>
<ul>
<li>盖伦</li>
<li>卡沙</li>
<li id="l3">诺克萨斯</li>
<li>戏命师</li>
<li id="l5">莫菲特</li>
<li>卡特琳娜</li>
</ul>
<script src="jquery.js"></script>
</body>
//console窗口
$('li');
jQuery.fn.init(6) [li, li, li#l3, li, li#l5, li, prevObject: jQuery.fn.init(1)]
0: li
1: li
2: li#l3
3: li
4: li#l5
5: li
length: 6
prevObject: jQuery.fn.init [document]
__proto__: Object(0)
$('li:first');
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
0: li
length: 1
prevObject: jQuery.fn.init [document]
__proto__: Object(0)
$('li:last');
jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
0: li
length: 1
prevObject: jQuery.fn.init [document]
__proto__: Object(0)
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
//例如：
// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
找到的是type属性为这个值的标签
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//例如：
$(":checkbox") // 找到所有的checkbox
//表单对象属性
:enabled
:disabled
:checked
:selected
筛选器方法
# 找到下边兄弟的标签
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
// 上边的兄弟
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
// 找它的父亲
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
// 找儿子
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
// 筛选
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签