一、JQuery
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
JQuery内部封装了原生的JS代码，而且还额外添加了很多功能
JQuery兼容多个浏览器，所以使用JQuery不用考虑浏览器兼容问题
1、jQuery下载
下载链接：jQuery官网
推荐使用压缩版本，文件容量更小
打开下载链接然后Ctrl＋A全选代码，Ctrl＋C复制，然后新建一个JS文件，Ctrl＋V将代码拷贝进文件里
然后导入到Pycharm中
2、针对导入问题
'''1、文件下载到了本地 如何解决多个文件反复书写引入语句的代码'''
可以借助于pycharm自动初始化代码功能完成自动添加
配置--编辑
file and code template
'''2、无需下载JQuery，直接引入jQuery提供的CDN服务(基于网络直接请求加载)'''
CDN:内容分发网络,我们使用前端免费的cdn网站:bootcdn的服务
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
3、jQuery语法
// jQuery基本语法
jQuery(选择器).action()
jQuery可以简写为$
// jQuery与js代码对比
将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
4、JQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法
"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
$('#d1')[0]
// 拿到了标签对象
<div id="d1">…</div>
// 上面的命令相当于这条
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
$(document.getElementById('d1'))
w.fn.init [div#d1]
二、查找标签
基本选择器
// id选择器
$('#d1')
// class选择器
$('.c1')
// 标签选择器
$('span')
组合选择器/分组与嵌套
// 找到有c1 class类的div标签
$('div.c1')
// 找到d1 id的div标签
$('div#d1')
// 所有元素选择器
$('*')
// 并列+混用
$('#d1,.c1,p')
$('div span') // 后代
$('div>span') // 儿子
$('div+span') // 毗邻
$('div~span') // 弟弟
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
///////////////////////////////////// 案例 //////////////////////////////////////
$('ul li:first') // 大儿子
$('ul li:last') // 小儿子
$('ul li:eq(2)') // 放索引
$('ul li:even') // 偶数索引 0包含在内
$('ul li:odd') // 奇数索引
$('ul li:gt(2)') // 大于索引
$('ul li:lt(2)') // 小于索引
$('ul li:not("#d1")') // 移除满足条件的标签
$('div:has("p")') // 选取出包含一个或多个标签在内的标签
属性选择器
[attribute]
[attribute=value] // 属性等于
[attribute!=value] // 属性不等于
///////////////////////////////////// 案例 //////////////////////////////////////
// 示例
<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
$(":checkbox") // 找到所有的checkbox
$(":button") // 找到所有的button
///////////////////////////////////// 分割 //////////////////////////////////////
// 表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':checked') // 它会将checked和selected都拿到
$(':selected') // 只拿selected
$('input:checked') // 只想拿checked，就自己加一个限制条件
筛选器方法
$('#d1').next() // 同级别下一个元素
$('#d1').nextAll() // 同级别下的所有元素
$('#d1').nextUntil('.c1') // 不包括最后一个
$('.c1').prev() // 同级别上一个元素
$('.c1').prevAll() // 同级别上的所有元素
$('.c1').prevUntil('#d2') // 不包括最后一个
$('#d3').parent() // 第一级父标签
$('#d3').parent().parent() // 拿多个
$('#d3').parents() // 查找当前元素的所有的父辈元素
$('#d3').parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$('#d2').children() // 儿子们
$('#d2').siblings() // 兄弟们
$('div').find('p') // find从某个区域内筛选出想要的标签
// 等价：$('div p')
"""下述两两等价"""
$('div span:first')
// 等价
$('div span').first()
$('div span:last')
// 等价
$('div span').last()
$('div span:not("#d3")')
// 等价
$('div span').not('#d3')