jquery 关于event.target使用的几点说明介绍
2015-08-25 11:09
896 查看
event.target
说明:引发事件的DOM元素。
this和event.target的区别
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
this和event.target的相同点
this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);
这使我想起了以前写的一个例子:
那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr,而不用通过$(_tmpQuery.parents('tr:first')).hide();这样的方式,具体代码如下:
event.target和$(event.target)的使用
View Code
toggle()不带参数的作用:
toggle有两种作用:
toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
toggle(fn,fn)
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。
说明:引发事件的DOM元素。
this和event.target的区别
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
this和event.target的相同点
this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);
这使我想起了以前写的一个例子:
//del event $(".del").bind("click",function(event){ var _tmpQuery=$(this);//为什么要加上这一句? var id=$("input[name='id']",$(this).parents("form:first")).attr("value"); art.dialog.confirm('你确认删除该日志吗?',function(){ $.post("myRun/managerlog_del.php",{id:id},function(tips){ if(tips=='ok'){ art.dialog.tips('成功删除'); $(_tmpQuery.parents('tr:first')).hide();//如果不加第一句,这里用$($(this).parents('tr:first')).hide();则不会隐藏 //因为这里的this,并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试:alert(this.url); }else{ art.dialog.tips(tips,5); } }); return true; }); });
那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr,而不用通过$(_tmpQuery.parents('tr:first')).hide();这样的方式,具体代码如下:
$(".del").bind("click",function(event){ //var _tmpQuery=$(this);这行代码可以删除 var id=$("input[name='id']",$(this).parents("form:first")).attr("value"); art.dialog.confirm('你确认删除该日志吗?',function(){ $.post("myRun/managerlog_del.php",{id:id},function(tips){ if(tips=='ok'){ art.dialog.tips('成功删除'); $(event.target).parents('tr:first').hide(); }else{ art.dialog.tips(tips,5); } }); return true; }); });
event.target和$(event.target)的使用
<!DOCTYPE html> <html> <head> <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script> $(document).ready(function(){ function handler(event) { var $target = $(event.target); if( $target.is("li") ) { $target.children().toggle(); } } $("ul").click(handler).find("ul").hide();//从这里也看出find只在后代中遍历,不包括自己。 }); </script> </head> <body> <ul> <li>item 1 <ul> <li>sub item 1-a</li> <li>sub item 1-b</li> </ul> </li> <li>item 2 <ul> <li>sub item 2-a</li> <li>sub item 2-b</li> </ul> </li> </ul> </body> </html>
View Code
toggle()不带参数的作用:
toggle有两种作用:
toggle()
切换元素的可见状态。
如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
toggle(fn,fn)
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
可以使用unbind("click")来删除。
相关文章推荐
- jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
- 基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
- [Jquery]判断数据类型
- jQuery合作伙伴左右滚动特效
- 使用jQuery的ajax同步请求吃过的亏
- jquery图片滚动放大代码分享(1)
- Jquery事件学习笔记
- jquery实现在网页指定区域显示自定义右键菜单效果
- 通过jquery 获取文本框的聚焦和失焦方法
- js和jQuery写简单下拉菜单
- jquery实现的3D旋转木马特效代码分享
- jQuery选择器总结[转载]
- JQuery学习笔记(1)
- 14种网页图片和文字特效的jQuery插件代码
- Jquery实现超酷的时间轴特效
- jQuery+CSS实现的网页二级下滑菜单效果
- jQuery实现点击小图显示大图代码分享
- 基于jquery实现select选择框内容左右移动添加删除代码分享
- jQuery EasyUI parser 的使用场景
- jquery的$.extend和$.fn.extend作用及区别