jQuery中click事件用法实例


Posted in Javascript onDecember 26, 2014

本文实例讲述了jQuery中click事件用法。分享给大家供大家参考。具体分析如下:

当鼠标指针在匹配元素上方,然后按下并松开鼠标左键或者调用click()方法都会触发click事件。

一个完整的事件过程,不但要有能够触发事件的条件,而且还要有事件处理程序。

可以通过click()方法为click事件绑定事件处理程序。例如:

$("button").click(function(){$("div").css("color","green")})

以上代码就是将function函数作为事件处理程序通过click()方法绑定到click事件。当触发click事件的时候,就会调此函数。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>click事件-三水点靠木</title> 

<style type="text/css">

div{

  width:100px;

  height:100px;

  border:1px solid blue;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){$("div").css("color","green")})

})

</script>

</head>

<body>

<div>测试脚本</div>

<button>点击查看效果</button>

</body>

</html>

以上代码中,点击按钮可以将div中的字体颜色设置为绿色。

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

Javascript 相关文章推荐
3种js实现string的substring方法
Nov 09 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
浅谈angular.copy() 深拷贝
Sep 14 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
javascript实现类似超链接的效果
Dec 26 #Javascript
浅析javascript操作 cookie对象
Dec 26 #Javascript
浅谈javascript对象模型和function对象
Dec 26 #Javascript
angularjs基础教程
Dec 25 #Javascript
jQuery中detach()方法用法实例
Dec 25 #Javascript
jQuery中remove()方法用法实例
Dec 25 #Javascript
jQuery中replaceWith()方法用法实例
Dec 25 #Javascript
You might like
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js格式化时间小结
2014/11/03 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
python实现kmp算法的实例代码
2019/04/03 Python
django 中QuerySet特性功能详解
2019/07/25 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python根据时间获取周数代码实例
2019/09/30 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python学习之os模块及用法
2020/06/03 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
新加坡交友网站:be2新加坡
2019/04/10 全球购物
几个Shell Script面试题
2014/04/18 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
研讨会致辞
2015/07/31 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书