jQuery
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'xml.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <script type="text/javascript" src="scripts/jquery-1.4.4.js"></script> <script type="text/javascript"> $(function() { /* $("#button1").click(function() { $.ajax({ type: "POST", url: "XMLServlet", dateType: "xml", data: {name: $("#name").val()}, success: function(returnedData){ var id = $(returnedData).find("id").text(); var name = $(returnedData).find("name").text(); var age = $(returnedData).find("age").text(); var address = $(returnedData).find("address").text(); var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + address + "</td></tr></table>"; $("#theBody table:eq(0)").remove(); $("#theBody").append(html); } }); }); */ $("#button1").click(function() { $.get("XMLServlet", { name: $("#name").val() }, function(returnedData, status) { var id = $(returnedData).find("id").text(); var name = $(returnedData).find("name").text(); var age = $(returnedData).find("age").text(); var address = $(returnedData).find("address").text(); var html = "<table width='60%' border='1' align='center'><tr><th>id</th><th>name</th><th>age</th><th>address</th><tr align='center'><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td>" + address + "</td></tr></table>"; $("#theBody table:eq(0)").remove(); $("#theBody").append(html); }); }); }); </script> </head> <body id="theBody"> <select id="name"> <option value="zhangsan">zhangsan</option> <option value="lisi">lisi</option> </select> <input type="button" id="button1" value="get content from server"> </body> </html>
其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。
jQuery对事件的支持主要包括：
- bind()--为事件绑定处理程序，如：
$("p").bind("mouseenter mouseleave", function(e){
$(this).toggleClass("over");
}); - unbind()--注销绑定在事件上的处理程序，如：$(document).unbind('ready');，如不给参数，则清除所有事件处理程序。
$("#unbind").click(function () {
$("#theone").unbind('click', aClick);
}); - trigger()--触发某类事件。
$("button:first").trigger('click'); - triggerHandler()--触发某类事件，但不触发默认的事件处理逻辑，比如a的定向。
$("input").triggerHandler("focus"); - one()－－为事件绑定只能被触发一次的处理程序。
$("div").one("click", function(){
}); - ready()/click()/change()/toggle(fn,fn)/dblclick()……各种常规事件的快捷方式，xxx(fn)为绑定处理程序，xxx()为触发事件
jQuery 1.2的事件支持命名空间，
$("div").bind("click", function(){ alert("hello"); });
$("div").bind("click.plugin", function(){ alert("goodbye"); });
$("div").trigger("click!"); // alert("hello") only
现在，链式代码已经成为jQuery非常流行的一个特点了，在使用链条方式写代码时，可能会用到eq()/filter()等方法变化jQuery对象的对应范围，然后，又可以用end()函数将范围复原到原来的状况。
需要注意的是，有几个函数并不返回jQuery对象，所以链条就不能继续下去，比如get()就不能像eq()那样用。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>chainning code</title> <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ //添加四个按钮 $('<input type="button" value="click me"/><input type="button" value="triggle click me"/><input type="button" value="detach handler"/><input type="button" value="show/hide text"/>').appendTo($('body')); //找出所有按钮 $('input[type="button"]') .eq(0)//找到第一个按钮 .click(function(){ alert('you clicked me!'); }) .end().eq(1)//返回所有按钮，再找到第二个 .click(function(){ $('input[type="button"]:eq(0)').trigger('click'); }) .end().eq(2)//返回所有按钮，再找到第三个 .click(function(){ $('input[type="button"]:eq(0)').unbind('click'); }) .end().eq(3)//返回所有按钮，再找到第四个 .toggle(function(){ $('.panel').hide('slow'); },function(){ $('.panel').show('slow'); }); }); </script> <style type="text/css"> .panel { padding: 20px; background-color: #000066; color: #FFFFFF; font-weight: bold; width: 200px; height: 50px; } </style> </head> <body> <div class="panel">welcome to jQuery!</div> </body> </html>
<script type="text/javascript"> $(function(){ //设置指示器 $('#divIndicator').ajaxStart(function(){$(this).show()}) .ajaxSuccess(function(){$(this).hide()}) .ajaxError(function(msg){$(this).hide();alert(msg);}); //ajax get 请求 $('#btnGetCubeInGet').click(function(){ var number = $('#txtNumber').val(); $.get('CubeHandler.ashx?number='+number,function(result){ alert(result); }); }); //ajax post 提交 $('#btnGetCubeInPost').click(function(){ var number = $('#txtNumber').val(); $.get('CubeHandler.ashx',{'number':number},function(result){ alert(result); }); }); }); </script> <style type="text/css"> .indicator { color: #FF0000; position: absolute; top: 0px; right: 0px; display: none; } </style> </head> <body> <div id="divIndicator" class="indicator"> <img src="indicator.gif" />loading</div> plz input a number:<input id="txtNumber" /> <input type="button" id="btnGetCubeInGet" value="Get cube(get)" /> <input type="button" id="btnGetCubeInPost" value="Get cube(post)" /> </body>
