目录
1.jQuery基本要点
1.jQuery：引入方式
write less do more
官网https://jquery.com/
(1)方式一：
下载jQuery压缩文件https://code.jquery.com/jquery-3.6.0.min.js，复制粘贴到通目录下
<script src="路径直接引用"></script>
(2)方式二：
利用cdn服务，需要网络
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
在vscode自定义代码块可以在写代码前快速设置
2.jQuery基本语法：
(1)jQuery操作标签
jQuery(选择器).操作
可以简写$(选择器).操作，$()===jQuery()
(2)例如：
jQuery操作p标签，改变颜色
$('p').css('color','blue')
原生js操作p标签，改变颜色
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
(3)补充：$(''):外层单引号，内层双引号
$('')方法返回的都是jQuery对象
3.在用变量存储对象的时候
(1)js中推荐使用 XXXEle 标签对象
如：let imgEle = document.createElement('img')
(2)jQuery中推荐使用 $XXXEle jQuery对象
如：let $pEle = $('p')
2.jQuery选择器
1.jQuery基本选择器
(1)分类：
a.id选择器，返回的是jQuery对象
$('#d1')
返回//w.fn.init [div#d1]
// 0: div#d1
// length: 1
// __proto__: Object(0)
b.class选择器，返回的是jQuery对象
$('.c1')
返回//w.fn.init [p.c1, prevObject: w.fn.init(1)]
// 0: p.c1
// length: 1
// prevObject: w.fn.init [document]
// __proto__: Object(0)
c.标签选择器,返回的是jQuery对象
$('span')
返回//w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
//0: span
//1: span
//2: span
//length: 3
//prevObject: w.fn.init [document]
//[[Prototype]]: Object(0)
(2)通过选择器获取标签(jQuery对象转标签对象)
加索引即可$('')[0]
a.id选择器获取标签：$('#d1')[0] // id只有一个，所有[0]即标签
b.class选择器获取标签：$('.c1')[0]
c.$('span')获取标签：$('span')[1]
(3)标签对象如何转jQuery对象
$(原生js选择器)
a.id标签对象转id的jQuery对象：$(document.getElementById('d1'))
b.class的标签对象转jQuery对像：$(document.getElementsByClassName('c1'))
c.标签对象转jQuery对象：$(document.getElementsByTagName('span'))
2.jQuery定位/组合嵌套选择器
(1)定位：$('div.c1') //找div下的名为c1类选择器
$('div#d1') //找div下的名为d1的选择器
$('*') //全部选择器
(2)组合：
$('#d1,.c1,p') //并列+混用
$('div span') //后代
$('div>span') //儿子
$('div+span') //毗邻
$('div~span') //弟弟
3.jQuery属性选择器：[]
$('[username]') //找有username属性的标签
$('[username="wsx"]') //找有username="wsx"属性的标签
$('div[username="wsx"]') //找p标签并且有username="wsx"属性的标签
3.jQuery筛选器
1.jQuery基本筛选器
顾名思义，多层标签用过条件筛选，以下用无序列表多个li演示
$('ul li:first') //大儿子 ul下第一个li
$('ul li:last') //小儿子 ul下最后一个li
$('ul li:eq(2)') //索引对应li 取ul下第几个li（0开始）
$('ul li:even') //偶数索引 0开始（0 2 4 6...）
$('ul li:odd') //奇数索引 (1 3 5 7...)
$('ul li:gt(2)') //大于索引 ul下索引大于2
$('ul li:lt(2)') //小于索引 ul下索引小于2
$('ul li:not("#d1")') //移除满足条件的标签 ul下索引不含d1选择器标签
$('div:has("p")') //选取出包含一个或多个标签在内的标签 div下有p的标签
2.jQuery表单筛选器
在表单中想拿数据，通过筛选器可简写
(1)input-type=""中,type属性用:即可简写，如:
$(':text') //等价于$('input[type="text"]')
$(':password') //等价于$('input[type="password"]')
(2)表单对象属性，enabled，disabled，checked，selected等等，用法一致
$(':enabled')
$('disabled')
(3)补充：特殊情况
在表单默认选择方式有两种：input框checked，select下拉框selected
$(':checked') //会将表单中的checked和selected都拿到
$(':selected') //只拿selected
('input:checked') //只拿checked，加一个限制条件
3.jQuery筛选器方法
(1)外部：
$('#d1').next() //d1标签的同级别的下一个标签
$('#d1').nextAll() //d1标签的同级别下面的所有标签
$('#d1').nextUntil('.c1') //d1标签的同级别下面直到c1的所有标签，不包括c1（不包括最后一个）
$('.c1').prev() //c1标签的同级别的上一个标签
$('.c1').prevAll() //c1标签的同级别上面面的所有标签
$('.c1').prevUntil('#d2') //c1标签的同级别上面直到d1的所有标签，不包括d1（不包括最上面一个）
$('#d1').siblings() //d1同级别上下所有标签
(2)内部：
$('#d1').parent() //d1的父标签，可以连续.parent
$('#d1').parents() //d1的所有父标签
$('#d1').parentsUntil('body') //d1的直到body的所有父标签，不含body
$('#d1').children() //d1的所有儿子标签
$('#d1').siblings() /d1同级别上下所有标签
(3)补充
$('div span').first() //div下第一个span，等价于$('div span:first')
$('div span').last() //div下最后一个span，等价于$('div span:last')
$('div span:not("#d1")') //div下不包含d1的span，等价于$('div span').not('#d1')
$('div').find('p') //find从某个区域内筛选出想要的标签，等价于$('div p')