jQuery操作事件完整实例分析


Posted in jQuery onJanuary 10, 2020

本文实例讲述了jQuery操作事件。分享给大家供大家参考,具体如下:

<html>
 <head>
 <title>jQuery操作事件</title>
 <meta charset="UTF-8"/>
 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
//点击事件  
  //js操作事件
  function testJs(){
  //获取对象
  var btn=document.getElementById("btn");
  //设置其onclick属性
  btn.onclick=function(){alert("这是js操作事件")};  //仅需要触发一次就可以无限次的点击触发按钮的点击事件 
  }
  function testBind(){
  //获取对象
  var btn=$("#jq");
  //利用jQuery进行事件的绑定
  btn.bind("click",function(){alert("jQuery绑定实现")}); //对onclick属性进行绑定,当触发事件后,运行后触发函数,其中click算是一个属性,所以用“”链接,而后面的函数则是内容,没用“”
  btn.bind("click",function(){alert("绑定第二个呢")});   //可以连续点击几次来在点击一次时触发几次函数
  }
  function testUnbind(){
  //获取对象
  var btn=$("#jq");
  //利用jQuery进行事件的解绑
  btn.unbind("click");    //解绑jQuery的事件,无论点击了几次
//  $("#jq").unbind("click");
  }
  function testOne(){
  //获取对象
  var btn=$("#one");
  //利用jQuery的one方法进行事件的绑定
  btn.one("click",function(){alert("jQuery利用one实现绑定")});   //只会绑定一次,当事件触发后就会失效
  }
//点击页面加载事件
  window.onload=function testLoad(){
  alert("JS方法进行页面加载");
  }
  window.onload=function testLoad(){
  alert("JS方法进行页面加载,替换了吗");    //js的操作有覆盖操作,不会连续操作
  }
  $(document).ready(alert("jQuery实现的页面操作"));
  $(document).ready(alert("jQuery实现的页面操作,这个还有吗"));  //jQuery不会进行覆盖,其全部都会显示
 </script>
 </head>
 <body>
 <h3 align="center">jQuery操作事件</h3>
 <hr />
 <input type="button" name="" id="" value="测试js操作事件" onclick="testJs()"/>  <!--先点击下面的按钮不会触发事件,其还没有onclick属性,但是当点击了这个按钮,调用了函数,给对象设置了onclick属性,再次点击下面的按钮就会触发事件-->
 <input type="button" name="" id="" value="测试jQuery绑定操作事件-bind" onclick="testBind()"/>
 <input type="button" name="" id="" value="测试jQuery解绑操作事件" onclick="testUnbind()"/>
 <input type="button" name="" id="" value="测试jQuery绑定操作事件-one" onclick="testOne()"/>
 <!--<input type="button" name="" id="" value="测试js页面加载操作事件" onclick="testLoad()"/>-->
 <hr />
 <input type="button" name="btn" id="btn" value="测试js" /> <!-- 其没有onclick操作,所以其不会有点击触发事件-->
 <input type="button" name="jq" id="jq" value="测试jQuery" />
 <input type="button" name="one" id="one" value="测试one" />
 </body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
jquery实现吸顶导航效果
Jan 08 #jQuery
基于jQuery实现挂号平台首页源码
Jan 06 #jQuery
详解jQuery中的prop()使用方法
Jan 05 #jQuery
jQuery 选择器用法基础入门示例
Jan 04 #jQuery
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
基于Vue和Element-Ui搭建项目的方法
2019/09/06 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
浅谈Python爬虫基本套路
2019/03/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
写给女朋友的道歉信
2014/01/12 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
介绍信范文大全
2015/05/07 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
python - timeit 时间模块
2021/04/06 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang