JAVA笔记：jQuery

1.使用jQuery

1.引入jquery-2.1.3.min.js文件

<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>

2.页面加载事件

//方式一（常用）
$(function(){
	$("#id").html("001");
})
//方式二（完整）
$(document).ready(function(){
	$("#id").html("002");
})

3.jQuery与$ 的比较
jQuery===$ 结果返回true,因为其他的js框架也可能使用$ 符号，这时可以使用 jQuery("#id")来处理

4.DOM对象与jQuery对象转换
获取jQuery对象，是一个伪数组：var id = $("#id");
通过 var domid = id[0]; 来转换为DOM对象

DOM对象转换为jQuery对象： var jQuery = $(dom);

2. jQuery选择器

基本选择器

1.id选择器 $("#myDiv")
如果页面中有多个相同id，只有第一个有效
2.类选择器 $(".class")
如果页面中有多个相同class，全部都有效
3.element 元素选择器 $(“div”)
4.* 所有元素 $("*")
5. selector1选择器 $(“div,input”)

层次选择器

1. 祖先 后代 $("#book li") id=“book”下的所有li 标签都有效
2. 父亲 儿子 $("#book > li") 只有id=“book”下的li 子标签有效
3. 元素 紧接下一个元素 $(“form+input”)
   匹配所有紧接在 form元素后的 input 元素
4. form元素 下面的所有input元素 $(“form~input”)

3. jQuery注册事件

1. $ (“#id”).click(function(){执行的操作});
2. $ (“#id”).on(“click”,function(){执行的操作});
   取消：$ (“#id”).off(“click”);
3. $ (“#id”).bind(“click”,function(){});
   取消：$ (“#id”).unbind(“click”);

4. 二级联动

页面

省份:<select id="provinceSelect" onchange="getCity(this)">
	</select>
	城市:<select id="citySelect">
			<option>--请选择--</option>
		 </select>

JS

	$(function(){
		function getProvince(){
			//发送ajax请求获取省份列表
			$.get("/city",function(json){
				var provinceSelect = $("#provinceSelect")
				provinceSelect.append("<option>--请选择--</option>");
				for(var i=0;i<json.length;i++){
					var jsonList = json[i];
					//取出省份id和省份名字
					var pid = jsonList.id;
					var pname=jsonList.provinceName;
					provinceSelect.append("<option value='"+pid+"'>"+pname+"</option>")
				} 
			})
		}
		getProvince()
	})
	//根据选择的省份获取城市列表
	function getCity(src){
		var pid = src.value
		//发送ajax请求获取城市列表
		$.get("/city",{"province_id":pid},function(json){
			var citySelect = $("#citySelect")
			citySelect.empty()
			citySelect.append("<option>--请选择--</option>");
			for(var i=0;i<json.length;i++){
				var jsonList = json[i];
				//取出省份id和省份名字
				var cid = jsonList.id;
				var cname=jsonList.cityName;
				citySelect.append("<option value='"+cid+"'>"+cname+"</option>")
			} 
		})
	}

Servlet

@WebServlet("/city")
public class CityServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		//设置响应类型为json和编码
		resp.setContentType("text/json;charset=UTF-8");
		//获取省份id
		String province_id = req.getParameter("province_id");
		if(province_id!=null&&!"".equals(province_id)){
			//获取城市列表
			Integer pid = Integer.valueOf(province_id);
			List<City> city = City.getCity(pid);
			JSON json = JSONSerializer.toJSON(city);
			resp.getWriter().print(json);
		}else{
			//获取省份列表
			List<Province> province = Province.getProvince();
			JSON json = JSONSerializer.toJSON(province);
			resp.getWriter().print(json);
		}
		
	}
}

type参数

1. 如果后台设置josn类型，前台页面可以接受到json，不用再转换
   response.setContentType(“text/json; charset=UTF-8”);
2. 前台页面接收时设置type为json，也可以不适用JSON.parse(result)来转换类型。