什么是jQuery？
- 是一个工具，简单方便实现DOM操作
- python里可能叫模块贴切一点，但在前端叫"类库"
jQuery学什么？
- 查找标签
- 修改属性样式
- 事件
- Ajax异步请求
- 插件机制
使用注意事项
- 一定要先导入后使用
基础语法
$(selector).action()
// 样式演变，原本应该
jQuery();
// 为了简化
$();
JQ对象和JS对象的转化
var dEle = $('.d1')[0]; //将JQ对象转化为JS对象
$(dEle) 将JS对象转化为JQ对象
选择器
层级选择器
-
层级选择器
后代
儿子
毗邻
弟弟
基本筛选器
// 用ul标签举例
$('#ul>li:first')
$('#u1>li:last')
$('#ul>li:eq(3)')
$('#ul>li:even')
$('#ul>li:odd')
$('#ul>li:gt(3)')
$('#ul>li:lt(3)')
$('#u1>li:not(.c1)')
// 最后一个has的玩法需要写个三个div
// 一个空div
// 一个儿子有a标签
// 一个儿子没有a，孙子有a标签
$('div:has(a)')
样式操作(原生DOM和jQuery实现标签红绿变幻)
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
表单筛选器
# 针对表单内的标签
$('input[type="text"]')
# 简化写法
$(':text')
# 找到所有被选中的checkbox
$(':checkbox') # 注意select框中默认selected标签也会被找到
$('input:checkbox')
筛选器方法
# 避免$('input:first')太麻烦
$('input').first()
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
样式操作
样式类相关
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
CSS相关
css("color","red")//DOM操作：tag.style.color="red"
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
尺寸
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
例如：
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
示例：
获取被选中的checkbox或radio的值：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
可以使用：
$("input[name='gender']:checked").val()
属性操作
用于ID等或自定义属性使用attr：
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
文档处理
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
取消标签默认的绑定事件
第一种：
$('input').click(function (e) {
alert('123');
e.preventDefault();
})
第二种
return False
解决事件冒泡
事件冒泡：当一个标签中绑定的事件执行之后，会向上一级标签汇报，他有没有这个点击事件，如果有就会执行，并且传给下一级。
利用stoppropagtion方法，解决事件冒泡
事件委托
将一事件委托给一个标签，当标签即使是被动态创建出来，也能拥有这个事件。
// 事件委托
$('body').on('click','button',function () {
alert(123)
})
事件
lick(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
.on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
.off( events [, selector ][,function(){}])，off()方法移除用.on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等- e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])