一.jquery介绍：
下载：http://jquery.com/ jquery是一种新类型的javascript库。
jQuery is a fast, concise, JavaScript Library that simplifies how
you traverse HTML documents, handle events, perform animations,
and add Ajax interactions to your web pages.
使用jquery很简单，只要在页面加加载其jquery.js就行了。
二.常用符号使用
$是对jQuery的一个简写形式。
$('p')表示取得所有段落<p></p>内容
$('#some-id') 取得ID为some-id的元素
$('.some-class') 取得带有some-class类的所有元素.
$("form > input");//子对象
$("div,span,p.myClass");//同时选择多种对象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表单对象
$("input[name='newsletter']");//特定的表单对象
/*获得TEXT或AREATEXT的值*/
var textval = $("#text_id").attr("value");//表示取得id为text_id的text或areatext的值
var textval = $("#text_id").val();
/*获取单选按钮的值*/
var valradio = $("input[@type=radio][@checked]").val();
/*获取复选框的值*/
var checkboxval = $("#checkbox_id").attr("value")；
/*获取下拉列表的值*/
var selectval = $('#select_id').val();
/*给文本框或文本区域赋值*/
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');//填充内容
/*在div中显示值*/
$('#publisher').text("test");
$('#publisher').append("test"); //将"test"加在其后面
//多选框checkbox：
$("#chk_id").attr("checked",'');//未选中的值
$("#chk_id").attr("checked",true);//选中的值
if($("#chk_id").attr('checked')==undefined) //判断是否已经选中
//单选组radio：
$("input[@type=radio]").attr("checked",'10');//设置value=10的单选按钮为当前选中项
//下拉框select：
$("#select_id").attr("value",'test');//设置value=test的项目为当前选中项
$("<option value='test'>test</option>
<option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的option
$("#select_id").empty()；//清空下拉框
/*显示与隐藏图层*/
$('#detailBlockId').fadeIn('slow');//显示detailBlockId图层
$('#detailBlockId').fadeOut('slow'); //隐藏detailBlockId图层
"slow", "normal", or "fast"表示图层淡入和淡出的效果。
$("#helloDivObj").hide();
$("#helloDivObj").show();
三.jquery与ajax交互例子
1.自动填充
还要另外下载一个jquery.autocomplete.js
<script type="text/javascript">
var arr = ["Allen","Albert","Alberto","Alladin","黄瓜","土豆"];
$(document).ready(function(){ //当文档载入后从此处开始执行代码
$("#input_box").autocompleteArray(arr);
});
</script>
</head>
<body>
<input type="text" id="input_box" />
............
这个一个简单的例子，所有数据在前台页面，比较简单.
如果从后以台将数据传过来，例子如下：
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "GET",
url: "test.jsp",
dataType: "json",
success: function(data){
$("#input_box").autocompleteArray(data);
}
});
});
</script>
从test.jsp中获取数据：其格式如：["Allen","Albert","Alberto","Alladin","黄瓜","土豆"].
test.jsp内容如下：
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
out.print("[/"Allen/",/"Albert/",/"Alberto/",/"Alladin/",/"黄瓜/",/"土豆/"]");
%>
注意：
jQuery.ajax(options)
通过 HTTP 请求加载远程数据。
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建的 XMLHttpRequest 对象。
2.根据Url返回数据
$(document).ready(function(){
$('#button').click(function() {
$.ajax({
type: "GET",
url: "data.jsp",
data: "q="+$('#id').val(), //$('#id').val()取得文本框中的值,将其传给服务器端
dataType: "json", //表示返回的数据类型为json,将响应作为JSON求值，并返回一个Javascript对象。
success: function(data){
$('#msg1').text(data.username);
$('#msg2').text(data.password);
}
});
});
});
....
<input type="text" name="textname1" id="text_id1" value="">
<input type="text" name="textname2" id="text_id2" value="">
<input type="text" name="id" id="id" value="">
<div id="button">Load</div>
data.jsp:要产生的数据是json类型: 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔. 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
User.java:
...
public String toString() {
return "{/"username/":/""+username+ "/",/""+"password/":/""+this.password+"/"}";
}
data.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String q=request.getParameter("q");
System.out.print("json"+q); //取得传递过来的参数
out.print(new com.User("nameadddd","passwordfddffd"));
%>
对于返回类型为json,也可用$.getJSON,如下:
$('#button').click(function() {
$.getJSON("data.jsp?q=aaaa", //传递参数时,可以动态写在后面
function(data){
//alert("Data Loaded: " + data.username);
//alert("Data Loaded: " + data.password);
$('#msg1').text(data.username);
$('#msg2').text(data.password);
});
});
3. 缓存问题
如果存在缓存,可以在参数后加上一个version=new Date()这样每次的Url就不相同了.
锁住浏览器，用户其它操作必须等待请求完成才可以执行。
$.ajax中有个属性:
cache (Boolean) : (默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。