jQuery+AJAX+JSON

合集下载

struts2+json+jquery实现ajax登录和注册功能

在上一篇博文中已经学习了如何整合mybatis和spring，实现持久层的CRUD操作、业务层的事务管理和spring的IoC。

现在我们这个demo的基础上，继续整合struts2，并利用json插件和jquery实现ajax，完成后系统将实现登录与注册的简单功能。

浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。

在客户端构造intput表单数据或者拼凑URL参数名称/参数值，然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了，在struts2中，只要在action 里定义了input表单名称/URL参数名称对应的String类型属性，并设置getter和setter 方法，struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用，这极大地方便了开发者。

但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值，也就是说，struts2自动封装的数据只有一层，而json是无限层。

json给页面参数的传递带来极大的方便，结合jquery来使用，可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等，其中后者是我觉得最有必要做到的一点，在action中定义一个message变量，把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端，客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息，非常地好用。

json由javascript中的对象和数组构成，基本形式是{key:value}，key为属性名称，value 为属性值，value可以为数字、字符串、数组、对象，value可以为数组和对象是json可以封装无限层数据的关键所在。

至于如何建构和解析json不是本篇博文的详细表述范围，请参考其他资料。

现在就让我们利用struts2作为MVC框架，整合json插件，在浏览器端使用jquery解析和系列化json数据，由此制作一个具有登陆/注册功能的小demo。

jq ajax 写法

jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时，可以使用$.ajax() 方法。

以下是一个常见的jQuery Ajax 的写法示例：javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法，可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型，这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中，使用$.ajax() 方法发送一个POST 请求到指定的URL，并传递一些参数。

url 属性指定请求的URL，method 属性指定请求的方法（如GET 或POST），data 属性指定请求的参数。

dataType 属性指定了服务器返回的数据类型，这里设置为JSON。

success 属性指定了请求成功时的回调函数，当服务器成功返回数据时，该函数会被调用。

在示例中，我们将返回的数据打印到控制台。

error 属性指定了请求失败时的回调函数，当请求发生错误时，该函数会被调用。

在示例中，我们将错误信息打印到控制台。

你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数，以及处理返回数据的逻辑。

jqajax传递json对象到服务端及contentType的用法

jqajax传递json对象到服务端及contentType的⽤法⽬录0、⼀般情况下，通过键值对的⽅式将参数传递到服务端0.1 客户端代码：$.ajax({url: 'TestHandler.ashx',type: 'post',data: {name: "admin",age: 10},dataType: 'text',success: function (data) {alert(data);}})0.2 服务端代码：public void ProcessRequest(HttpContext context){string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();}string name= context.Request["name"].ToString();// "admin"string age = context.Request["age"].ToString();// "10"context.Response.ContentType = "text/plain";context.Response.Write(bodyText);// "name=admin&age=10"}0.3 在浏览器的⽹络中查看此次请求：从上⾯的截图中可以看出，post请求，是将formdata中键值对⽤符号“&”相连，拼接成⼀个字符串，传递到服务端，服务端可以通过key来获取值，或从request的body中读取整个字符串；1、ajax 传递复杂json对象到服务端1.1 ⽅法⼀：通过formdata传值，服务端通过key获取值；客户端代码：var user1 = {username: 'admin',age: 10};var user2 = {username: 'test',age: 11};var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: {Users: JSON.stringify(userArr)},dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;// "application/x-www-form-urlencoded; charset=UTF-8"string users = context.Request["Users"].ToString();dynamic obj = JsonConvert.DeserializeObject(users);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}1.2 ⽅法⼆：通过formdata⽅式传值，服务端读取Request.InputStream;前端代码：var user1 = { username: 'admin', age: 10 };var user2 = { username: 'test', age: 11 };var userArr = [];userArr.push(user1);userArr.push(user2);$.ajax({url: 'TestHandler.ashx',type: 'post',//contentType: 'application/json',//contentType:"application/x-www-form-urlencoded; charset=UTF-8",data: JSON.stringify(userArr),dataType: 'text',success: function (data) {alert(data);}})服务端代码：public void ProcessRequest(HttpContext context){string contentType= context.Request.ContentType;//"application/x-www-form-urlencoded; charset=UTF-8"string bodyText = string.Empty;using (var bodyReader = new System.IO.StreamReader(context.Request.InputStream)){bodyText = bodyReader.ReadToEnd();// [{"username":"admin","age":10},{"username":"test","age":11}]}dynamic obj = JsonConvert.DeserializeObject(bodyText);context.Response.ContentType = "text/plain";context.Response.Write(obj[0].username);// "admin"}通过浏览器查看此次请求：从图中可以看出，content-Type 为application/x-www-form-urlencoded，所以浏览器尝试将传输的数据解析成key-value的形式，但实际在ajax中的data中设置的是⼀个json字符串，⽆法解析成key-value的形式，故在服务端⽆法通过key来获取值；只能从Request.InputStream获取。

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

});
四， $复.g制et代JS码O
代码如下:
$.getJSO N("data. $("#getJ S所ON以Re调sp用o 时需要使
);
When Ajax 载入静态页面 load( url, (dSatraing) (cMaalpl)b(a可ck (Callbac load()方法可以轻复制代码
代码如下:
$("#load ing").aj $(t}h)i;s).
全局事件也复可制以代帮码
代码如下:
$("#msg" ).before $(t}h)i.sa)j.a xSuccess $(t}h)i.sa)j.a xError(f $}()t;his).
很显然，第复三制个代参码
代码如下:
$.ajax({
进一步了解前A面JA讨X事论的一些方 ajaxStar t(全局事件 be)fo开re始Se n(d局部事件 a(j全)ax局当Se事一nd 件 s(u局)cc部请es事求s 件 aj)ax请Su求cc e全ss局事件全 e(r局局ro部的r事请件 aj)ax仅Er当ro r
全局事件全 c(o局局mp部的le事发te 件 aj)ax不Co管mp l全et局e事件全 a(j全局ax局的St事请op 件局)部当事没件在之前的复制代码
代码如下:
$('#ajax 这样， d复at制a.代ht码m
代码如下:
$('#ajax -
实现GET 和POST方 get( url, (dSatraing) (cMaalpl)b(a可ck (Callbac 很显然这是一个专复制代码
代码如下:
$.get('l ogin.pihdp

jQuery操作Ajax和Json

jQuery操作Ajax和Json嗯，自己学SSH和做项目也已有两个月了。

自己今天来整理一下自己在项目中利用jQuery操作过的Ajax和Json。

当时我对于jQuery操作Ajax几乎不怎么了解，但是项目中有需求，所以自己也是必须要去使用，因此现在来详细讲解一下自己在项目中的操作。

功能中，有一个下拉框，里面存储的是服务商的信息，首选项是“--请选择--”，当我选择第一个下拉框中服务商信息之后，后面紧接着将会得到这个选定的服务商下的所有产品。

做一个联动操作。

虽然我不会用jQuery操作Ajax，但是我第一反应就是想到利用这块技术，于是自己就开始查找对应的资料了。

首先，我在Action中，将服务商的信息从数据库查找出来，保存到List集合中，将集合转发到JSP界面上，利用的是struts2标签：<div><s:select name="provider.iscenicid"list="#request.providerList"listKey="i scenicid"listValue="szcenicname"headerKey=""headerValue="--请选择"onchange="onChangeOptionScenic(this)"id="scenicType"/></s:select><span id="productInfo"></span></div>（ps:其实这个里面，本不应该设置headerKey和headerValue，应该在Action中在List集合中去增加一行再进行操作。

）中间的span标签就是将要利用jQuery操作Ajax把产品信息增加到span标签里面！其次，进行jQuery操作Ajax了：<script>function onChangeOptionScenic(_this) {// 获取下拉框中的listKey值var iscenic =$(_this).val();// 设置一个变量，来进行下面的操作var htmltv ="";// 设置URL地址var url ="/tips/travelmessage.action";// Ajax操作开始$.ajax ({// 设定URLurl : url,// 设置提交方式，这里为posttype : "post",// 设置数据类型为JsondataType : "json",// 设置传过去的值的属性名data : {"iscenicid" : iscenic},// 成功返回之后的操作方法success : function(result) {// 获取Action中传回来的result的值var json =eval("("+result+")");// 循环将服务商下的产品以复选框形式拼接出来for(var i=0; i<json.length; i++) {// 将产品信息以复选框形式拼接起来htmltv +="<input type='checkbox' name='productNa me'value='"+json[i].productId+"'/>"+json[i].prod uctName;}// 添加到上面的span标签中$("#productInfo").val(htmltv);}});}</script>最后，将result进行一个映射文件的配置，配置信息如下（根据公司的一些设定而操作）：<action name="travelmessage"class="com.web.system.tips.TravelMessageAction" method="trav elMessage"><result type="json"><param name="root">result</param></result></action>在TravelMessageAction中，需要将内容返回到result中，部分代码如下：List productList = travelMessageService.getProductInfo(product);JSONArray json =new JSONArray().fromObject(productList);result = json.toString();return SUCCESS;至此，一个完整的操作已完成，这就是自己的一点点整理，希望以后有更多的有技术的知识与大家分享！。

ajax传值,jQuery.ajax,json格式转化和前台后台传值

1.ajax传输用字符串，后台接收参数用request.getParameter，所以前台必须有Parameter 如"/FirstServlet/regPage?countryId=" + countryId2.后台向前台传参数通过response，PrintWriter pw = resp.getWriter();pw.print(“df”);前台接收参数用var txt = xhr.responseText;3.如果用json字符串传输前台用jQuery.ajax是如下data : {'mydata':jsonStr},jQuery.ajax({type: "post",url: url,dataType : 'json',data : {'mydata':jsonStr},success: function(data,textStatus){alert("操作成功");},error: function(xhr,status,errMsg){alert("操作失败!");}});后台一样用request如String jsonStr = ServletActionContext.getRequest().getParameter("mydata");4.后台向前台传值一样用response如pw.print(jsonList.toString());前台接收jQuery用success: function(data,textStatus)data就是一个json（自动将json字符串转化为了json）5.json与json字符串之间的转化json的格式两种：数组["hello", 12, true , null];和对象{ "color": "red", "doors" : 4, "paidFor" : true };前台：json-json字符串JSON.stringify(jsonobj);$("#form").serialize()//表单转化为json字符串json字符串-jsoneval('(' + jsonstr + ')');JSON.parse(jsonstr);使用Function对象来进行返回解析function(data,textStatus){后台：json-json字符串jsonObj.toString()json字符串-jsonJSONObject obj1 = JSONObject.fromObject("{'dsaf':'uuuu'}");JSONObject obj = JSONObject.fromObject(address);//把对象转化为json。

通过jquery的ajax请求本地的json文件方法

通过jquery的ajax请求本地的json⽂件⽅法⾃⼰学习jquery的ajax的经历，记录⼀下ajaxTestDemo.html在body⾥⾯放⼀个id为test的div<div id="test"></div>第⼀步还是要先加载jquery⽂件 jquery.min.js<script>$(function(){$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script>shuju.json⽂件{"list":[{"item":"审计管理"},{"item":"菜单管理"},{"item":"订单管理"},{"item":"合同管理"},{"item":"物流管理"},{"item":"⾏政管理"},{"item":"⼈事管理"},{"item":"购物管理"},{"item":"批发管理"},{"item":"安全管理"},{"item":"账号管理"},{"item":"财务管理"},{"item":"其他管理"}]}/* json⽂件⾥竟然不能有这样的注释，因为困扰了⼏个⼩时！*/完整的页⾯代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试jquey的ajax⽅法</title><style>*{padding:0;margin:0;}#test{padding: 0;margin: 0 auto;width:200px;height: 400px;}#test li{list-style: none;width:200px;text-align: center;height:30px;line-height:30px;border:1px dashed lightgrey;}</style></head><body><div id="test"></div><script src="js/jquery.min.js"></script><script>$(function(){alert(1);$.ajax({//请求⽅式为gettype:"GET",//json⽂件位置url:"./data/shuju.json",//返回数据格式为jsondataType: "json",//请求成功完成后要执⾏的⽅法success: function(data){//使⽤$.each⽅法遍历返回的数据date,插⼊到id为#result中var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);}});});</script></body></html>还可以通过$.getJSON来获取本地json⽂件/* getJSON*/$(function(){$.getJSON("./data/shuju.json",function(data){var str="<ul>";$.each(data.list,function(i,n){str+="<li>"+n["item"]+"</li>";})str+="</ul>";$("#test").append(str);});});以上这篇通过jquery的ajax请求本地的json⽂件⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

JQuery ajax返回JSON时的处理方式

最近在使用JQuery的ajax方法时，要求返回的数据为json数据，在处理的过程中遇到下面的几个问题，那就是采用不同的方式来生成json数据的时候，在$.ajax方法中应该是如何来处理的，下面依次来进行说明，由于本人使用的是，所以处理的页面都是采用.net来做的！其他的方式应该是相同的吧首先给出要传的json数据：[{"demoData":"This Is The JSON Data"}]1,使用普通的aspx页面来处理本人觉得这种方式处理起来是最简单的了,看下面的代码吧$.ajax({type: "post",url: "Default.aspx",dataType: "json",success: function (data) {$( "input#showTime").val(data[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});这里是后台传递数据的代码Response.Clear();Response.Write( "[{\"demoData\":\"This Is The JSON Data\"}]");Response.Flush();Response.End();这种处理的方式将传递过来的数据直接解析为json数据，也就是说这里的前台js代码可能直接把这些数据解析成json对象数据，而并非字符串数据，如data[0].demoData，这里就直接使用了这个json对象数据2,使用webservice(asmx)来处理这种处理方式就不会将传递过来的数据当成是json对象数据，而是作为字符串来处理的，如下代码$.ajax({type: "post",url: "JqueryCSMethodForm.asmx/GetDemoData",dataType: "json", /*这句可用可不用，没有影响*/contentType: "application/json; charset=utf-8",success: function (data) {$( "input#showTime").val(eval('(' + data.d + ')')[0].demoData);//这里有两种对数据的转换方式，两处理方式的效果一样//$("input#showTime").val(eval(data.d)[0].demoData);},error: function (XMLHttpRequest, textStatus, errorThrown) {alert(errorThrown);}});下面这里为asmx的方法代码[WebMethod]public static string GetDemoData() { return"[{\"demoData\":\"This Is The JSON Data\"}]";}这里的这种处理方式就把传递回来的json数据当成了字符串来处理的，所在就要对这个数据进行eval的处理，这样才能成为真正的json对象数据，3,使用ashx文件来处理这种方式和普通的aspx的页面处理是一样的所以这里就不多做解释了！本文由淄博SEO()，淄博网站优化()整理发布，转载请注明出处。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

jQuery1. 什么是jQuery??jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。

jQuery的核心理念是Write less，Do more。

使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。

2.jQuery的特点：利用选择器来查找要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。

好处：a、兼容性更好；b、代码更简洁3.编程步骤：step1、使用选择器查找节点step2、调用jQuery的属性和方法4.jQuery对象与DOM对象之间的转换1. 什么是jQuery对象？？jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。

2. DOM对象 ----> jQuery对象DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。

function f( ){var obj = document.getElementById(‘d1’);//DOM -> jQuery对象var $obj = $(obj);$obj.html(‘hello jQuery’);}3. jQuery对象 ----> DOM对象jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。

function f( ){var $obj = $(‘#d1’);//jQuery对象 -> DOMvar obj = $(obj).get (0);obj.innerHTML = ‘hello jQuery’;}5. jQuery选择器1. 什么是jQuery选择器？？jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery 定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。

只需要在元素上加上Id属性。

2. 选择器的种类a、基本选择器#id根据指定的ID匹配一个元素.class根据指定的类匹配一个元素element根据的指定的元素名匹配所有的元素select1,select2,......将每一个选择器匹配到的元素合并后一起返回 *匹配所有元素b、层级选择器1. select1 空格 select2 查找指定元素的所有的后代2. select1 > select2 查找子节点3. select1 + select2 下一个兄弟4. select1 ~ select2 下面所有的兄弟c、过滤选择器1. 基本过滤选择器:first 获取第一元素:last 获取最后一个元素:not 排除选择器要求的元素:even 匹配所有下标为偶数的元素:odd 匹配所有下标为奇数的元素:eq 匹配所有给定索引值的元素:gt 匹配所有大于给定索引值的元素:lt 匹配所有小于给定索引值的元素2. 内容过滤选择器:contains 匹配包含给定文本的元素:empty 匹配所有不包含子元素或者文本的空元素:has 匹配含有选择器所匹配的元素的元素:parent匹配含有子元素或者文本的元素3. 可见性过滤选择器根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible 属性的判断。

:hidden 匹配所有不可见元素，或者type为hidden的元素:visible 匹配所有的可见元素4. 属性过滤选择器属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。

[attribute] 匹配包含给定属性的元素。

[attribute=value] 匹配给定的属性是某个特定值的元素[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。

[attribute^=value] 匹配给定的属性是以某些值开始的元素[attribute$=value] 匹配给定的属性是以某些值结尾的元素[attribute*=value] 匹配给定的属性是以包含某些值的元素[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

5. 子元素过滤选择器子元素过滤选择器会根据子元素的位置的数值来进行筛选。

:nth-child （index、enven、odd）匹配其父元素下的第N个子或奇偶元素。

注意':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。

:nth-child从1开始的，而:eq()是从0算起的！6. 表单对象属性过滤选择器:enabled 匹配所有可用元素:disabled 匹配所有不可用元素:checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select 中的option):selected 匹配所有选中的option元素d、表单选择器使用的规则和以上各选择器一致。

$(“：input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。

:input 匹配所有 input, textarea, select 和 button 元素:text 匹配所有的单行文本框:password 匹配所有密码框:radio 匹配所有单选按钮:checkbox 匹配所有复选框:submit 匹配所有提交按钮:image 匹配所有图片:reset 匹配所有重置按钮:button 匹配所有按钮:file 匹配所有的文件域:hidden 匹配所有不可见元素，或者type为hidden的元素6.jQuery操作DOM-查询1. html（） html()等价于innerHTML读取或修改节点的HTML内容的属性和value值。

与DOM对象的innerHTML的作用一致。

2. text（） text()等价于innerText读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可。

3. val（）读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作。

4. attr（）读取或设置修改节点的属性。

这个方法会更宽泛一些，可以修改元素的任何属性。

7. jQuery操作DOM-创建、插入、删除1. 创建DOM节点的语法使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$（html）。

大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入简写形式如 $(‘body’).append(‘<div>…</div>”)2. 插入DOM节点的方法append方法会将DOM节点作为最后一个孩子节点添加进来prepend方法将DOM节点作为第一个孩子节点添加进来after方法将DOM节点作为下一个兄弟节点添加进来before方法将DOM节点作为上一个兄弟节点添加进来3. 删除DOM节点的方法remove（）可以移除DOM，remove（selector）可以按选择器定位后删除，empty（）清空节点。

4.将js和html内容分离$(fn);注意：window.onload=function(){}等价于$(fucntion(){});但是内在的机制不相同。

fn是一个函数，表示当整个页面记载完成之后就会执行fn。

8. jQuery操作DOM-复制节点1.复制DOM节点的方法clone（）方法和clone（true）都会实现复制，添加参数true的时候会将节点的行为也复制到新的对象之上。

9. jQuery操作DOM-属性操作1. 属性操作的方法读取属性使用attr（）方法，设置属性使用attr（‘’，‘’）方法。

删除属性使用removeAttribute（‘’）方法。

10. jQuery操作DOM-样式操作attr("class","")获取和设置addClass("")追加样式removeClass("")删除所样式toggleClass("")切换样式hasClass("")是否有某个样式css("")读取css值css("","")设置多个样式11.jQuery操作DOM-遍历节点childern()/childern(selector)只考虑直子节点next()/next(selector)下一个兄弟的节点perv()/perv(selector)上一个兄弟的节点sibling()/sibling(selector)其他的兄弟find(selector)查找满足选择器的所有的后代parent()父节点，没有选择器jQuery事件处理1. 使用jQuery实现事件绑定1. 使用jQuery实现事件绑定$obj. bind(事件类型，事件处理函数)；注意：为一个jQuery对象绑定单击事件的代码实现为 $obj.bind(‘click’,fn);也可以简写为 $obj.click(fn);2. 获得事件对象event$(fucntion(e){e就是事件处理对象（jQuery对底层事件对象做了一个封装，简化代码）});3. 事件对象的常用属性a、找到事件源：var obj = e.target获取事件源使用事件对象的target属性。

b、获取发生事件时的鼠标点击的坐标：alert(e.pageX + ' ' + e.pageY);获取发生事件时的鼠标坐标使用pageX和pageY属性。

c、禁止事件冒泡e.stopPropagation();2. 事件冒泡子节点产生的事件会依次向上抛给相应的父节点当事件发生时，会首先发送给最内层的元素，在这个元素获得响应机会之后，事件会向上冒泡给更外层的元素，及从内层向外层依次传递。

3. 合成事件.hover（over，out）模拟鼠标悬停事件它为频繁使用的任务提供了一种“保持在其中”的状态。

当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。

当鼠标移出这个元素时，会触发指定的第二个函数。

而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

toggle（f1，f2，... ...）模拟连续单机事件注意的是，通过jQuery这种方式触发事件时，不会发生事件传播；只会执行直接添加到元素的处理程序。