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. $(document).ready();
2. $(); 这种比较常用
图片加载用load()函数
运行效果
<script src="https://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="https://how2j.cn/example.gif">
<script src="https://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="https://how2j.cn/example.gif">



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
click() 表示单击
dblclick() 表示双击
注: 空白键和回车键也可以造成click事件,但是只有双击鼠标才能造成dblclick事件
运行效果
<script src="https://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="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
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="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
mousedown 表示鼠标按下
mouseup表示鼠标弹起


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


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




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


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


mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout:当鼠标经过其子元素被调用
运行效果
<script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
focus() 获取焦点
blur() 失去焦点
运行效果
<script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
change() 内容改变

注:
对于文本框,只有当该文本失去焦点的时候,才会触发change事件。
运行效果
<script src="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
submit() 提交form表单
运行效果
<script src="https://how2j.cn/study/jquery.min.js"></script> <form id="form" action="https://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="https://how2j.cn/study/jquery.min.js"></script>
 
<form id="form" action="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
以上所有的事件处理,都可以通过on() 绑定事件来处理

$("selector").on("event",function);
运行效果
<script src="https://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="https://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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
触发事件,在本例中,文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击。

$("selector").trigger("event");
运行效果
<script src="https://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="https://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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2020-09-23 表示对有些语法真的看不懂
峰峰QVQ

特别是实例3,很多都看不懂啊。站长能不能照顾点初学者啊!




1 个答案

jojo1211
答案时间:2022-02-15
我也看不懂就直接跳过了(手动狗头)



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-03-09 submit() 为什么会跳转到 “您提交的账户名” ?
shek




在什么地方写了这个功能?
加载中

							

							


2 个答案

LuzfeI
答案时间:2020-08-05
jsp页面

Howtwo
答案时间:2020-03-11
在这个网页里 <form id="form" action="https://how2j.cn/study/login.jsp">



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2019-05-18 第一题,jquery3.4.1加载图片报错
2019-04-11 请求重现“您这个图片是真的骚”
2018-12-30 示例3中的clearTimeout怎么理解?


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 7 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-JQuery-事件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图