前端基础 - 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>
目录
相关文章
N..
|
1月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
1月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
22 1
|
5月前
|
设计模式 JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
1月前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
1月前
|
前端开发 JavaScript API
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
43 0
|
3月前
|
前端开发 JavaScript 数据安全/隐私保护
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
前端点击其他输入框的时候,对当上个输入框进行判断(鼠标移出输入框事件,和鼠标点击其他输入框触发事件)
43 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0