how2j.cn

关键字 简介 示例代码
$(document).ready()
$()
load()
加载
示例代码
click()
dblclick()
点击
示例代码
keydown()
keypress()
keyup
键盘
示例代码
mousedown()
mouseup()
mousemove()
mouseenter()
mouseleave()
mouseover()
mouseout()
鼠标
示例代码
focus()
blur()
焦点
示例代码
change()
改变
示例代码
submit()
提交
示例代码
on()
绑定事件
示例代码
trigger()
触发事件
示例代码
示例 1 : 加载   
示例 2 : 点击   
示例 3 : 键盘   
示例 4 : 鼠标   
示例 5 : 焦点   
示例 6 : 改变   
示例 7 : 提交   
示例 8 : 绑定事件   
示例 9 : 触发事件   

示例 1 :

加载

页面加载有两种方式表示
1. $(document).ready();
2. $(); 这种比较常用
图片加载用load()函数
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(document).ready(function(){ $("#message1").html("页面加载成功"); }); $(function(){ $("#img").load(function(){ $("#message2").html("图片加载成功"); }); }); </script> <div id="message1"></div> <div id="message2"></div> <img id="img" src="http://how2j.cn/example.gif">
<script src="http://how2j.cn/study/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $("#message1").html("页面加载成功");
  
  });
  $(function(){
    $("#img").load(function(){
      $("#message2").html("图片加载成功"); 
    });
  });

</script>
 
<div id="message1"></div>
<div id="message2"></div>

<img id="img" src="http://how2j.cn/example.gif">



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

点击

click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").click(function(){ $("#message").html("单击按钮"); }); $("#b").dblclick(function(){ $("#message").html("双击按钮"); }); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button>
<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<script>
  $(function(){
      $("#b").click(function(){
          $("#message").html("单击按钮");
      });
      $("#b").dblclick(function(){
          $("#message").html("双击按钮");
      });
  });
</script>
  
<div id="message"></div>

<button id="b">测试单击和双击</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

键盘

keydown 表示按下键盘
keypress 表示按下键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面
先后顺序: 按照 keydown keypress keyup 顺序发生
键盘按钮值
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键,不能识别大小写
keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写
文本取值
keydown和keypress:不能获取最后一个字符
keyup: 获取所有字符
如图所例,敲入ab
发生的先后顺序是 keydown,keypress,keyup
keydown和keyup取到大写B的ASCII码表 66,keypress取到小写b的ASCII码表 98.
keydown和keypress只能取到文本值a, keyup可以取到ab
运行效果
键盘
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> var order = 0; var clearTimer=null; $(function(){ $("#i").keydown(function(e){ var selector = "keydown"; show(selector,e,$(this).val()); }); $("#i").keypress(function(e){ var selector = "keypress"; show(selector,e,$(this).val()); }); $("#i").keyup(function(e){ var selector = "keyup"; show(selector,e,$(this).val()); }); }); function show(selector,e,inputvalue){ clearTimeout(clearTimer); action(selector); key(selector,e); value(selector,inputvalue); clearTimer= setTimeout(clear,4000); } function action(selector){ $("#"+selector+"Action").css("background-color","green"); $("#"+selector+"Action").html("顺序: " + (++order ) ); } function value(selector,value){ $("#"+selector+"Value").html(value); } function key(selector,e){ $("#"+selector+"Key").html(e.which); } function clear(){ order = 0; $("tr#action div").css("background-color","red"); $("tr div").html(""); } </script> <style> tr#action div{ border: 1px solid black; height:50px; background-color:red; } tr#value div,tr#key div{ height:50px; background-color:#d1d1d1; } td{ width:25%; } </style> 输入框:<input id="i"> <table width="100%"> <tr> <td></td> <td>keydown</td> <td>keypress</td> <td>keyup</td> </tr> <tr id="action"> <td>行为</td> <td><div id="keydownAction"></div></td> <td><div id="keypressAction"></div></td> <td><div id="keyupAction"></div></td> </tr> <tr id="key"> <td>按键</td> <td><div id="keydownKey"></div></td> <td><div id="keypressKey"></div></td> <td><div id="keyupKey"></div></td> </tr> <tr id="value"> <td>取值</td> <td><div id="keydownValue"></div></td> <td><div id="keypressValue"></div></td> <td><div id="keyupValue"></div></td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

鼠标

mousedown 表示鼠标按下
mouseup表示鼠标弹起


mousemove表示鼠标进入
mouseenter表示鼠标进入
mouseover表示鼠标进入


mouseleave表示鼠标离开
mouseout表示鼠标离开




进入事件有3个 mousemove mouseenter mouseover
mousemove :当鼠标进入元素,每移动一下都会被调用
mouseenter :当鼠标进入元素,调用一下,在其中移动,不调用
mouseover:当鼠标进入元素,调用一下,在其中移动,不调用


mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover:当鼠标经过其子元素被调用


mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout:当鼠标经过其子元素被调用
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#downup").mousedown(function(){ $(this).html("鼠标按下"); }); $("#downup").mouseup(function(){ $(this).html("鼠标弹起"); }); var moveNumber =0; var enterNumber =0; var leaveNumber =0; var overNumber =0; var outNumber =0; var enterNumber1 =0; var overNumber1 =0; var leaveNumber1 =0; var outNumber1 =0; $("#move").mousemove(function(){ $("#move span.number" ).html(++moveNumber); }); $("#enter").mouseenter(function(){ $("#enter span.number" ).html(++enterNumber); }); $("#leave").mouseleave(function(){ $("#leave span.number" ).html(++leaveNumber); }); $("#over").mouseover(function(){ $("#over span.number" ).html(++overNumber); }); $("#out").mouseout(function(){ $("#out span.number" ).html(++outNumber); }); $("#enter1").mouseenter(function(){ $("#enter1 span.number" ).html(++enterNumber1); }); $("#over1").mouseover(function(){ $("#over1 span.number" ).html(++overNumber1); }); $("#leave1").mouseleave(function(){ $("#leave1 span.number" ).html(++leaveNumber1); }); $("#out1").mouseout(function(){ $("#out1 span.number" ).html(++outNumber1); }); }); </script> <style> div{ background-color:pink; margin:20px; padding:10px; } .subDiv{ background-color:green; margin:10px; } .parentDiv{ background-color:pink; height:80px; } table{ width:100%; border-collapse:collapse; table-layout:fixed; } td{ border: 1.5px solid #d1d1d1; vertical-align:top; padding:20 0; } </style> <table > <tr> <td width="100px">事件</td> <td>效果演示</td> </tr> <tr> <td>mousedown <br /> mouseup<br /></td> <td> <button id="downup" style="margin-left:20px">鼠标按下弹起测试</button> </td> </tr> <tr> <td>mousemove<br /> mouseenter<br /> mouseover<br /> mouseleave<br /> mouseout</td> <td> <div id="move">mousemove 当鼠标进入元素,每移动一下都会被调用 次数<span class="number">0</span></div> <div id="enter">mouseenter 当鼠标进入元素,调用一下,在其中移动,不调用 次数<span class="number">0</span></div> <div id="over">mouseover 当鼠标进入元素,调用一下,在其中移动,不调用 次数<span class="number">0</span></div> <div id="leave">mouseleave 当鼠标离开元素,调用一下 次数<span class="number">0</span></div> <div id="out">mouseout 当鼠标离开元素,调用一下 <span class="number">0</span></div> </tr> <tr> <td>mouseenter<br /> mouseover</td> <td> <div id="enter1" class="parentDiv"> mouseenter 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> <div id="over1" class="parentDiv"> mouseover 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> </td> </tr> <tr> <td>mouseleave<br /> mouseout </td> <td> <div id="leave1" class="parentDiv"> mouseleave 经过其子元素不会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> <div id="out1" class="parentDiv"> mouseout 经过其子元素会被调用 次数<span class="number">0</span> <div class="subDiv">div中的子元素 </div> </div> </td> </tr> </table>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

焦点

focus() 获取焦点
blur() 失去焦点
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("input").focus(function(){ $(this).val("获取了焦点"); }); $("input").blur(function(){ $(this).val("失去了焦点"); }); }); </script> <style> </style> <input type="text" > <input type="text" >


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

改变

change() 内容改变

注:
对于文本框,只有当该文本失去焦点的时候,才会触发change事件。
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#input1").change(function(){ var text = $(this).val(); $("#message").html("input1的内容变为了"+text); }); }); </script> <style> </style> <div id="message"></div> <input id="input1" type="text" > <br> <input size="50" id="input2"type="text" value="只有当input1失去焦点的时候,才会触发change事件" >


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

提交

submit() 提交form表单
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <form id="form" action="http://how2j.cn/study/login.jsp"> 账号 : <input name="name" type=""> <br> 密码: <input name="password" type=""><br> <input type="submit" value="登陆"> </form> <script> $(function(){ $("#form").submit(function(){ alert("提交账号密码"); }); }); </script>
<script src="http://how2j.cn/study/jquery.min.js"></script>
 
<form id="form" action="http://how2j.cn/study/login.jsp">
账号 : <input name="name" type=""> <br>
密码: <input name="password" type=""><br>
<input type="submit" value="登陆">
 
</form>
  
<script>
$(function(){

   $("#form").submit(function(){
      alert("提交账号密码");
   });
});
 
</script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

绑定事件

以上所有的事件处理,都可以通过on() 绑定事件来处理

$("selector").on("event",function);
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button>
<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });

  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

触发事件

触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击。

$("selector").trigger("event");
运行效果
<script src="http://how2j.cn/study/jquery.min.js"></script> <script> $(function(){ $("#b").on("click",function(){ $("#message").html("单击按钮"); }); $("#b").on("dblclick",function(){ $("#message").html("双击按钮"); }); $("#b").trigger("dblclick"); }); </script> <div id="message"></div> <button id="b">测试单击和双击</button>
<script src="http://how2j.cn/study/jquery.min.js"></script>
  
<script>
  $(function(){
      $("#b").on("click",function(){
          $("#message").html("单击按钮");
      });
      $("#b").on("dblclick",function(){
          $("#message").html("双击按钮");
      });
     $("#b").trigger("dblclick");
  });
</script>
   
<div id="message"></div>
 
<button id="b">测试单击和双击</button>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-11-05 change事件
iloveyou无望
站长,有没有类似change事件一样,文本框的值改变了立即发生反应,而不用失去焦点再反应?




1 个答案

how2j 答案时间:2017-11-06
keyup




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-08-23 键盘事件
chenhuozhi



站长,这里为什么有两个</td>,是写错了,还是什么原因?

							

							


1 个答案

how2j 答案时间:2017-08-24
确实是写重复了,谢谢提醒:)




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-08-08 关于示例3的function(e)的参数e,我理解这个参数用途是把event事件传进来,可是这个event事件是什么时候传进来的?,我看了全部代码都没看到event传进来,是自动识别e就传进来了吗?
2017-06-20 change和blur的区别
2016-10-11 键盘事件
2016-07-02 有关function clear()




提问之前请登陆
关于 前端基础-JQuery-事件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 620943819
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图