|
|
|
示例 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">
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>
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>
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>
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" >
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事件" >
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>
以上所有的事件处理，都可以通过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>
触发事件，在本例中，文档加载好之后，就触发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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2020-09-23
表示对有些语法真的看不懂
2020-03-09
submit() 为什么会跳转到 “您提交的账户名” ？
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 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
