jquery部分方法使用

本文详细介绍了jQuery中用于事件绑定的on()与off()方法的使用方法,包括如何为元素添加事件、指定事件类型、传递自定义数据,并通过实例展示了如何实现点击事件的触发与关闭。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. on() & off()

.on()這個方法是將某個selector元素一次全部載入相同的event,.live()、.delegate()和.bind()都是.on()的前身(至於有何差異這邊不多做解釋)

.on()用法

1 //將selector都載入click事件
2 $("table td").on("click",function(e){
3     alert( $(this).html() );
4 });
5  
6 //將selector底下的td元素都載入click事件
7 $("table").on("click""td",function(e){
8     alert( $(this).html() );
9 });
10  
11 //傳值給event
12 $("table").on("click", {name:"KY"},function(e){
13     alert( e.data.name );
14 });

.off()的功能則是跟.on()相反
.off()用法

1 //停用selector所有事件
2 $("table td").off();
3  
4 //停用selector所有click事件
5 $("table td").off("click");
6  
7 /*
8 關閉selector底下的td元素的click事件
9 只派的方式需相同才對應的到
10 例如
11 $("table td").on("click", test);
12 要停用事件就必須使用
13 $("table td").off("click", test);
14 */
15 $("table").on("click""td", test);
16 $("table").off("click""td", test);
17  
18 function test() {
19     alert( $(this).html() );
20 }

2.getJson

    $.getJSON("<c:url value='/achievement/getTimes'/>",
				{
					achievementKey : key
				},
				//this method return the jquery json object, not just string
				function(optionData) {
					//console.log(optionData);
					alert(optionData);
					if(!jQuery.isEmptyObject(optionData) ){
						$achieTimes.html("");
						$achieTimes.html("<option value='-1'>----请选择成就等级----</option>");
						$.each(	optionData ,function(i, times) {
						$achieTimes.append("<option value='" + times + "'>" + times + "(" + (parseInt(i) + 1) + "级)" + "</option>");
					});
							}
						}
				);


3. JQuery的Ajax跨域请求

         JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

        什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数 callback=? ,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。


客户端code:

$.ajax({
			type : "get",
			data:{
				'playerId':playerId,
				'achieKey':achieKey,
				'value' : achieTimes,
				'passwd' : "city2012"
			},
			async: false,
			url : "http://192.168.1.101:8261/city/achievement/updateachivement",
			dataType : "jsonp",
			jsonp: "callbackparam",//服务端用于接收callback调用的function名的参数
			jsonpCallback:"success_jsonpCallback",//callback的function名称
			success : function(json){
				console.log(json);
				if(json.result=='success'){
					alert("添加成功");
				}else{
					alert("添加失败");					
				}
			},
			error:function(){
				alert('fail');
			}
		});
服务器code:

response.setContentType("text/plain");
String callbackFunName = request.getParameter("callbackparam");
response.getWriter().write(callbackFunName + "( { result:\"success\"})");

4.jquery模拟click事件

$("#a").trigger("click")就是执行#a的click事件

ref:http://blog.johnsonlu.org/jquery-on-off/

ref:http://justcoding.iteye.com/blog/1366102

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值