jQuery
一、jQuery简介
1. 特点
1. 兼容所有浏览器
2. 丰富的DOM选择器
3. 链式表达式
4. Ajax操作支持
2. 语法
1. jQuery语法
$(选择器).action(操作)
2. 与JS对比
JS：
var pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
jQuery：
$('p').css('color', 'green')
二、选择器与筛选器
1. 基本选择器
1. 标签选择器
$('span')
2. 类选择器
$('.c1')
3. id选择器
$('#id')
4. 组合选择器
$('#d1, span');
5. 配合使用
$('div.c1') // 找到有c1 class类的div标签
2. 层级选择器
1. 后代选择器
$('x y');
2. 儿子选择器
$('x > y')
3. 毗邻选择器
$('x + y')
4. 兄弟选择器
$('x ~ y')
3. 属性选择器
1. 找到含有‘username’属性的标签
$('[username]')
2. 找到含有username属性，且值为‘byx’的标签
$('[username="byx"]')
3. 找到在span标签下，username=byx的标签
$('span[username="byx"]')
4. 基本筛选器
1. 找第一个(:first)
$('ul li:first')
2. 找最后一个（:last)
$('ul li:last')
3. 匹配索引等于index的那个元素
$('ul li:eq(2)')
4. 匹配索引为偶数的元素，从0开始计数
$('ul li:even')
5. 匹配索引为奇数的元素，从0开始计数
$('ul li:odd')
6. 匹配所有大于给定索引值的元素
$('ul li:gt(3)')
7. 匹配所有小于给定索引值的元素
$('ul li:lt(3)')
8. 移除所有满足not条件的标签
$('div span:not('.c1')')
9. 选取所有包含一个或多个标签在内的标签（从后代元素中找）
$('div:has('.c1')')
5. 表单筛选器
1. 找到所有的checkbox
$(":checkbox")
2. 找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
3. 找到被选中的option
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
4. 注意，在使用checked查找时，会将selected找到，这是一个bug。
6. 筛选器方法
1. 下一个元素
$spanEle.next()
$spanEle.nextAll()
$spanEle.nextUntil('#d2')
2. 上一个元素
$spanEle.prev()
$spanEle.prevAll()
$spanEle.prevUntil('#d2')
3. 父亲元素
$("#id").parent()
$("#id").parent().parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil('html') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4. 儿子和兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
5. 查找div内部的span
$('div').find('span')
6. 补充
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
三、jQuery操作标签
1. CSS样式操作
1. 添加指定的CSS类名
$('div').addclass（'bg_red'）
2. 移除指定的CSS类名
$('div').removeClass（'bg_red'）
3. 判断是否有指定类名
$('div').hasClass（'bg_red'）
4. 切换CSS类名，如果有就移除，没有就添加
$('div').toggleClass（'bg_red'）
5. 设置CSS属性
$('p').css('color', 'red')
P.S:
JS
.style.color
jQuery
.css('color', 'red')
P.P.S
搭骨架用HTML，调样式用CSS，加动态效果用JS，让三种语言各司其职。
2. 位置操作
1. 获取匹配元素在当前窗口的相对偏移或设置元素位置
offset（）
2. 获取匹配元素相对父元素的偏移
position（）
3. 获取匹配元素相对滚动条顶部的偏移，括号内可以传数字进行移动
$(window).scrollTop（）
4. 获取匹配元素相对滚动条左侧的偏移，括号内可以传数字进行移动
$(window).scrollLeft（）
3. 尺寸
1. 文本高
$('p').height（）
2. 文本宽
$('p').width（）
3. 文本+padding高
$('p').innerHeight（）
4. 文本+padding宽
$('p').innerWidth（）
5. 文本+padding+边框高
$('p').outerHeight
6. 文本+padding+边框宽
$('p').outerweight
4. 文本操作
1. 获取标签内部文本值，可以在括号内传参数设置值。
$('div').text()
2. 获取标签内部的HTML代码，可以在括号内传参数设置值。
$('div').html()
3. 获取标签内用户输入的值，可以在括号内加参数设置值。
$('div').val()
P.S
JS
innerText()
innerHtml()
value
5. 属性操作
1. 用于id等或自定义属性：
1. 查找第一个匹配到的属性名称
$('p').attr('id')
2. 为匹配到的属性设置一个属性值
$('p').attr('id', 'byx')
3. 为匹配到的属性设置多个值
$('p').attr({'id': 'byx', 'password': '123'})
4. 移除属性
$('p').removeAttr('id')
2. 用于checkbox和radio，可以动态识别选择。
1. 获取属性，识别标签是否被选中，返回布尔值。
$('input').first().prop('checked')
2. 修改属性
$('input').first().prop('checked'，false)
3. 移除属性
$('input').first().removeProp('id')
6. 文档处理
1. 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
2. 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
3. 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
4. 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
5. 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
6. 替换
replaceWith()
replaceAll()
7. 克隆
clone()// 参数
默认不克隆事件，除非在括号中添加True。
四、jQuery事件
1. 常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
2. jQuery绑定事件的语法
1. 方式一
$(选择器).事件名(
function() {
// 事件代码
})
2. 方式二
$(选择器).on('事件名'，function() {
// 事件代码
})
P.S
JS
XXXEle.on+事件名 = function() {
// 事件代码
｝
3. 移除事件
$(选择器).off('事件名'，function() {
// 事件代码
})
4. 阻止后续事件
1. 方式一
事件代码后加上return false
2. 方式二
事件代码后加上e.preventDefault();
5. 事件冒泡
1. 定义
子标签事件触发后，会继续触发父标签事件
2. 控制事件冒泡
e.stopPropagation
<!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>
6. 事件委托
1. 定义
将特定的事件，委托给标签内部指定的元素（标签既可以是提前写的，也可以是后期动态创建的）
2. 示例
只要是body内的button按钮，都具有alert事件
$('body').on('click', 'button', function() {
alert(123)
})
7. 示例
1. hover事件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>
<script src="jQuery-3.3.1.js">
</script>
<script>
$('p').hover(
function () {
alert('来啦，老弟')
},
function () {
alert('慢走哦～')
}
)
</script>
</body>
</html>
2. 实时监听input输入值变化示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
五、jQuery动画效果
1. 展示与隐藏
1. 5秒展开图片到原本大小
$('div').show(5000)
2. 5秒缩小图片
$('div').hide(5000)
2. 滑动
1. 3秒向上卷起图片
$('div').slideUp(3000)
2. 3秒向下展开图片
$('div').slideDown(3000)
3. 淡入淡出
1. 4秒图片淡出
$('div').fadeout(4000)
2. 4秒图片淡入
$('div').fadein(4000)
3. 4秒图片淡出到透明度为0.4
$('div').fadeto(4000, 0.4)
4. 示例：点赞效果
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
六、jQuery补充知识点
1. each
1. 作用
遍历一个jQuery对象，为每个匹配元素执行一个函数，常用来代替for循环。
2. 用法一
创建3个p标签，内部1到3
$.each($('p'), function(index, obj) {
console.log(index, obj, this)
})
输出
0 <p>1</p> <p>1</p>
1 <p>2</p> <p>2</p>
2 <p>3</p> <p>3</p>
3. 用法二
$('p').each(function(index, obj) {
console.log(index, obj)
})
输出
0 <p>1</p> <p>1</p>
1 <p>2</p> <p>2</p>
2 <p>3</p> <p>3</p>
4. 终止循环
return false;
2. .data()
1. 作用
在标签存储信息，并无法在前端查看到。取值时，键不存在也不会报错
2. 存值
$('p').data('username', 'byx')
3. 取值
$('p').first().data('username')
4. 删除值
$('p').removeData('username')
