JQ (jQuery)

一、jQuery概述
1、什么是jQuery
	javaScript Query: JS的框架
	jQuery：是一门轻量的、免费开源的JS函数库(JS文件)
	jQuery可以极大地简化JS代码
	jQuery核心思想: 写的更少,但做的更多

	轻量的：一个框架或者技术对我们项目的侵入程度是非常低的（反过来说，我们的项目或代码对该技术的依赖程度是非常低的）

2、jQuery优势
	1)可以极大地简化JS代码
	2)可以像CSS选择器一样获取元素
	3)可以通过修改CSS样式来控制页面的效果
		div.style.width = "100px";
		div.style.height = "100px";
		div.style.backgroundColor = "red";
	4)可以兼容常用浏览器(谷歌/火狐/苹果/欧朋)
	
3、如何引入jQuery
	在head或body标签内部添加script标签,通过script标签引入jQuery的函数库文件
	<!-- 引入jQuery的函数库文件 -->
	<script src="js/jquery-1.8.3.min.js"></script>
	
	在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败
	Uncaught ReferenceError: $ is not defined
	上面的错误说明jQuery引入失败了!
	
4、文档就绪事件函数
	文档就绪事件函数: 该函数会在浏览器加载完所有的html元素后立即执行
	1、JS提供的文档就绪函数:
	window.onload = function(){
		//这里的代码会在浏览器加载完所有的html元素后立即执行
	}

	2、jQuery提供的文档就绪函数:
	简写形式:
	$(function(){
		//这里的代码会在浏览器加载完所有的html元素后立即执行
	})
	
	完整写法:
	$(document).ready(function(){
		//这里的代码会在浏览器加载完所有的html元素后立即执行
	});

	3、什么时候该使用文档就绪事件函数?
	如果要获取元素,获取元素的代码执行时,元素还没有被浏览器加载,肯定是获取不到的!
	此时,可以将获取元素的代码放在文档就绪事件函数中,因为这个函数是在浏览器加载完所有的html元素后立即执行,此时所有元素都已经被加载了,在这个函数中获取任何元素都可以获取到!
	
	只要获取元素的代码是在元素加载后执行,就可以获取(不管使用什么方式!)
	
二、jQuery选择器
1、基本选择器
	1)元素名选择器
		$("div") -- 匹配所有的div元素
		$("span") -- 匹配所有的span元素
	2)class选择器
		$(".mini") -- 匹配所有class值为mini的元素
		$("span.mini") -- 匹配所有class值为mini的span元素
	3)ID选择器
		$("#one") -- 匹配id值为one的元素
	4)多元素选择器
		$("div,span,.mini,#one") -- 匹配所有的div,所有的span,以及所有class为mini,以及id值为one的元素
	
2、层级选择器
1)后代选择器
	$("div span") -- 匹配所有div内部的span元素
	$("#box1 input") -- 匹配id值为box1元素内部的所有input元素

2)相邻兄弟选择器
	相邻兄弟:如果两个元素是紧挨着,并且具有相同的父元素,这两个元素就是相邻兄弟
	可以通过相邻兄弟选择器选中后面紧邻的兄弟元素
	$("#two+span") -- 匹配id值为two的元素后面紧邻的span兄弟元素
	$("#two").next("span") -- 匹配id值为two的元素后面紧邻的span兄弟元素
	$("#two").prev("span") -- 匹配id值为two的元素前面紧邻的span兄弟元素
	-----------------------
	<span>000</span>
	<div id="#two"></div>
	<span>111</span>
	-----------------------
	$("#two").nextAll() -- 匹配id为two的元素后面所有的兄弟元素
	$("#two").nextAll("div") -- 匹配id为two的元素后面所有的div兄弟元素
	$("#two").prevAll("div") -- 匹配id为two的元素前面所有的div兄弟元素
	$("#two").siblings("div") -- 匹配id为two的元素前、后所有的div兄弟元素
3、基本过滤选择器
	根据下标匹配元素:
	$("div").eq(n) -- 表示匹配所有div中的第n+1个div元素
	$("div:eq(n)") -- 表示匹配所有div中的第n+1个div元素
	
	$("div:first") -- 匹配所有div中的第一个div元素
	$("div:eq(0)") -- 匹配所有div中的第一个div元素
	
	$("div:last") -- 匹配所有div中的最后一个div元素
	$("div:eq(-1)") -- 匹配所有div中的最后一个div元素

4、表单选择器
	$(":input") -- 匹配所有的表单项元素(包括input、select、textarea、button)
	$(":text") -- 匹配所有普通文本输入框
	$(":password") -- 匹配所有密码输入框
	$(":radio") -- 匹配所有单选框
	$(":checkbox") -- 匹配所有复选框

	$(":radio:checked") -- 匹配所有被选中的单选框
	$(":checkbox:checked") -- 匹配所有被选中的复选框
	
5、补充:
	1、JS为b1按钮绑定点击事件
	document.getElementById("b1").onclick = function(){
		alert("b1按钮被点击了...");
	}

三、jQuery案例
	1、创建表格案例
	2、仿QQ好友分组
	3、模拟员工信息管理系统

	调错步骤:
	1)按f12,看浏览器的控制台(Console)窗口中有没有错误提示
		如果有,根据错误信息进行排查!
	2)也可以在程序中添加 debugger 断点!

四、jQuery总结
	
0.each函数
	each函数: 对前面选择所选中的元素进行遍历,每次从中获取一个元素,并调用其中的function
	each中的function函数:每次each函数从选择器中获取元素后都会调用该函数,
		可以接收两个参数: 第一个参数是当前遍历的元素的下标;
					第二个参数是当前正在遍历的元素(JS对象);
	示例:
	$("table tr").each(function(i,ele){
		//...
	})

1、html元素操作
	(1)创建html元素
		$("<div></div>") -- 创建一个div元素,返回一个jQuery对象
		$("<div>这是一个div元素</div>") -- 创建一个包含内容的div元素,返回一个jQuery对象
		$("<input type='text'/>") -- 创建文本输入框,返回一个jQuery对象
	
	(2)添加子元素 -- append()
		$("body").append("<table><tr><td>这是一个td元素</td></tr></table>");
		-- 往body中添加一个表格元素
		
		var $div = $("<div>这是一个div元素</div>");
		$("body").append( $div ) -- 往body中添加一个div元素
		
	(3)删除元素 -- remove()
		$("div").remove() -- 删除所有匹配的div元素
	
	(4)替换元素 -- replaceWith()
		$("div").replaceWith("<p>我是来替换div的p元素!!</p>")
		
		
2、html内容 及 值的操作
	<div>div111</div>
	<input type="text"/>
	<select>...</select>
	
	html()函数 -- 获取元素的所有内容(包裹在开始标签和结束标签中的所有内容)
		如果通过选择器匹配了多个元素,只能获取第一个元素的内容
		html()函还可以设置元素的内容,如果通过选择器匹配了多个元素,则会给所有元素设置内容
		-- 在js中对应的是innerHTML属性
		
	text()函数 -- 获取元素中的所有文本内容(值获取文本,不获取标签)
		如果通过选择器匹配了多个元素,可以将所有元素内部的文本都返回
		text()函数还可以为元素的设置文本内容(只能设置文本)
		-- 在js中对应的是innerText属性(这个属性在部分浏览器中不兼容)
	
	val()函数 -- 获取表单项元素的value值 或者是 为表单项元素设置value值
		表单项元素: input/select/option/textarea

	
3、html元素属性 或者 css属性操作
	prop()函数 -- 获取元素的某一个属性值,或者为元素设置属性值
	attr()函数 -- 可以获取元素的属性值,或者为元素设置属性值
	prop()和attr()的区别:
	(1) prop函数是在jquery1.6版本之后才出现,用于获取或设置元素的属性(固有属性)值,
			比如: input元素的id,class,name,type等属性都是固有属性
			比如: 为input指定一个aaa属性,这个叫做自定义属性
		attr函数是在jquery1.6版本之前就有的函数,用于获取或设置元素的属性(自定义属性)值
		
	css()函数 -- 可以获取或设置元素的css样式
	
4、动画函数
	show() -- 设置元素为显示状态, 等价于 css("display", "block|inline");
	hide() -- 设置元素为隐藏状态, 等价于 css("display", "none");
	toggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态
	
	slideToggle() -- 切换元素的显示状态, 如果元素本身是显示的,则会变成隐藏状态,如果元素本身是隐藏的,则会变成显示状态

5、parent()/parents()/find()
	parent() -- 获取当前元素的父元素, 类似于js中的 parentNode属性
	parents() -- 获取当前元素的所有的祖先元素
		$(":checked").parent().parent();
		$(":checked").parents("tr")
	
	find() -- 获取当前元素内部指定的后代元素
	$("div").find("span") -- 获取所有div元素内部的span元素
	$("div span") -- 获取所有div元素内部的span元素