jQuery
'''
内部封装了原生js代码，此外还添加了很多功能
推崇用更少的代码完成更多的事情
类似于python的模块，只不过前端中的名词是"类库"
使用jQuery无需考虑浏览器兼容问题
使用前必须先导入
'''
针对导入问题
# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""必须联网"""
# jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
标签查找
基本选择器
// id选择器
$('#d1') // S.fn.init [div#d1] 返回jquery对象
//类选择器
$('.c1') //S.fn.init [div.c1, prevObject: S.fn.init(1)] 返回jquery对象
// 标签选择器
$('div') //S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)] 返回jquery对象
//jQuery对线变成标签对象
$('#d1')[0] // <div id='d1'>...</div>
$('.c1')[0] // <div class='c1'>...</div>
$('div')[0]
//标签对象变成jQuery对象
$(document.getElementById('d1')) // S.fn.init [div#d1]
组合选择器/分组与嵌套
$('div')
// S.fn.init(2) [div#d1, div.c1, prevObject: S.fn.init(1)]
$('div.c1')
// S.fn.init [div.c1, prevObject: S.fn.init(1)]
$('div#d1')
// S.fn.init [div#d1, prevObject: S.fn.init(1)]
$('*')
// S.fn.init(18) [html, head, meta, title, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: S.fn.init(1)]
$('#d1,.c1,p') // 并列+混用
// S.fn.init(3) [div#d1, p#d2, div.c1, prevObject: S.fn.init(1)]
$('div span') // 后代
// S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
$('div>span') // 儿子
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
$('div+span') // 毗邻
// S.fn.init [span, prevObject: S.fn.init(1)]
$('div~span') // 弟弟
// S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
基本筛选器
$('ul li')
// w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:first') //第一个儿子
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject:
// w.fn.init [document]__proto__: Object(0)
$('ul li:last') //最后一个儿子
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject:
// w.fn.init [document]__proto__: Object(0)
$('ul li:eq(2)') //对应索引
// w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject:
// w.fn.init [document]__proto__: Object(0)
$('ul li:even') //偶数索引
// w.fn.init(5) [li, li, li, li.c1, li]
$('ul li:odd') //奇数索引
// w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:gt(2)') //大于索引
// w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
$('ul li:lt(2)') //小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]
$('ul li:not("#d1")') //移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') //筛选出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]
属性选择器
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
表单筛选器
$('input[type="text"]')
//w.fn.init [input, prevObject: w.fn.init(1)]
$('input[type="password"]')
//w.fn.init [input, prevObject: w.fn.init(1)]
$(':text') //等价于上面第一个
//w.fn.init [input, prevObject: w.fn.init(1)]
$(':password') //等价于上面第二个
//w.fn.init [input, prevObject: w.fn.init(1)]
/*
其他的表单筛选器
:text //文本
:password //密码
:file //文件
:radio //单选框
:checkbox //复选框
:submit //提交
:reset //重置
:button //按钮
...
*/
/*
表单对象属性
:enabled
:disabled
:checked
:selected
*/
//特殊情况
$(':checked') //会将设置了checked与selected的标签都拿到
//w.fn.init(2) [input, option, prevObject: w.fn.init(1)]
$(':selected') //只会拿到selected
//w.fn.init [option, prevObject: w.fn.init(1)]
//解决方法：加上一个限制条件
$('input:checked')
//w.fn.init [input, prevObject: w.fn.init(1)]
筛选器方法
$('#d1').next() //获取同级下一个标签
//w.fn.init [span, prevObject: w.fn.init(1)]
$('#d1').nextAll() //获取标签下方同级的所有标签
//w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]
$('#d1').nextUntil('#d2') //获取从当前标签开始到指定标签之间的所有同级标签（不包括指定标签）
//w.fn.init [span, prevObject: w.fn.init(1)]
$('.c1').prev() //获取同级上一个标签
//w.fn.init [span, prevObject: w.fn.init(1)]
$('.c1').prevAll()
//w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
//w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('#d3').parent() //第一级父标签
//w.fn.init [p, prevObject: w.fn.init(1)]
$('#d3').parent().parent() //第二级父标签
//w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parents() //所有父标签
//w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body') //到body父标签之前的所有父标签(不包括body)
//w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() //当前标签的所有子标签
$('#d2').siblings() //当前标签的所有兄弟标签
//下述两两等价
$('div p')
// 两者等价
$('div').find('p') //find从某个区域内筛选出想要的标签
$('div span:first')
$('div span').first() //筛选出第一个指定标签
$('div span:last')
$('div span').last() //筛选出最后一个指定标签
$('div span:not("#d3")')
$('div span').not('#d3') //筛选出不满足条件的所有指定标签
