JQuery的基本操作

JQurey

1. JQuery 基础：
	1. 概念
		* jQuery是一个优秀的javascrip库，它以写更少的代码、做更多的事情为宗旨。jQuery是一个快速、简洁的javascript库，使用户能够	方便地遍历HTML Documents、操作DOM、处理事件、实现动画效果和提供Ajax交互
		
		* JavaScript框架：本质就是一些js文件，封装了js的原生代码
	2. 快速入门
		1. 步骤：
			1. 下载JQuery
				1. maven项目：	
					* <dependency>
					      <groupId>org.webjars</groupId>
					      <artifactId>jquery</artifactId>
					      <version>3.1.1</version>
					  </dependency>
			2. 普通项目直接去官网下载
			3. JQuery-xxx.js和JQuery-xxx.min.js的区别：
				* JQuery-xxx.js：是开发版本，给程序员看的，有良好的的缩进和注释，体积大一些。
				* JQuery-xxx.min.js：生产版本。在程序中使用，没缩进，体积更小，程序加载更快。
		2. 导入JQuery的js文件：导入min.js文件
		3. 使用
			var div = $("#div1");
			alert(div.html());
	3. JQuery对象和js对象的区别与转换
		1. JQuery对象在操作是，更加方便。
		2. JQuery对象和js对象方法不通用
		3. 两者之间相互转换
			1. JQuery --> js: js对象[索引] 或者 jq对象.get（索引）
			2. js --> JQuery：$(js对象)
	4. 选择器：筛选具有相似特征的元素（标签）
		1. 基本语法学习：
			1. 事件绑定
				* $("#btn").click(function(){
					* alert("abc ");
				* });
			2. 入口函数
				1. js:window.onload = function(){}
				2. JQuery:$(function{ });

				*  window.onload 和 $(function) 的区别
					*  window.onload 只能定义一次后面的会将前面的覆盖掉
					*  $(function) 可以定义多次的。
			3. 样式的控制
				$("#div1").css("background-color","red");
				$("#div1").css("backgroundColor","red");这样写的好处是可以吧鼠标放到backgroundColor上面看有无下划线判断是否写错
		2. 分类
			1. 基本选择器
				1. 标签选择器(元素选择器)
					* 语法：$("p") 所有 <p> 元素
				2. id选择器
					* 语法：$("*")	所有元素
				3. 类选择器
					* 语法：$(".intro")	所有 class="intro" 的元素
				4. 并集选择器
					* 语法：$("选择器1，选择器2....") 获取多个选择器选中的元素
			2. 层级选择器
				1. 后代选择器
					* 语法：$("A B")	选择A元素内部的所有B元素
				2. 子选择器
					* 语法：$("A > B") 选择A元素内部的所有B子元素
			3. 属性选择器
				1. 属性名选择器
					* 语法：$("A[属性名]")	包含指定属性的选择器
				2. 属性选择器
					* 语法：$("A[属性名 = '值']")	包含指定属性等于指定值的选择器 
				3. 复合属性选择器
					* 语法：$("A[属性名='值'][]...")	包含多个属性条件的选择器
			4. 过滤选择器
				1. 首元素选择器
					* 语法：	$("p:first")	第一个 <p> 元素
				2. 尾元素选择器
					* 语法：$("p:last")	最后一个 <p> 元素
				3. 非元素选择器
					* 语法：$("input:not(:empty)")	所有不为空的 input 元素
				4. 偶数选择器
					* 语法：$("tr:even")	所有偶数 <tr> 元素
				5. 奇数选择器
					* 语法：$("tr:odd")	所有奇数 <tr> 元素
				6. 等于索引选择器
					* 语法：$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
				7. 大于索引选择器
					* 语法：:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
				8. 小于索引选择器
					* 语法：$("ul li:lt(3)")	列出 index 小于 3 的元素
				9. 标题选择器
					* 语法：$(":header")	所有标题元素 <h1> - <h6>

			5. 表单过滤选择器
				1. 可用元素选择器
					* 语法：:enabled 获取可用元素
				2. 不可用元素选择器
					* 语法：:disabled 获取不可用元素
				3. 选中选择器
					* 语法：:checked 获取单选/复选框选中的元素
				4. 选中选择器
					* 语法：:selected 获取下拉框选中的元素
	5. DOM操作
		1. 内容操作
			1. html()：获取/设置元素的标签体内容<a><font>内容</font></a> ->可用获取 <font>内容</font>
			2. text()：获取/设置元素的标签体内纯文本内容<a><font>内容</font></a> ->可用获取 内容
			3. val()：获取/设置元素的value属性值
		2. 属性操作
			1. 通用属性操作
				1. attr（）：获取/设置元素属性
				2. removeAttr()：删除属性
				3. prop()：获取/设置元素的属性
				4. removeProp()：删除属性
				
				*attr和prop的区别？
					1. 如果操作的是元素固有的属性，则建议使用prop
					2. 如果操作的是元素自定义的属性，则建议使用attr
			2. 对class属性的操作
				1. addClass():添加class属性值
				2. removeClass()：删除class属性值
				3. toggleClass()：切换class属性值
					* toggleClass("one")：判断元素对象上是否存在one这个class存在则删除，不存在则添加，class="one"。
		3. CRUD操作
			1. append():父元素将子元素追加到末尾
				* 对象1.append(对象2)：将对象2添加到对象1元素的内部，并且在末尾
			2. prepend():父元素将子元素追加到开头
				* 对象1.append(对象2)：将对象2添加到对象1元素的内部，并且在开头
			3. appendTo()
				* 对象1.append(对象2)：将对象1添加到对象2元素的内部，并且在末尾
			4. prependTo()
				* 对象1.append(对象2)：将对象1添加到对象2元素的内部，并且在开头

			5. after():添加元素到元素后边
				* 对象1.after(对象2):将对象2添加到对象1后边，对象1和对象2是平级关系
			6. before()添加元素到元素前边
				* 对象1.after(对象2):将对象2添加到对象1前边，对象1和对象2是平级关系
			7. insertAfter（）：
				* 对象1.after(对象2):将对象1添加到对象2后边，对象1和对象2是平级关系 
			8. insertBefore()
				* 对象1.after(对象2):将对象1添加到对象2前边，对象1和对象2是平级关系

			9. remove()：移除元素
				* 对象.remove():讲对象删掉
			10. empty():清空元素的所以后代元素
				* 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点