jQuery基础
jQuery内部封装了很多原生的js代码，通过使用类库，能够让我们更加方便的完成js操作。
JQuery的宗旨就是：with less do more.
JQuery能够实现很多的功能：
-
选择器
-
筛选器
-
样式操作
-
文本操作
-
属性操作
-
文档处理
-
事件
-
动画效果
-
插件
-
each、data、Ajax(重点 django部分学)
在使用它之前，要确保它已经被导入了。导入的方式有两种：
-
文件下载到本地，通过语句导入
-
直接引入jQuery提供的CDN服务（基于网络直接请求加载）
// jQuery基本语法
jQuery(选择器).action()
// 可以简写为$(选择器).action()
// jQuery与js代码对比
// js代码操作标签
let pEle = document.getElementById('d1');
pEle.color = 'red';
// jQuery操作标签
$('#d1').css('color','red')
如何查找标签
// 基本选择器
$('#id') // id选择器
$('.类名') // 类选择器
$('标签') // 标签选择器
// 返回的的是数组，其内部是jQuery对象而不是JS对象。
$('#id')[0] // jQuery对象转为js对象
$(document.getElementById('id')) // JS对象转为JQuery对象
组合选择器/分组与嵌套
$('div') // 标签
$('div.c1') // 带有c1类的div
$('div#d1') // ID为d1的div
$('*') // 全部的标签
$('#d1,.c1,p') // 用逗号表并列关系
$('div span') // 后代选择器：所有内部的span标签
$('div>span') // 子代选择器：子代（第一层）的span标签
$('div+span') // 毗邻选择器：挨着自己的下一个同级标签
$('div~span') // 弟弟选择器：同级别的所有下方的标签
基本筛选器
$('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")') # 选取出包含一个或多个标签在内的标签
表单选择器
$('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') # 自己加一个限制条件
筛选器方法
$('#d1').next() # 同级别下一个
$('#d1').nextUntil('.c1') # 不包括最后一个
$('#d1').nextAll() # 接下来的全部
$('.c1').prev() # 上一个
$('.c1').prevUntil('#d2')
$('.c1').prevAll()
$('#d3').parent() # 第一级父标签
$('#d3').parentsUntil('body')
$('#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')