版权声明：文章为作者自己原创文章，转载请注明出处。 https://blog.csdn.net/qq_37128049/article/details/85272977
今日内容
1.JQuery基础：
1.概念
2.快速入门
3.JQuery对象和JS对象区别于转换
4.选择器
5.DOMc操作
6.案例
JQuery基础：
1.概念：一个JavaScript框架，可以简化JavaScript的书写。
* jQuery 是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。宗旨是:写更少的代码,做更多的事情（Write Less,DO More）。它封装JavaScriot常用的功能代码，提供一种渐变的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax的交互
* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。
2.快速入门
1.下载JQuery：已经下载了的。
* 版本：
* 1开头的版本兼容ie678，使用最为广泛的，官方只做bug维护（工作中经常用到的。）
* 不兼容ie678，很少有人使用
* 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
注意区别：
* jquery-xxx.js:开发版本。给程序员看的，有良好的缩进和注释。体积更大一点。
* jquery-xxx-min.min.js:生产版本。程序中使用，没有缩进。体积更小一些。程序加载更快。
2.导入JQuery的js文件：导入min.js文件
3.使用
3.JQuery对象和JS对象区别于转换
* JQuery对象在操作时，更加方便
* JQuery对象和js对象方法不通用的。
* 两者相互转换。
* jq-->js：jq对象[索引]或者jq对象.get(索引)
* js-->jq: $(js对象）
-- jQuery对象在操作时，更加方便。
-- jQuery对象和js对象方法是不通用的。
-- 两者相互转换
* jq和js进行互相转换 一般是js对象转换为jq。
4.选择器 ：筛选具有相似特征的元素（标签）
1.基本语法学习：
1.事件绑定：
* $("#b1").click(function(){
* alert("abc");
* });
2.入口函数：jquery入口函数（dom函数加载完成之后执行该函数中的代码）
* $(function(){
* 代码...
* })
window.onload与$(function)的区别：
* window.onload只能定义一次，如果定义多次，后边的会将前边的覆盖掉。
* $(function)可以定义多次。
3.样式控制：
* $("#div1").css("background-color","red");
2.分类：
1.基本选择器：
1.标签选择器（元素选择器）
* 语法：$("html标签名")获得所有匹配标签名称的元素
* $("#one").css("backgroundColor", "pink")
2.id选择器
* 语法：$("#id的属性值") 获得与制定id属性值匹配的元素
* $(".mini").css("backgroundColor","pink")
3.并集选择器：
* 语法：$("选择器1，选择器2...")获取多个选择器选中的所有元素
* $("span,#two").css("backgroundColor","pink")
4.类选择器：
* 语法：$(".class的属性值")获得与指定的class属性值匹配的元素
* $(".class的属性值")获得与指定的class属性值匹配的元素。
2.层级选择器：
1.后代选择器：
* 语法：${"A B"} 选择A元素内部的所有B元素
2.子选择器：
* 语法：${"A>B"} 选择A元素内部的所有B子元素
3.属性选择器
1.属性名称选择器
* 语法：${"A[属性名]"} 包含指定属性的选择器
2.属性选择器
* 语法： ${"A[属性名='值']"} 包含指定属性等于值的选择器
3.复合属性选择器
* 语法: ${"A[属性名='值'][]..."} 包含多个属性条件的选择器
4.过滤选择器：
1.首元素选择器：
* 语法：first获得选择的元素中的第一个元素
2.尾元素选择器：
* 语法：last获得选择的元素中的最后一个元素
3.非元素选择器：
* 语法：not（selector）：不包括指定内容的元素
4.偶数选择器：
* 语法：even 偶数，从0开始计数
5.奇数选择器：
* 语法：odd 奇数，从0开始计数
6.等于索引选择器：
* 语法：eq（index）指定索引元素
7.大于索引选择器：
* ge（index）大于指定索引元素
8.小于索引选择器
* 语法：ge（index）小于指定索引元素
9.标题选择器：
* 语法：header获得标题（h1~h6）元素，固定写法
5.表单过滤选择器
1.可用元素选择器
* 语法：enabled 获得可用元素
2.不可用元素选择器
* 语法：disabled 获得不可用元素
3.选中选择器
* 语法：checked 获得单选/复选框中的元素
4.选中选择器
* 语法：selected 获得下拉框选中的元素
5.DOM操作：
1.内容操作：html和text标签体内容被修改的时候，<a>标签和<font>标签等都会被删除。
* html：获取/设置元素的标签体内容 <a><font>内容<font></a>
* text:获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> -->内容
* val：获取/设置元素的value属性值。
2.属性操作：
1.通用属性操作
1.attr（）：
2.removeAttr():
3.prop():
4.RemoveProp():
* attr和prop的区别？
* 如果操作的是元素的固有属性，则建议使用prop
* 如果操作的是元素自定义的属性，则建议使用attr
2.对class属性操作
1.addClass（）：添加class属性值
2.temoveClass（）：删除class属性值：因为可以设置多个class属性值，所以只能删除一个。
3.toggleClass（）：切换class属性
* toggleClass("one"):判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加。
4.css（）：
3.CRUD操作：（增删改查方法）
1.append():父元素将子元素追加到末尾
* 对象1.append（对象2）： 将对象2添加到对象1元素内部，并且在末尾
2.appendTo（）：
* 对象1.appendTo(对象2)：将对象1添加到对象2内部
3.prepend（）：父元素将子元素追加到开头
* 对象1.prepend（对象2）：将对象2添加到对象1元素内部，并且在开头
4.prependTo（）：
* 对象1.prependTo（对象2）：将对象1添加到对象2内部，并且在开头
5.after（）：添加元素到元素后边
* 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系。
6.before（）：添加元素到元素前边
* 对象1.before（对象2）：将对象2添加到对象1前边。对象1和对象2是兄弟关系
7.inserAfter（）
* 对象1.inserAfter（对象2）：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8.insertBefore（）
* 对象1.insertBefore（对象2）：将对象2添加到对象1前边。对象1和对象2是兄弟关系。
9.remove（）：移除元素
* 对象.remove():将对象删除掉
10.empty（）：清空元素的所有后代元素。
* 对象.empty（）：将对象的后代元素全部清空，但是保留当前对象
6.案例
* 如果方法是通过事件注册的，比如点击事件，就要考虑是否方法需要在onload外面，因为在标签内注册的点击事件方法，只有放外面才能执行。
click是单击事件 dblclick是双击事件
setTimeout(test,2000); 这里test是这个方法的对象。
setTimeout("test()",2000) 这是test是一个方法。