JQuery

1、是什么

JQuery 是 javascript 的一个框架集合 ， 并不是什么新的技术。

2、作用

JQuery 是一个 javaScrip的框架，它的宗旨是： Write Less , Do More. 写更少的代码，完成更多的工作。
平常我们如果使用ajax来完成交互工作，可能要写很多代码。并且代码重复性比较高。 那么能不能让代码写的少一点，重复性第一点 , jQuery 做的就是这个事。

3、用法

1）. 导入jquery的支持

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

2）. 在早前，我们要使用ajax 去执行请求， 需要写代码很多，请求数据回来后，要赋值显示，也是比较复杂。 但是JQuery 只要简单的一行代码即可。

$(#div01).load("Demo01");

解释起来的话是：

	$(#div01) ---> 代表 找到 页面上 id 为  div01 的节点

	load("Demo01"); 代表去加载这个路径的值。  当然这里写的是servlet的相对路径地址。 

get（）：
字节请求，不带任何参数 ：

$.get(“url”);

需要带上参数的话与平常的get请求参数传递一样。

$.get("url?name=zhangsan&age=18");		
//获取数据
$.get("url?name=zhangsan&age=18", function(data , status){
	
	alert("data="+data+"--status=="+status);
});

如果想要获取服务器反馈的数据，需要在get里面在加一个参数。 给定一个方法即可。服务器响应后，会执行该方法。 注意，方法里面的参数格式固定，
data , status 。 data : 代表服务器响应过来的数据， status 代表这次请求的响应状态码

post（）：请求不带上任何数据

$.post("Demo01" );

请求带上数据 。，json格式

$.post("Demo01" , {name:"xx" , age:99});

请求，带上数据，并且获取响应回来的数据

$.post("Demo01" , {name:"xx" , age:99} , function(data ,status){
	
	alert("data="+data+"--status="+status);
});

4、实现案例 仿百度提示

onkeyup="keyup01()" 
function keyup01() {
		var words = $("#word").val();
		alert("输入内容22："+words);
	}

上下等同，效果一样。

$(function(){
		//最id为 word的元素，进行 键盘弹起事件监听。
		$("#word").keyup(
				//一旦有键盘弹起了，那么将会执行下面的代码。
			function(){
				var words = $(this).val();
				alert("输入内容："+words);
			}		
		);
	});

---

结果代码：

function keyup01() {
var words = $("#word").val();
$.post(“SearchServlet” , {word:words} , function(data){
//alert(data);
if(words.length>0){
//显示div
$("#div01").show();
$("#div01").html(data);
}else{
//隐藏div
$("#div01").hide();
}

});

}

省市联动
XML

js代码请求。
//当文档准备完毕，就会调用该方法
$(function() {
	//执行监听，当这个元素的值发生改变，就会执行内部的方法
	$("#province").change(function() {
		//那么要做什么呢？ 其实是要把这个元素的值上传到服务器上。
		var id = $(this).val();
		$.post("CityServlet" , {id:id} ,function(data){
			$(data).find("city").each(function() {
				var id = $(this).children("id").text();
				var cname = $(this).children("cname").text();
				
				$("#city").append("<option value='"+id+"'>"+cname);
			});
		});
	});
});

选则器：

$("#province")  : 代表着选则 id为 province 的元素。

遍历：

$(data).find("city") 找出data数据中的所有city ， 

$(data).find("city").each(function(){}） . 对每一个city进行遍历，并且执行括号中的方法

 $(this).children("id").text();  遍历得到的每一个city里面，再取它的孩子 id , 然后拿它的值。

取值：

html() ---- 获取或者设置  元素中的 html 内容。  可以获取 p标签中的内容。 

如：    <p>
			我是div.demo中第一个P元素：
			<a href="#">我在第一个P里面</a>
		</p>

text() ---- 获取元素中间的文字值， 如 ： <a href="">黑马训练营 </a>  得到 黑马训练营
val() --- 获取元素上的 value=""的值   <input name="name" value="zhangsna">  得到张三 

json

//当文档准备完毕，就会调用该方法
$(function() {
	//执行监听，当这个元素的值发生改变，就会执行内部的方法
	$("#provice").change(function() {
		//那么要做什么呢？ 其实是要把这个元素的值上传到服务器上。
		var id = $(this).val();
		$("#city").html("<option value=''>-请选择-");
		$.post("CityServlet02" , {id:id} ,function(data){
			$(data).each(function(i , city) {
				$("#city").append("<option value='"+city.id+"'>"+city.cname);
			});
		},"json");
	});
});

写法上与前面的xml 基本一样。 区别就在于，对数据的处理上，有所不同而已。 注意：
json的写法，一定要在后面跟上数据格式，否则无法遍历出来。

5、赋值

1）val(“aa”):针对带有value属性的元素进行赋值， 其实就是给该元素的 value赋值
2)html(“aa”):针对某一个元素，可以使用元素左右包括起来一段值的元素赋值 。如：

并且该方法可以写html代码。 如： 3)text(“aa”):该方法针对那些可以在两个标签中写值的赋值工作
。如 ：

aaaaaaaaaaaaaa