jQuery 快速入门
jQuery 介绍
jQuery 是一个 JavaScript 库。所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery HolleWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HolleWorld
</title>
</head>
<body>
<div id="div">我是div
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
let jqDiv = $("#div");
alert(jqDiv);
alert(jqDiv.html());
</script>
</html>
jQuery 基本语法
JS 对象和 jQuery 对象转换
JS 的 DOM 对象转换成 jQuery 对象
<script>
$(JS的DOM对象);
</script>
jQuery 对象转换成 JS 对象
<script>
jQuery对象[索引];
jQuery对象.get(索引);
</script>
事件的绑定和解绑
绑定事件
<script>
jQuery对象.on(事件名称,执行的功能);
</script>
解绑事件
<script>
jQuery对象.off(事件名称);
</script>
事件的切换
事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。
方式一：单独定义
<script>
$(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
…
</script>
方式二：链式定义
<script>
$(元素).事件方法名1(要执行的功能)
.事件方法名2(要执行的功能);
…
</script>
遍历
方式一：传统方式
<script>
for(let i = 0; i < 容器对象长度; i++){
执行功能;
}
</script>
方式二：对象.each() 方法
<script>
容器对象.each(function(index,ele){
执行功能;
});
</script>
方式三：$.each() 方法
<script>
$.each(容器对象,function(index,ele){
执行功能;
});
</script>
方式四：for of 语句
<script>
for(ele of 容器对象){
执行功能;
}
</script>
jQuery 选择器
基本选择器
选择器语法作用
元素选择器$(“元素的名称”);根据元素名称获取元素对象们id 选择器$("#id的属性值");根据id属性值获取元素对象类选择器$(".class的属性值");根据class属性值获取元素对象们
层级选择器
选择器语法作用
后代选择器$(“A B”);A下的所有B(包括B的子级)子选择器$(“A > B”);A下的所有B(不包括B的子级)兄弟选择器$(“A + B”);A相邻的下一个B兄弟选择器$(“A ~ B”);A相邻的所有B
属性选择器
选择器选择器作用
属性名选择器$(“A[属性名]”);根据指定属性名获取元素对象们属性名选择器$(“A[属性名=属性值]”);根据指定属性名和属性值获取元素对象们
过滤器选择器
选择器选择器作用
首元素选择器$(“A:first”);获得选择的元素中的第一个元素尾元素选择器$(“A:last”);获得选择的元素中的最后一个元素非元素选择器$(“A:not(B)”);不包括指定内容的元素偶数选择器$(“A:even”);偶数，从 0 开始计数奇数选择器$(“A:odd”);奇数，从 0 开始计数等于索引选择器$(“A:eq(index)”);指定索引元素大于索引选择器$(“A:gt(index)”);大于指定索引元素小于索引选择器$(“A:lt(index)”);小于指定索引元素
表单属性选择器
选择器语法作用
可用元素选择器$(“A:enabled”);获得可用元素不可用元素选择器$(“A:disabled”);获得不可用元素单选/复选框被选中的元素$(“A:checked”);获得单选/复选框选中的元素下拉框被选中的元素$(“A:selected”);获得下拉框选中的元素
jQuery DOM
操作文本
方法作用
html()获取标签的文本html(value)设置标签的文本内容，解析标签
操作对象
方法作用
$(“元素”)创建指定元素append(element)添加成最后一个子元素，由添加者对象调用appendTo(element)添加成最后一个子元素，由被添加者对象调用prepend(element)添加成第一个子元素，由添加者对象调用prependTo(element)添加成第一个子元素，由被添加者对象调用before(element)添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用after(element)添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用remove()删除指定元素(自己移除自己)empty()清空指定元素的所有子元素
操作样式
方法作用
css(name)根据样式名称获取css样式css(name,value)设置CSS样式addClass(value)给指定的对象添加样式类名removeClass(value)给指定的对象删除样式类名toggleClass(value)如果没有样式类名，则添加。如果有，则删除
操作属性
方法作用
attr(name,[value])获得/设置属性的值prop(name,[value])获得/设置属性的值(checked，selected)
