jQuery基础

jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码

	原生JS	jQuery
页面加载	window.οnlοad=function(){ //代码;}	$(function(){})
获取节点	document.getElementById(“name”);	$("#mytime")

注：$(function(){})比window.onload加载快，因为前者在节点加载完毕即执行，而后者要等一系列资源加载完毕（如：图片）

多个$(function(){})中的代码都会执行，而多个window.onload只会执行最后一个；

绑定事件：
Js中
1.<a href=“javascript:void(0);” οnclick=“functionName();”/>
简单，支持所有浏览器；
缺点：结构与事件没有分开，耦合度高，只能添加一个事件，且添加后，事件不能取消；
2.document.getElementById(“id”).οnclick=function(){}
简单，支持所有浏览器，添加之后，事件可取消；

jQuery中：
3种绑定方式：
$obj.事件名称(function(){});
$obj.on(“事件名称”, function(){});
$obj.bind(“事件名称”, function(){});
2种取消事件方法：
$obj.off(“事件名称”);
$obj.unbind(“事件名称”);

1、.js是开发版，因为代码是规范格式，看得懂源码；.min.js是上线版，加了一些为了安全的多余的东西，没有格式，所以占内存小，运行较快

2、jQuery 与 $

3、遍历

场景：例如有多个input按钮，获取每个按钮的value值

第一种：传统的遍历方式：var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){
	alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}
第二种：jQuery提供的each函数
//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点
$obj.each(function(index , obj){
	alert($(obj).val());
});

4、异步请求

$.get("url",data,callback,type);

$.post("url",data,callback,type);
url：表示请求
data：请求参数，格式{key1:value1,key2:value2}
callback：回调函数function(data){}，其中data表示服务器返回的数据
type：指定服务器返回数据的类型：
如果是字符串，基本值用text
如果是对象，或者集合用json，前台接收的直接就是一个json对象，可以直接使用

$.ajax({
      url: "emp/list",                  //请求地址
      type: "GET",                       //请求方式
      data: "eid=1&ename=tom",         //请求参数
      success: function (result) {    //请求成功后的回调函数，result是服务器返回的数据         
      },
      async: true,                      //默认异步，可以不写，写成false，就是同步操作
      dataType: "json"                 //如果是json，服务器返回值就是json对象，直接使用
      //如果不指定dataType，就是普通文本
});

=================================举例：选择省 加载对应市=====================
//加载省的方法
$.post("province",function(data){
	$.each(data,function(i,n){
		$('#provinceSelect').append('<option value="'+n.id+'">'+n.name+'</option>');
	});
},'json');
			
//加载市的方法
$('#provinceSelect').change(function(){
	//初始化市的数据，将之前加载的数据初始化
	$('#citySelect').html("<option>--请选择--</option>");
	//动态获取省的id值
	var id = $(this).val();
	//根据id值发送post请求去加载相应省的所有市的数据
	$.post('city',{'id':id},function(data){
		$.each(data,function(i,n){
			$('#citySelect').append('<option value="'+n.id+'">'+n.name+'</option>');
		});
},'json');
});