jQuery获取单击节点对象的方法


Posted in Javascript onJune 02, 2016

本文实例讲述了jQuery获取单击节点对象的方法。分享给大家供大家参考,具体如下:

event.target属性:

<script language="JavaScript" type="text/javascript">
$("document").ready(function () {
  $(".menu").bind("click", function (event) {
    var clickedNode = event.target;
    var NodeType = event.target.nodeName;
    if (NodeType == "DIV") {
      return;
    }
    if (NodeType == "INPUT") {
      var DivId = clickedNode;
      $(".menu").removeClass('addborder');
      $(DivId.parentNode).addClass('addborder');
    }
    if (NodeType == "A") {
      var DivId = clickedNode;
      $(".menu").removeClass('addborder');
      $(DivId.parentNode.parentNode).addClass('addborder');
    }
  })
</script>

解释: 其中event.target 即为触发单击事件的对象 (有可能是容器内部的某个控件)

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

C语言风格/HTML/CSS/json代码格式化美化工具:
http://tools.3water.com/code/ccode_html_css_json

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
VSCode 配置React Native开发环境的方法
Dec 27 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
React中使用Vditor自定义图片详解
Dec 25 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 #Javascript
JavaScript核心语法总结(推荐)
Jun 02 #Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 #Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 #Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 #Javascript
深入理解Ajax的get和post请求
Jun 02 #Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 #Javascript
You might like
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
基于jquery跨浏览器显示的file上传控件
2011/10/24 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
微信小程序实现横向增长表格的方法
2018/07/24 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python 动态加载的实现方法
2017/12/22 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
详解Django配置JWT认证方式
2020/05/09 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
会议室标语
2014/06/21 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP