jquery速查

jQuery：
	是一个优秀的JavaScript框架，封装了对js，css、DOM操作,提供了简洁一致的API。
	解决了浏览器的兼容问题
	兼容css3及各种浏览器，jQuery2.x开始不支持IE，1.x支持。 2006.1发布 write less，do more
1、jQuery的使用步骤
	1》引入jQuery的js文件
	2》使用选择器选中DOM节点
	3》调用API操作节点
	**必须在自定义的js前引入jQuery的js文件
2、jQuery对象：
	1、jQuery选择器选中的目标是一个jQuery对象
	2、jQuery对象本质上是一个DOM数组
	3、jQuery对象只能调用jQuery的API，jQuery的API只能被jQuery对象调用
		var $ps = $("p");得到的是jQuery对象，本质是所有p段落标签数组即$ps中的每一个元素是p标签元素，
		只能调用jQuery提供的API   
	4、大部分方法返回值类型是jQuery类型，方法可以连续调用 jQuery对象.方法().方法().方法()
		赋值的方法、取值的方法若返回的是节点，一般返回值是jQuery对象
		取值的方法若返回的是具体的数据（字符，数字）等就是js内置对象
		可以随时打桩看此对象：有[]就是jQuery
	5、相关方法
		obj.length; 获取jQuery对象中DOM数组的长度
		obj.get(index)/obj[index]; 获取jQuery对象中DOM数组的下标是index的元素
		$(DOM对象);将DOM对象转为jQuery对象
		//jQuery读写宽高的方式
		//$obj.width()/$obj.width(值)
		//$obj.height()/$obj.height(值)
		if($(img).width()=="218"){
			$(img).width("250").height("250");
		}else{
			$(img).width("218").height("218");
		}
3、jQuery选择器：选择页面上的元素,使内容和行为分离	
	1》基本选择器：
		元素选择器：$("标签名") 选择指定标签的元素
		类选择器：$(".classname") 根据class属性选择元素
		id选择器：$("#id") 根据id选择元素
		群组选择器：$("标签名,#id,...") 选择指定所有选择器
	2》层次选择器：
		$(父选择器   子选择器) 选择父元素下所有的子元素
		$(父选择器>子选择器) 选择父元素下所有的直接子元素
		$(选择器1+选择器2) 选中选择器1元素的下一个满足选择器2的元素
		$(选择器1~选择器2) 选中选择器1元素之后的所有满足选择器2的元素--不包含满足条件的孙子元素
	3》过滤选择器： 例如：以下过滤器  结合其他过滤器使用	
		1》基本过滤选择器：li:
			:first 第一个元素		:last 最后一个元素
			:not(选择器a) 把选择器a排除在外  :even 挑选偶数行   odd 挑选奇数行
			:eg(index)	下标等于index的元素
			:gt(index)	下标大于index的元素
			:lt(index)	小标小于index的元素
		2》内容过滤选择器：li:
					  :contains("文本") 选择含给定文本的元素	
					  :empty	选择不包含子元素或文本的元素
		3》可见性过滤器：li:
					:hidden 选择隐藏的元素	visible  选择所有可见元素
		4》属性过滤器：前面加	li
				   [属性名]	选择具有该属性的元素
				   [属性名=值] 选择 属性=值 的元素
				   [属性名!=值] 选择属性不等于值的元素
		5》状态过滤选择器：主要针对表单控件
			:enabled  选择可用元素			
			:disabled 选择不可用元素（readonly 只读 ，若有值但是该值可以提交给服务器  disabled 不可用，若有值不能提交给服务器）
			:checked	选择选中的checkbox或radio	
			:selected	选择选中的option
	4》表单选择器：
		:text 选择文本框	:password 选择密码框	:radio 选择单选框
		:checkbox 选择多选框   :submit 选择提交按钮	:reset 选择重置按钮
		:button 选择普通按钮	:file 选择文件框	:hidden 选择隐藏框
jQuery操作DOM
	jQuery对象只能调用jQuery的API，jQuery的API只能被jQuery对象调用
	jQuery对象===================DOM数组
	    objs是jQuery对象，中的每一个元素objs[i]是DOM元素
	    jQuery对象====》DOM       objs[i]
	    DOM======》jQuery对象		$(objs[i])
	         注意：.eq(i)===等价于===>$(objs[i]) 获取的是jQuery对象
	1》读写节点
		obj.html()/obj.html("<p>你好！</p>") 读写节点的HTML文本---相当于 innerHTML
		obj.text()/obj.text("你好") 读写节点的文本---相当于 innerText
		obj.attr("属性名")/obj.attr("属性名","属性值")  读/写节点的属性值
		obj.val()/obj.val("属性值") 读写节点的value属性值-------相当于value
	2》增删节点
		增加：
			$("节点内容")------创建节点  $("<p>你好！</p>")
			parent.append(obj)  作为父节点下最后一个子节点添加进来
			parent.prepend(obj)  作为父节点下第一个子节点添加进来
			bother.after(obj) 	作为bother节点的后一个节点添加进来
			bother.before(obj) 	作为bother节点的前一个节点添加进来
		删除：
			obj.remove() 直接删除节点	
			obj.remove(选择器) 删除满足条件（选择器）的节点
			obj.empty() 清空节点内容,不删除节点
	3》遍历（查询）节点：
		children()         遍历直接子节点
		next()			       遍历下一个节点
		prev()			       遍历上一个节点
		siblings()         遍历所有兄弟节点
					-----以上方法可以带参数，参数是选择器，表示查询的节点要满足参数中的选择器
		parent()		       遍历父节点
		find(选择器)		       遍历满足选择器的所有节点
	4》样式操作：
		addClass(" ")  追加样式
		removeClass(" ") 删除样式	removeClass() 删除所有样式	class属性可以设置多个样式值，用空格可开
		toggleClass(" ")	切换样式	在原有样式与设置样式之间进行交替变换
		hasClass(" ")	判断是否有某样式 返回boolean值
		css(" ")			读取css的值
		css(" "," ";" "," ";...)设置多个样式值
jQuery对事件的处理:
	1、$(function(){});
		$()内的function在页面加载后被调用，此时的$()等价于window.onload=function(){}
		onload只能写一次，后写覆盖之前的，只有一份有效，$()可以写多次都有效
	2、绑定事件：$obj 是jQuery对象
		1、$obj.bind(事件类型,事件处理函数);事件类型不需要写前面的on
			如：$obj.bind("click",fn);表示触发单击事件，
			可以简写为：$obj.click(function(){实现代码});
		2、事件触发时会自动传入事件对象event ，可以声明参数接受
			$obj.click(function(e){
							实现代码
							console.log(e);
							});
			e.target;获取事件源：返回的是DOM对象**
			e.pageX   e.pageY   获取鼠标坐标
				
		3、事件冒泡：
			事件由内向外依次传播。
			e.stopPropagation();取消事件传播
	3、合成事件：
		1、hover(mouseenter,mouseleaver);鼠标悬停离开事件,需要绑定悬停来开两个函数，
			第一个是鼠标悬停时调用函数，第二个是鼠标离开时调用函数
			等价于 onmouseover和onmouseout 事件之和
				例：$("img").hover(
						function(){
							//console.log(e.target);
							//console.log(this);
							$(this).addClass("big");
						},//鼠标悬停是调用
						function(){
							$(this).removeClass("big");
						});//鼠标离开时调用
		2、toggle();在隐藏和显示之间切换
			$("#b1").click(function(){
				$("img").toggle();
			});
	4、模拟事件：用jQuery代替人触发某事件
		$obj.trigger(事件类型);（页面加载后）自动触发事件
		$obj.trrigger("click");写到$()中，页面加载后自动触发单击事件
		可以简写为   $obj.click();

jQuery动画
	1、显示隐藏动画效果：通过改变元素的宽高和透明度来显示隐藏元素
		show()/hide()
		show(执行时间,回调函数)/hide(执行时间,回调函数)，，多长时间执行完成，执行完成后再执行回调函数
												回调函数可以没有
	2、上下滑动式的动画实现：通过改变元素的高度来显示隐藏元素,不改变透明度
		slideDown()/slideUp()
		slideDown(执行时间,回调函数)/slideUP(执行时间,回调函数)
	3、淡入淡出式的动画效果：通过改变透明度opacity实现,不改变宽高
		fadeIn()/fadeOut()
		fadeIn(时间,回调函数)/fadeOut(时间,回调函数)		
	4、自定义动画效果：
		animate(偏移位置,执行时间,回调函数):动画的过程以原始为准设置偏移位置，即相对定位为准
			永远以原始位置为准
			偏移位置：{'top':'100px'}  动画执行后元素的样式
			执行时间：执行从开始到结束要的时间  可以没有
			回调函数：动画执行结束后执行的函数 可以没有

jQuery序列化表单的方法
1、$("#表单id").serialize();
	1.我们看到输出的结果为表单项中的各表单元素的name和value值
	2.格式是以url参数的形式，第一个参数前面没有&符号
2、$("#表单id").serializeArray();