**JavaScript框架_JQuery基础 *

今日内容

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是一个方法。