今日内容
1. JQuery基础
1.概念
2.快速入门
3.JQuery对象和JS对象区别与转换
4.选择器
5.DOM操作
6.案例
JQuery基础
1.概念：一个JavaScript框架，简化JS开发
* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。
2.快速入门
1.步骤：
1.下载JQuery
*目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
我们这里使用3.x版本。
* jquery-3.3.1.js：开发版本，里面有源代码，良好的缩进和注释。给程序员看的
* jquery-3.3.1.min.js：生产版本，程序中去使用的。没有缩进，体积小，程序加载快。
2.导入JQuery的js文件：导入jquery-3.3.1.min.js
<script src="js/jquery-3.3.1.min.js"></script>
3.使用
<div id="div1">div1...</div>
<div id="div2">div2...</div>
<script>
//1.使用JQuery获取元素对象：通过id找对应的元素。注意加上“#”
var div1 = $("#div1");
alert(div1.html());
var div2 = $("#div2");
alert(div2.html());
</script>
3.JQuery对象和JS对象区别与转换
JQuery通过$("#...")获取的JQuery对象本质上也是JS代码，JS对象。那么通过JQuery方法获
取的JQuery对象和JS原生方法获取的JS对象有些区别和联系（转换）：
* 转换
结论1：JQuery对象在操作是，更加方便。
结论2：JQuery和js对象方法不通用，都有各自的方法。
结论3：为了使用JS对象，那么就要先转成JQuery对象
* JQuery--->JS：JQuery对象[索引] 或者 JQuery.get(索引)
* JS--->JQuery：$(js对象)
4.选择器：筛选具有相似特征的元素（标签）
1. 基本的语法学习
1.事件绑定
JQuery对象注册事件和JS对象注册事件方法不同
$b1.click() b1.onclick()
2.入口函数：类似window.onload = function ()
1.JS入口函数
window.onload = function () {
var $b1 = $("#b1");
$b1.click(function () {
alert("abc")
})
}
2.JQuery入口函数
$(function () {
var $b1 = $("#b1");
$b1.click(function () {
alert("abc")
})
})
3.两者区别：
*1 window.onload 只能定义一次
window.onload = function ()：
window对象绑定了一个事件window.onload。已加载完就会执行
function(){}中的代码
如果有两个window.onload = function (){}：
那么下面的又绑定了一次，就将上面的覆盖了。就相当于对一个
变量赋值两次。
*2. $(function(){})可以定义多次
3.样式控制
$(function () {
//1.第一种写法：css(键， 值)。键：CSS对应的样式名称
//$("#div1").css("background-color", "red");
//2.第二种写法：如果按置ctrl鼠标放上去，变成小手，就说明写对了。
$("#div1").css("backgroundColor", "pink")
});
2. 分类
1. 基本选择器
1. 标签选择器（元素选择器）
* 语法： $("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
4. 并集选择器：
* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
*
2. 层级选择器
1. 后代选择器
* 语法： $("A B ") 选择A元素内部的所有B元素，包括孙子辈。
2. 子选择器
* 语法： $("A > B") 选择A元素内部的所有B子元素
*
3. 属性选择器
1. 属性名称选择器
* 语法： $("A[属性名]") 包含指定属性的选择器
2. 属性选择器
* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
* 语法： $("A[属性名 !='值']")包含两种情况
属性不等于特定值的元素。
匹配所有不含有指定的属性的A元素。
* 语法： $("A[属性名 ^='值']")
匹配给定的属性是以某些值开始的元素
* 语法： $("A[属性名 $='值']")
匹配给定的属性是以某些值结尾的元素
* 语法： $("A[属性名 *='值']")
匹配给定的属性是以包含某些值的元素
3. 复合属性选择器
* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
*
4. 过滤选择器
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 非元素选择器
* 语法： :not(selector) 不包括指定内容的元素
4. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
5. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
6. 等于索引选择器
* 语法： :eq(index) 指定索引元素
7. 大于索引选择器
* 语法： :gt(index) 大于指定索引元素
8. 小于索引选择器
* 语法： :lt(index) 小于指定索引元素
9. 标题选择器
* 语法： :header 获得标题（h1~h6）元素，固定写法
*
5. 表单过滤选择器
1. 可用元素选择器
* 语法： :enabled 获得可用元素
* 不可用的框：<input type="text" value="不可用值1" disabled="disabled">
2. 不可用元素选择器
* 语法： :disabled 获得不可用元素
* 可用的框：<input type="text" value="可用值1" >
注意：可用和不可用，看一下05-表单过滤选择器.html即知。
3. 选中选择器
* 语法： :checked 获得单选/复选框选中的元素
4. 选中选择器
* 语法： :selected 获得下拉框选中的元素
5.DOM操作
1.内容相关的操作
1.html()：获取/设置元素的标签体内容 <a><font>内容</font></a>
<a><font>内容</font></a> ---- <font>内容</font>
2.text()：获取/设置元素的纯文本标签体内容
<a><font>内容</font></a> ---- 内容
3.val()：获取/设置元素的value属性值
2.属性操作
1.通用的属性操作
Stringattr()：获取/设置元素的属性值
jQueryremoveAttr()：删除元素的属性
prop()：获取/设置元素的属性值
removeProp()：删除元素的属性
* attr和prop的区别：
1.如果你操作的是元素的固有属性，则建议使用prop。（因为可以自己定义属性）
2.如果操作的时自定义的属性，则建议使用attr。
2.对class属性操作
addClass()：添加class属性值
removeClass()：删除class属性值
toggleClass()：切换class属性：如果存在（不存在）就删除（添加）一个类。
toggleClass("one")：判断如果元素对象上存在class="one"，则将属性值one
删除掉；如果元素对象上不存在class="one"，则添加。
css()：css("background-color", "red")
3.CRUD操作
* append()：父元素将子元素追加到末尾
对象1.append(对象2)：将对象2添加到对象1元素内部，并且添加到末尾
* prepend：父元素将子元素追加到开头
对象1.append(对象2)：将对象2添加到对象1元素内部，并且添加到开头
* appendTo()：
对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾。
* prependTo()：
对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头。
* after()：添加元素到对应的元素后面。
对象1.after(对象2)：将对象2添加到对象1后面，两者关系平级
* before()：添加元素到对应的元素前面。
对象1.before(对象2)：将对象2添加到对象1前面，两者关系平级
* insertAfter():
对象1.insertAfter(对象2)：将对象1添加到对象2后面，两者关系平级
* insertBefore():
对象1.insertBefore(对象2)：将对象1添加到对象2前面，两者关系平级
* remove()：删除元素
对象.remove()：将对象删除掉。
* empty()：清空元素的所有后代元素。
对象.empty()：将对象的所有后代元素清空，保留当前对象以及其属性结点。
6.案例
