JQuery基础

JQuery：

	1 $表示jQuery的别名，$()等效于jQuery()
	
	2 当DOM载入之后，jQuery才能开始读写和处理DOM，所以应该使用ready事件作为处理HTML文档的开始。
		$(document).ready(function(){		简写：		$(function(){
			//jQuery代码									//jQuery代码
		});												});
		
		注意：$(document).ready()方法可以简写为$()方法来表示：
		说明：
			1）类似于JavaScript的window.onload事件处理函数，不过jQuery的ready事件要先于onload事件被激活。
				注意：$(document).ready()在DOM载入之后，当jQuery框架下载完毕后就执行；而window.onload必须在页面全部加载完毕(包含图片等)后才能执行。
			2）类似于JavaScript代码应该都放在window.onload事件处理函数中，jQuery代码也应该都放在$()函数中。
			3）window.onload函数只能编写一次(如果写了多个，则最后一个覆盖前面的)，而$(document).ready()可以编写多次
				window.onload = function(){
					// JavaScript代码
				};
	
	3 jQuery对象：DOM对象经过jQuery框架包装后产生的一个新对象，这个新对象的结构类似一个数组。
		注意：jQuery框架为jQuery对象定义了自己的方法和属性，jQuery对象不能直接调用DOM对象的方法，同样，DOM对象也不能直接调用jQuery对象的方法。
		说明：jQuery对象是多个DOM对象的集合，即DOM元素的数组，而DOM对象就是一个DOM元素
	
	4 jQuery的选择器：
		
		用法：$("选择器或选择器组")，返回jQuery对象
		
		基本选择器（与css的基本选择器相同）：
			
			$("#id")		选择指定id的一个元素		等价于    document.getElementById("id");
			$(".class")		选择指定class的所有元素
			$("tagName")	选择指定名称的所有元素		等价于    document.getElementsByTagName("tagName");
			$("*")			选择指定范围内的所有元素
			$("slector1, selector2, selectorN")			分别选择每个选择器匹配的元素，然后返回合并后的所有元素
			
		层次选择器：
			$("ancestor descendant")				根据祖先元素匹配所有的后代元素
			$("parent > child")						根据父元素匹配所有的子元素
			$("prev + next")或prev.next()			匹配所有紧接在prev元素后的相邻元素
			$("prev ~ siblings")或prev.nextAll()	匹配prev元素之后的所有兄弟元素
			prev.siblings()							匹配prev元素(之前和之后)的所有兄弟元素
			
		过滤选择器：										从需要过滤的集合中获取：
		
			基本过滤：
			$("selector:first")或$("selector").first()		第一个元素
			$("selector:last")或last()						最后一个元素
			$("selector:eq(index)")							等于指定索引值的元素，索引号从0开始			
			$("selector:gt(index)")							大于指定索引值的元素，索引号从0开始
			$("selector:lt(index)")							小于指定索引值的元素，索引号从0开始
			
			可见性过滤：
			$("selector:hidden")							所有不可见元素(或者type为hidden的元素)
			$("selector:visible")							所有的可见元素
			
			内容过滤：
			$("selector:not(selector2)")					除给定选择器外的所有元素
			$("selector:contains(text)")					包含指定文本的元素
			$("selector:has(selector2)")					含有选择器(selector2)所匹配的元素的元素
			$("selector:empty")								所有不包含子元素(或文本)的空元素
			$("selector:parent")							含有子元素(或文本)的元素
			
			$("selector:header")							所有标题类型的元素，如h1、h2···
			$("selector:animated")							正在执行动画效果的元素
			$("selector:")
			
			属性过滤：
			$("selector[attribute]")						包含attribute属性的元素
			$("selector[attribute=value]")					attribute属性的值为value的元素
			$("selector[attribute^=value]")					attribute属性的值以value开头的元素
			$("selector[attribute$=value]")					attribute属性的值以value结尾的元素
			$("selector[attribute*=value]")					attribute属性的值中包含value的元素
			
			表单对象属性过滤：
			$("#form input:checked")						表单中所有被选中的input元素
			$("#form option:selected")						表单中所有被选中的option的元素
			$("#form input:enabled")						表单中所有属性为可用的input元素
			$("#form input:disabled")						表单中所有属性为不可用的input元素

		表单选择器：
			$("#form :input")								所有的imput、textarea、select元素
			$("#form :text")								所有的单行文本框
			$("#form :XXX")									所有的XXX元素，包括password、radio、checkbox、submit、image、reset、button、file
	
	5 jQuery对象转成DOM对象 
		两种转换方式：[index]和.get(index); 
			(1)jQuery对象是一个数组对象，可以通过[index]的方式来得到相应的DOM对象。
			(2)jQuery本身提供get(index)方法，可以得到相应的DOM对象。
	
	6 DOM对象转成jQuery对象
		把DOM对象用$()包装起来，就可以获得一个jQuery对象了。即 $(DOM对象)
	
	7 jQuery操作DOM
	
		元素属性操作：
			获取元素的属性：
				attr("AttributName")
			修改元素的属性：
				attr("AttributName", "value")
				attr({AttributName1:"value1", AttributName2:"value2"})
			删除元素的属性：
				remove("AttributName")
				
		元素内容操作：
			获取元素的HTML内容：
				html()
			设置元素的HTML内容：
				html("value")
			获取元素的文本内容：
				text()
			设置元素的文本内容：
				text("value")
			
			获取元素的值(常用于表单中获取对象的值)：
				val()
			设置元素的值(常用于表单中设置对象的值)：
				val("value")
			获取下拉列表里所有被所选中的值
				$("#select1").val().join(",");
				
		元素样式操作：
			直接设置样式：
				css("name", "value")
			增加CSS类别：
				addClass("class1 class2 ...")
			类别切换：
				toggleClass("class")
				说明：
					当元素中含有名称为class的CSS类别时，删除该类别；
					当元素中没有名称为class的CSS类别时，增加一个该名称的类别。
			删除类别：
				removeClass("class1 class2 ...")

		获得DOM元素：
			获得所有后代元素
				find( expr )
			获得下一级元素
				children( expr )
			获得上一级元素
				parent( expr )
			选择同级元素（兄弟）
				siblings( expr )
			选择兄元素（前一个）
				prev( expr )
			选择弟元素（后一个）
				next( expr )
			选择所有上级元素（父亲、爷爷..注:叔叔不算）
				parents( expr )
				
	8 jQuery的插件机制
		1)jQuery.extend(object);
			说明：扩展jQuery对象本身。(常用于：在jQuery对象本身(即jQuery命名空间本身)上增加新函数)
			例子：
				jQuery.extend({
					min: function(a, b) { return a < b ? a : b; },
					max: function(a, b) { return a > b ? a : b; }
				});

				jQuery.min(2,3);
				jQuery.max(4,5);
				
		2)jQuery.extend(target, object1, object2);
			说明：用一个或多个其他对象依次来扩展一个对象(target)，返回被扩展的对象(target)。
			注意：当target对象中没有要扩展的属性，则向target对象添加要扩展的属性；如果target对象中已经存在要扩展的属性，那么target对象中原有的属性将被覆盖。
			例子：
				
				var empty = {};
				var defaults = { validate:false, name:"foo", limit:5};
				var options  = { validate:true,  name:"bar"};
				var settings = jQuery.extend(empty, defaults, options);
				
				// 注意：方法的返回值(settings)与目标对象(empty)指向同一个对象
				empty 	 == { validate: true, limit: 5, name: "bar"};
				settings == { validate:true, name:"bar", limit:5};
			
		3)jQuery.extend(true, target, object1, object2);
			说明：当第一个参数为true时，该方法返回target的一个深层次的副本，这个副本递归地复制了target中所有的对象。否则的话，副本会与原对象共享结构。
			

	9 jQuery中的ajax：
		jQuery中发送ajax请求的方法：
			1)以get方式请求：
				$.get()方法：
					第一个参数：请求页面的URL地址。
					第二个参数：一个键值对的列表。
					第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。
					第四个参数：服务器端响应信息返回内容的格式，如TEXT、XML、HTML、JSON、Script等。
				
					注意：get()方法能够在请求成功时调用回调函数。如果需要在出错时执行函数，则必须使用$.ajax()方法。
				
				$.getJSON()方法：
					第一个参数：请求页面的URL地址。
					第二个参数：一个键值对的列表。
					第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。
					
				$.getScript()方法：参数同getJSON方法一样。

			2)以post方式请求：
				$.post()方法：
					第一个参数：请求页面的URL地址。
					第二个参数：一个键值对的列表。
					第三个参数：异步交互成功之后调用的回调函数，回调函数的参数值为服务端响应的信息。
					第四个参数：服务器端响应信息返回内容的格式，如TEXT、XML、HTML、JSON、Script等。
			
			3)$.ajax处理特殊的数据请求和响应
				ajax()方法是jQuery实现ajax的底层方法，也就是说它是get()、post()等方法的基础。
					使用该方法可以完成通过HTTP请求加载远程数据
					
				只有一个参数：一个键值对的列表，包含了配置信息以及回调函数等。
					这个键值对列表中可以设置的属性有：
						type：请求方式，默认为"GET"。
						url：发送请求的地址，默认为当前页面的地址。
						data：发送到服务器的数据，必须为键值对的格式，同时自动转换为字符串的格式。
						dataType：	指定服务器返回数据的类型，eg：text、xml、html、json、script等
									如果不指定，jQuery会根据HTTP包含的MIME信息返回responseXML或responseText，并作为回调函数参数传递。
						success：请求成功后的回调函数，函数的参数由服务器返回。
						complete：请求完成后的回调函数(请求成功和失败时都调用)。该函数包含两个参数：一个XMLHttpRequest对象和一个描述成功请求类型的字符串。
						contentType：向服务器发送数据的类型，默认为"application/x-www-form-urlencoded"
						async：设置是否异步请求，默认为true

				eg：加载一个JavaScript文件：
					$.ajax({
						type : "GET",
						url : "test.js",
						dataType : "script"					
					});

					把客户端的数据传递给服务端，并获取服务端的响应信息：
					$.ajax({
						type : "POST",
						url : "test.jsp",
						data : "name=jack&age=17",
						success : function(data){		// 异步通信成功后的回调函数
							alert(data);				// 显示服务器的响应信息
						}
					});


	10 jQuery中常用的方法：
	
		通用遍历方法：
			$.each(obj, function(i, n){
			  // some operation
			});
			
			obj：遍历的对象或数组
			function(i, n){}：每个元素都要执行的回调函数
				i：对象的属性名或数组的索引
				n：对象的属性值或数组的元素
		
		jQuery对象遍历方法：
			each(function(i){
				// some operation
			});
			
			function(i){}：每个元素都要执行的回调函数
				i：集合的索引
				注意：可以使用this获取到当前的元素
			
				
	jQuery的优点：
		在JavaScript中，给页面中某元素设置行为时必须先检测该元素是否存在，然后赋予该元素相应的属性或事件，从而导致代码冗余，影响执行效率。
			注：如果该元素在页面中不存在或者被前面的代码删除了，那么浏览器会报错，影响后面代码的执行。
		在JQuery中，选择器定位页面中的元素时，不需要考虑该元素是否存在，如果该元素不存在，则浏览器不做任何操作，也不会报错，从而不会影响后面代码的执行。


	jquery：
		点击超链接时获取超链接的id：$(this).attr("id")
			var anchorId = $(this).attr("id");