jQuery简介及运用

1.什么是jQuery？

jQuery 是一个JavaScript框架。语法简单，使用方便。兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件很多。(就一个类“jQuery”，简写“$”)

2.jQuery的优点：

1.强大的DOM选择器
2.代码简洁
3.链式操作
4.简化的Ajax操作
5.封装了许多操作DOM的方法
6.总是面向集合
7.多行操作集于一行

3.jQuery的简单运用

3.1.导入js库
首先导入jQuery.min.js包

注：在书写src时最好打全路径名，包名注意别弄错了，不然会报错

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

3.2 $(fn)做为程序入口

• $(fn),(document).ready(fn)与window.onload的区别？
  $(fn)、$(document).ready(fn)是等价的，哪个在前面就先执行哪个，window.onload最后执行（因为前两者jsp的dom树结构加载完毕即刻调用方法。后者jsp的dom树加载完毕后，css,js等静态资源加载完毕执行

<script type="text/javascript">
$(function(){
	alert("hello niingjie1");
})
$(document).ready(function() {
	alert("hello niingjie2");
})
window.onload=function(){
	alert("hello niingjie3");
}
</script>

4. jQuery三种工厂方法

4.1.六大选择器

<script type="text/javascript">
$(function () {
	//利用a标签获取jQuery实例
	  /*  $("a").click(function () {
		  alert("biubiubiui");
	   }); */
	   
	   //利用id=a3获取jQuery实例
	   /* $("#a3").click(function () {
		   alert("biubiubiui");
	   }); */
	   
	   //类选择器
	  /*  $(".c1").click(function () {
		   alert("biubiubiui");
	   }); */
	   
	   //包含选择器：
	  /*  $("p a").click(function () {
		   alert("biubiubiui");
	  }) */
	  
	  //组合选择器
	  /* $("a,span").click(function () {
		  alert("biubiubiui");
	  }); */
	  
	  //讲解第二个参数的作用（在div标签内部寻找a标签，然后给找到的标签添加事件）
	 //如果第二个参数没有填写，那么默认是document
	 // 自定义选择器：:exp
	  $("a" ,"div").click(function () {
		  alert("biubiubiui");
	  });
})
</script>

4.2.jQuery(html) html：基于html的一个字符串

<script type="text/javascript">
$(function() {
	$(":input[name='name1']").click(function() {
		//在id=selId1的select标签jquery实例上追加<option value='1'>湖南省</option>的htmljquery实例
		$("#selId1").append("<option value='1'>湖南省</option>");
	});
	$(":input[name='name2']").click(function() {
		//将<option value='2'>长沙市</option>的htmljquery实例追加到id=selId2的select标签jquery实例中
		$("<option value='2'>长沙市</option>").appendTo("#selId2");
	})
</script>

4.3.js对象与jquery对象的相互转换
4.3.1.jquery对象转js对象

//1.把jquer看成一个集合
	var h1Node = $h1.get(0);
	alert(h1Node.value);
	//2.把jquer看成一个数组
	var h1Node = $h1[0];
	alert(h1Node.value); 
	})

4.3.2.js对象转jquery对象

var h2Node = document.getElementById("h2")
alert(h2Node.value);
//js对象转jQuery对象
var $h2Node = $(h2Node);
alert($h2Node.val());

4.4.this指针的作用
4.4.1.事件源

<script type="text/javascript">
$(function () {
	$(":input").click(function () {
		//指的事件源
		alert(this.value);
	});
})
</script>

4.4.2.当前元素（点击按钮，获取所有a标签的值）

<script type="text/javascript">
$(function () {
		//此方法也可以带参数index,item
		$("a").each(function () {
			//指的是当前元素
			alert($(this).html)
		});
})
</script>

4.5.使用jquery动态给table添加样式

<script type="text/javascript">
$(function () {
	$("table tr:eq(0)").addClass("yellow");
	$("table tr:gt(0)").addClass("red");
	$("table tr:gt(0)").hover(function () {
		$(this).removeClass.addClass("pink");
	})function () {
		$(this).removeClass.addClass("red");
	});
})
</script>

5.jQuery插件

5.1.插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
5.2.json的三种格式
5.2.1.对象格式

<script type="text/javascript">
$(function () {
	//json对象的字符串体现形式
	var jsonobj1={
			sid:'s001',
			sname:'ningjie'
	};
	console.log(jsonobj1);
})
</script>

5.2.2.列表/数组模式

<script type="text/javascript">
	//json数组的字符串体现形式
	var jsonArray=[1,2,3,4];
	console.log(jsonArray);
})
</script>

5.2.3.混合模式

<script type="text/javascript">
$(function () {
	//json混合模式的字符串体现形式
	var json={id:3,hobby:['a','b']};
	consloe.log(json);
})
</script>

5.3.$.extend和$.fn.extend

<script type="text/javascript">
$(function () {
	//json对象的字符串体现形式
	var jsonobj1={
			sid:'s001',
			sname:'ningjie'
	};
	console.log(jsonobj1)
	$(function () {
		//json对象的字符串体现形式
		var jsonobj3={
				sid:'s002',
				sname:'ningjie2',
				hobby:['a','b']
		};
	//$.extend用来扩展jQuery类属性或方法所用
	var jsonobj2={};
	//用后面的对象扩充第一个对象
	//$.extend(jsonobj2,jsonobj1);
	//之前已经扩充的值会被覆盖，如果后面对象有新的属性，会继续扩充
	$.extend(jsonobj2,jsonobj1,jsonobj3);
	console.log(jsonobj2);
	
	
	$.extend({
	hello:function(){
	alert("我来了");	
	}
	});
    $.hello;
    //$.fn.extend是用来扩充jQuery实例的属性或者方法所用
    $.extend({
	sayhello:function(){
	alert("哈哈哈");	
	}
	});
    $("#yellow").sayhello();
    alert("yellow");
    
})
</script>

5.3.jQuery插件的添加
其实就是给jQuery添加新的实例方法或类方法，然后将功能封闭在其中
5.4.jQuery插件开发实例（隔行换色）
4.1 命名
jquery.xxx.js
4.2 命名参数的写法
$.extend(defaults,options);

jsp页面

6.ajax的简单使用

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

ObjectMapper mapper = new ObjectMapper();
 mapper.writeValueAsString(obj);

 int count = md.getColumnCount();
 map.put(md.getColumnName(i), rs.getObject(i));

Map<String,String> stu = new hashMap<>();
	stu.add("男1","ningjie");
	stu.add("男2","ningjie");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););

当然也可以将json对象转为java对象,在 用$.ajax的时候可以转为java对象

var stu = $.pareJSON(str);//将转过了的转为java对象

json死循环

package com.ningjie;
import java.util.HashSet;
import java.util.Set;

import com.ningjie.entity.Student;
import com.ningjie.entity.Teacher;
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;

/**
 * json死循环问题
 * 1.由双向绑定改成单向绑定，也就是说将彼此之间的关系交于一方维护
 * 2.在teacher实体类那边加 @JsonIgnore：将彼此循环调用的属性忽略，不参与对象转成json格式
 * @author Administrator
 *
 */
public class Demo3 {
	public static void main(String[] args) throws JsonProcessingException {
		
		Student s1 = new Student("s001", "张三");
		Student s2 = new Student("s002", "李四");
		Teacher t1 = new Teacher("t001", "小李", null);
		Teacher t2 = new Teacher("t002", "飞刀", null);
		Set<Teacher> teas = new HashSet<>();
		teas.add(t1);
		teas.add(t2);
		s1.setTeas(teas);// StackOverflowError双向绑定
		Set<Student> ss = new HashSet<>();
		ss.add(s1);
		ss.add(s2);
		t1.setS(ss);
		ObjectMapper om = new ObjectMapper();
		System.out.println(om.writeValueAsString(s1));
	}
}

解决的方式有两种
1.由双向绑定改成单向绑定，也就是说将彼此之间的关系交于一方维护.
（stu1.setTeas(teas);与tea1.setStus(stus);只用一种）

2.@JsonIgnore放入实体类中：将彼此循环调用的属性忽略，不参与对象转成json格式
jsp页面，jQuery的Ajax请求