jQuery

一、初识jQuery

1.1.、什么是jQuery
它是一个轻量级的javascript类库 （注：就一个类“jQuery”，简写“$”）

1.2、 jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行
(相对于js来说，jQuery把一些功能进行了封装，方便了调用)

1.3、程序入口
代码：

window.onload = function(){
			alert("hello3");
		} 	
		
		$(document).ready(function(){
			alert("hello2");
		})
		
		$(function(){
			alert("hello1");
		})
		/*结论：$(fn)、$(document).ready(fn)是等价的，哪个在前面哪个先执行 
				jsp的dom树结构加载完毕即刻调用方法
				window.onload最后执行
				jsp的dom树加载完，css、js等静态资源加载完毕执行*/

1.4.jQuery三种工厂方法
第一种
代码：

//利用a标签获取jQuery实例
		$("a").click(function(){
			alert("丧心病狂");
		})
		
		//利用id=a3(ID选择器)获取jQuery实例
		$("#a3").click(function(){
			alert("丧心病狂");
		})
		
		//利用class=c1(类选择器)获取jQuery实例
		$(".c1").click(function(){
			alert("丧心病狂");
		})
		
		//利用包含选择器获取jQuery实例
		$("p a").click(function(){
			alert("丧心病狂");
		})
		
		//利用组合选择器获取jQuery实例
		$("a,span").click(function(){
			alert("丧心病狂");
		})
		
		//讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
		//如果第二个参数没有填写，那么默认是document
		$("a","div").click(function(){
			alert("丧心病狂");
		})

第二种
jQuery(html) （demo3.jsp）
html：基于html的一个字符串
代码：

$("input[name='name1']").click(function(){
			//在id=selId1的select的jQuery实例追加"<option value='1'>湖南省</option>"的HTML jQuery实例
			$("#selId1").append("<option value='1'>湖南省</option>");
		})

第三种
jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换
代码：

	//jQuery对象转js对象
		//var h1Node = $h1.get(0);①
		var h1Node = $h1[0];②
		alert(h1Node.value); */
		
		//js对象转jQuery对象
		var $h2Node = $(h2Node);
		alert($h2Node.val());

1.5、this指针的作用
代码：

$("input").click(function(){
			//指的是事件源（获取当前按钮的按钮值）
			alert(this.value);
			$("a").each(function(index,item){
				//指的是当前元素（点击按钮，获取所有a标签的值）
				alert(index+","+$(this).html()+","+$(item).html());
			})
		})
！

1.6、使用jquery动态给table添加样式
代码：

$("table tr:eq(0)").addClass("yellow");
		$("table tr:gt(0)").addClass("red");
		
		$("table tr:gt(0)").hover(function(){
			$(this).removeClass().addClass("fen");
		},function(){
			$(this).removeClass().addClass("red");
		});

二、jQuery插件

2.1 json的三种格式
代码：

//json对象的字符串体现形式
		var jsonObj1 = {
				sid:'s001',
				sname:'张三'
		}

//json数组的字符串体现形式
		var jsonArray1 = [1,2,3,4,5];
		console.log(jsonArray1);

//混合
var jsons = {id:3,hpbby:['a','b','c']};
		console.log(jsons);

2.2、.extend和 .extend和.extend和.fn.extend
代码：

//$.extend是用来扩充jQuery类属性或者方法所用
	var jsonObj2 = {};
	//用后面的对象扩充对象
	//$.extend(jsonObj2,jsonObj1);
	//简介扩充值的覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，如果后面对象有新的属性，会继续扩充。
	$.extend(jsonObj2,jsonObj1,jsonObj3); 
	console.log(jsonObj2);
	
	$.extend({
		hello:function(){
			alert("我来了");
		}
	})
	$.hello();



//$.fn.extend是用来扩充jQuery类属性或者方法所用
	$.fn.extend({
		sayhello:function(){
			alert("说早安");
		}
	})
	
	$("#yellow").sayhello();
	alert("yellow");

三、ajax

jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象和xml文档，同样也可以将json、xml转换成Java对象

3.1 jackson将java–>json
json对象
代码：

Student stu1 = new Student("s001","张三");
	ObjectMapper om = new ObjectMapper();
	System.out.println(om.writeValueAsString(stu1));

json数组
代码：

	Student stu2 = new St
	udent("s003","李四");
	List<Student> ls = new ArrayList<>();
	ls.add(stu1);
	ls.add(stu2);
	System.out.println(om.writeValueAsString(ls));

json混合模式
代码：

Map<String, Object> map = new HashMap<>();
	map.put("003",2);
	map.put("004",ls);
	System.out.println(om.writeValueAsString(map));

3.3、 java->json死循环
忽略双向关联的一个方向即可
@JsonIgnore/程序控制

3.4、jQuery的ajax请求
外部js（demo10.js）,引入demo10.jsp中
代码：

$(function(){
	var ctx = $("#ctx").val();
	$.ajax({
		url:ctx+"/regionServlet",
		success:function(data){
			for(index in data){
				$("#province").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
			}
		},
		dataType:"json"
	});
	
	$("#province").change(function(){
		$("option:gt(0)","#city").remove();
		$.ajax({
			url:ctx+"/regionServlet?ID="+this.value,
			success:function(data){
				for(index in data){
					$("#city").append("<option value='"+data[index].ID+"'>"+data[index].REGION_NAME+"</option>")
				}
			},
			dataType:"json"
		})
	});
})