jQuery - Events事件 - click单击

原创 2007年11月13日 22:25:00

jQuery - Events事件 - click单击

jQuery支持绑定HTML元素的click事件, 函数的第一个参数是event对象,在IE中,使用event.srcElement获取触发事件的对象,而在Firefox中,使用 event.target获取触发事件的对象,jQuery并没有对该事件进行封装。为了避免判断浏览器类型,可以使用this变量。

click( ) - Overview概述

Triggers the click event of each matched element.
触发每个匹配元素的单击事件。
Causes all of the functions that have been bound to that click event to be executed.

click( ) - Examples - Code

To trigger the click event on all of the paragraphs on the page:
$("p").click();

click( fn ) - Overview

Binds a function to the click event of each matched element.
绑定函数到每个匹配元素的单击事件。
The click event fires when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
  • mousedown
  • mouseup
  • click

click( fn ) - Demo

To hide paragraphs on a page when they are clicked:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){

$("p").click(function () {
$(this).slideUp();
});
$("p").hover(function () {
$(this).addClass("hilite");
}, function () {
$(this).removeClass("hilite");
});

});
</script>
<style>
p { color:red; margin:5px; cursor:pointer; }
p.hilite { background:yellow; }
</style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
</body>
</html>

click( fn ) - Arguments: - fn

fn Function

[Events/click - 文档]

http://docs.jquery.com/Events/click

[IE的onclick事件文档]

http://msdn2.microsoft.com/en-us/library/ms536913.aspx

[Firefox的event对象文档]

http://developer.mozilla.org/en/docs/DOM:event

[jQuery - 官方网站]

http://jquery.com/

[jQuery - 当前版本]

http://docs.jquery.com/Release:jQuery_1.2

[jQuery - 其他下载地址]

下载列表, http://docs.jquery.com/Downloading_jQuery
最新代码, http://code.jquery.com/nightlies/jquery-nightly.js

[jQuery - 相关论坛]

http://groups.google.com/group/jquery-en
http://WebDev.board.newsmth.net/
http://WebGeeks.board.newsmth.net/
http://bbs.pku.edu.cn/, homepage看版
http://forum.csdn.net/SList/JavaScript/

[jQuery - 关键词]

jQuery

[jQuery - Core核心]

each迭代, http://docs.jquery.com/Core/each
jQuery, http://docs.jquery.com/Core/jQuery

[jQuery - Ajax]

 jQuery的Ajax文档, http://docs.jquery.com/Ajax/jQuery.ajax
jQuery的Ajax选项,http://docs.jquery.com/Ajax/jQuery.ajax#options
dataType选项,设置返回值类型
timeout选项,用于设置超时
与PHP集成可以使用json_encode返回结果, http://www.php.net/manual/zh/function.json-encode.php

readyState获取请求操作的当前状态, http://msdn2.microsoft.com/en-us/library/ms534361.aspx

[jQuery - 特效]

jQuery淡入特效,http://docs.jquery.com/Effects/fadeIn

[jQuery - Selectors选择器]

表单元素选择器, http://docs.jquery.com/DOM/Traversing/Selectors#Form_Selectors
属性相等选择器,http://docs.jquery.com/Selectors/attributeEquals
checked选中, http://docs.jquery.com/Selectors/checked

:input匹配所有input, textarea, select和button元素, http://docs.jquery.com/Selectors/input

选择器在选择body中出现的title标记时,会出现和预期不同的效果。

element按指定名称匹配所有元素, http://docs.jquery.com/Selectors/element

[jQuery - Attributes属性]

val获取第一个匹配元素value属性的内容, http://docs.jquery.com/Attributes/val

[jQuery - 常用函数]

attr访问自定义属性,减少javascript脚本中代码和数据的耦合
filter, 用于在集合中过滤元素

[jQuery - Events事件]

hover, http://docs.jquery.com/Events/hover
submit提交, http://docs.jquery.com/Events/submit

focus响应每个匹配元素的焦点事件, http://docs.jquery.com/Events/focus

click单击, 触发每个匹配元素的单击事件, 绑定函数到每个匹配元素的单击事件, http://docs.jquery.com/Events/click

[jQuery - Traversing遍历器]

filter过滤, http://docs.jquery.com/Traversing/filter
find查找, http://docs.jquery.com/Traversing/find

[jQuery - Tutorials教程]

Introducing $(document).ready(), http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29

[jQuery - plugins插件]

Easing动画, http://jquery.com/plugins/project/easing
jCarouseLite, 走马灯效果, http://jquery.com/plugins/project/jCarouselLite
tableFilter, 表过滤器, http://jquery.com/plugins/project/tableFilter
Rounded Corner圆角矩形, http://docs.jquery.com/Tutorials:Rounded_Corners#Rounded_Corners_Without_Images

[jQuery - Utilities实用工具]

trim去掉字符串前后的空格, http://docs.jquery.com/Utilities/jQuery.trim

[jQuery - 参考资料]

http://www.json.org/, http://www.json.org/json.js

JScript (Windows Script Technologies):, http://msdn2.microsoft.com/en-us/library/hbxc2t98.aspx

prototype Property (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/f5s9ycex.aspx

parseInt Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/x53yedee.aspx

toString Method (JScript 5.6):, http://msdn2.microsoft.com/en-us/library/k6xhc6yc.aspx

HTTP Status Codes (Windows):, http://msdn2.microsoft.com/en-us/library/Aa384325.aspx

HTML+TIME:, http://msdn2.microsoft.com/en-us/library/ms533112.aspx

HTA:APPLICATION对象, http://msdn2.microsoft.com/en-us/library/ms536495.aspx

About Cross-Frame Scripting and Security:关于跨框架脚本和安全, http://msdn2.microsoft.com/en-us/library/ms533028.aspx

How to Build Tables Dynamically:如何动态构建表格, http://msdn2.microsoft.com/en-us/library/ms532998.aspx

Filter Property (Tabular Data Control): - Filter属性(表格数据控件), http://msdn2.microsoft.com/en-us/library/ms531364.aspx

[jQuery - 综合实例]

实现前一个和后一个效果

跨窗口调用函数

定时刷新

下拉列表框打开指定网站

生成在两个边界间的随机数
版权声明:本文为博主(@胡争辉)原创文章,未经博主允许不得转载。

jQuery源码分析之jQuery.event.trigger及jQuery.Event十问

首先我们给出一个例子: HTML部分: JS部分: $("#n1").on("click",function(){alert("n1 ")}); $("#n2").on("clic...
  • liangklfang
  • liangklfang
  • 2015年10月15日 15:59
  • 1540

JQuery各种点击事件的区别

在工作中,经常用到js的点击事件,有好多种表现形式,今天抽空总结一下它们的区别与联系。废话不多说,开始写测试案例。首先声明,本人水平有限,如果有错误之处,还请指正。 一、.点击事件,用到的有  1:$...
  • Lingfeng928
  • Lingfeng928
  • 2016年08月02日 16:02
  • 8536

Backbone.js中events中事件不生效

使用 Backbone 的 View 时,可以象传统 jQuery 那样定义事件,$("selector").click(function(){...})。幸运的是 Backbone 让我们在 V...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年01月04日 11:48
  • 1688

javascript事件监听机制(二)——jquery的Event对象

jQuery封装了浏览器的事件监听方法,兼容了各个浏览器的区别,对外提供一套适合于jquery对象的事件监听接口。Event对象的核心方法主要有三个,add,remove和trigger。 elem对...
  • u013237862
  • u013237862
  • 2017年04月08日 12:19
  • 1456

Jquery中的bind(),on()绑定事件方式总结

一.bind() 使用方式:$(selector).bind(event,data,function) event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等; ...
  • qq_27918787
  • qq_27918787
  • 2016年09月14日 19:43
  • 3667

jQuery 双击事件(dblclick)时,不触发单击事件(click)

万恶的双击事件啊!!   在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和...
  • zhengbo0
  • zhengbo0
  • 2013年08月23日 10:09
  • 1287

jQuery 双击事件(dblclick)时,不触发单击事件(click)

jQuery 双击事件(dblclick)时,不触发单击事件(click)   在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如...
  • xsj34567
  • xsj34567
  • 2014年04月29日 17:32
  • 459

jQuery 双击事件(dblclick)时,不触发单击事件(click)

jQuery 双击事件(dblclick)时,不触发单击事件(click)   在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如...
  • zhihui1017
  • zhihui1017
  • 2015年12月28日 17:56
  • 318

jQuery 双击事件(dblclick)时,不触发单击事件(click)

万恶的双击事件啊!!   在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和...
  • psiitoy
  • psiitoy
  • 2014年06月10日 17:43
  • 568

Jquery实现双击行的同时不单计行(在Javascript中让单击Click和Double Click双击事件各自独立)

在Javascript中,如果对一个元素同时绑定Click和Double Click事件,在进行Double Click动作时,程序在响应一个双击事件的同时,还会响应两个单击事件。从原理上来说这应...
  • binyao02123202
  • binyao02123202
  • 2011年04月29日 11:52
  • 2902
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery - Events事件 - click单击
举报原因:
原因补充:

(最多只允许输入30个字)