前端基础 - JQuery事件切换(原来还有这种写法)

简介: 前端基础 - JQuery事件切换(原来还有这种写法)

JQuery事件切换

效果图:

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
      $(function() {
        /**第一种写法*/
        /*$("#divId").mouseover(function() {
          $(this).html("鼠标进入");
        }).mouseout(function() {
          $(this).html("鼠标离开");
        })*/
        /**第二种写法*/
        $("#divId").hover(function() {
          $(this).html("鼠标进入");
        }, function() {
          $(this).html("鼠标离开");
        })
        var i = 0;
        $("#bId").click(function() {
          i++;
          if(i % 2 == 0) {
            alert("222");
          } else {
            alert("111");
          }
        })
        /*$("#bId").toggle(function() { //浏览器有可能会不兼容
          alert("111");
        }, function() {
          alert("222")
        })*/
      })
    </script>
  </head>
  <body>
    <input type="button" id="bId" value="点击查看" /><br>
    <div id="divId" style="border:1px solid red;height:100px;width:100px">事件切换</div>
  </body>
</html>
目录
相关文章
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
68 5
|
2月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
40 3
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
33 2
|
4月前
|
JavaScript
jQuery 事件
jQuery 事件
44 10
|
4月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
35 0
|
4月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
42 3
|
3月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
190 0
|
4月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
21 0
|
5月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
69 13