jQuery 介绍及标签查找
1. jQuery介绍
"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能),能够让你通过书写更少的代码 完成js操作,
类似于python里面的模块 在前端模块不叫模块 叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
python导入模块发生了哪些事？
导入模块其实需要消耗资源
jQuery在使用的时候也需要导入
但是它的文件非常的小(几十KB) 基本不影响网络速度
jQuery文件下载
压缩 容量更小
未压缩
"""
# jQuery在使用之前 一定要确保已经导入了
2. 导入问题
# 将文件下载到本地，然后使用pycharm自动生成代码的方式导入
file-setting-editor-file and code templates
<script src="本地路径"></script>
# 采用cdn的方式
进入bootcdn网站-复制script标签
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
3. jQuery 基础语法
jQuery(选择器).action()
jQuery简写成 $
jQuery() === $()
# js 和 $ 的对比
# 原生js代码操作标签
let pEle = document.getElementById(‘d1‘) # 获取p标签
pEle.style.color = ‘red‘
# jQuery操作标签
$(‘p‘).css(‘color‘,‘blue‘)
4. 查找标签
4.1 基础选择器
// id选择器 #
$(‘#d1‘)
// class 选择器 .
$(‘.c1‘)
// 标签选择器 直接写标签
$(‘span‘)
// 以上三个方法得到的都是一个jQuery对象， 那么如何让一个 jQuery对象 变成一个 标签对象 呢？
1. $(‘#d1‘)[0]
// 原生js （getelement）得到的是标签对象， 那么如何让一个 标签对象 转换成 jQuery对象 呢？
2. $(document.getElementById(‘d1‘)) //将得到的标签对象用 $() 括起来
4.2 组合选择器/分组与嵌套
$(‘div‘) //找div
$(‘div.c1‘) //找类是c1的div
$(‘div#d1‘) //找id是d1的div
$(‘*‘) //找全部标签
$(‘#d1,.c1,p‘) // 并列+混用
$(‘div span‘) // 后代
$(‘div>span‘) // 儿子
$(‘div+span‘) // 毗邻
$(‘div~span‘) // 弟弟
4.3 基础筛选器
$(‘ul li‘)
$(‘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")‘) # 选取出包含一个或多个标签在内的标签
4.4 属性选择器
# 起手 $(‘标签[属性=属性值]‘)
$(‘[username]‘) # 自定义属性有username的属性
$(‘[username="wesley"]‘)
$(‘p[username="yebobo"]‘) # p标签 有username的属性
$(‘[type]‘)
$(‘[type="text"]‘) # 自带属性
4.5 表单选择器
$(‘input[type="text"]‘) === $(‘:text‘)
$(‘input[type="password"]‘) === $(‘:password‘)
"""有以下同类简写
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
"""
# 表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(‘:checked‘) # 它会将checked和selected都拿到
$(‘:selected‘) # 它不会 只拿selected
$(‘input:checked‘) # 需要自己加一个限制条件
4.6 筛选器方法
$(‘#d1‘).next() # 同级别下一个
$(‘#d1‘).nextAll() # 同级别下面所有
$(‘#d1‘).nextUntil(‘.c1‘) # 直到什么为止（从#d1开始，到.c1 并且不包含.c1） 不包含最后一个
$(‘.c1‘).prev() # 上一个
$(‘.c1‘).prevAll()
$(‘.c1‘).prevUntil(‘#d2‘)
$(‘#d3‘).parent() # 第一级父标签
$(‘#d3‘).parent().parent() # 第一级父标签的父标签
$(‘#d3‘).parent().parent().parent()
$(‘#d3‘).parents() # 所有父标签
$(‘#d3‘).parentsUntil(‘body‘) # 直到 boby 为止
$(‘#d2‘).children() # 儿子
$(‘#d2‘).siblings() # 同级别上下所有
$(‘div p‘) === $(‘div‘).find(‘p‘) # find从某个区域内筛选出想要的标签
"""下述两两等价"""
$(‘div span:first‘) === $(‘div span‘).first()
$(‘div span:not("#d3")‘) === $(‘div span‘).not(‘#d3‘)
5. jquery 选择器以及事件
01 jQuery 介绍及标签查找