<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 事件</title>
<style>
span {
display: none;
}
</style>
<script src="lib/jquery/jquery-3.2.1.js"></script>
</head>
<body>
<p class="dblclick">2.dblclick事件,双击这个段落。</p>
<input class="change" type="text" value="3.change 事件">
<p>在输入框写一些东西,然后按下 enter 键或点击输入框外部。</p>
<input name="blur" type="text" value="4.blur事件"><br>
<script>
$(function () {
// 2.dblclick
// 参考:https://www.runoob.com/jquery/event-dblclick.html
$("p.dblclick").dblclick(function () {
alert("这个段落被双击了。");
});
// 3.change(触发条件:更改文本框后,回车或点击输入框外部)
// 参考:https://www.runoob.com/jquery/event-change.html
$("input.change").change(function () {
alert("文本已被修改");
});
// 4.blur
// 参考:https://www.runoob.com/jquery/event-blur.html
// 以下两种写法都行。
// $("input[name='blur']").blur(function () {
$("input[name=blur]").blur(function () {
alert("输入框失去了焦点");
});
// 5.focus
// 参考:https://www.runoob.com/jquery/event-focus.html
$("input.focus").focus(function () {
// 设置span元素的样式及其动画效果(耗时2s,淡出)。
$("span").css("display", "inline").fadeOut(2000);
});
// 8.one
// 参考:https://www.runoob.com/jquery/event-one.html
// 当使用 one() 方法时,每个元素只能运行一次事件处理程序函数。
$("p.oneClick").one("click", function () {
// jquery动画。
$(this).animate({fontSize: "+=6px"});
});
$("button.slide").click(function () {
// 段落上、下滑动。
$("p.oneClick").slideToggle();
});
// 9.hover
// 参考:https://www.runoob.com/jquery/event-hover.html
// hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
// 方法触发 mouseenter 和 mouseleave 事件。
// 注意: 如果只指定一个函数,则 mouseenter 和 mouseleave 都执行它。
$("p.hover").hover(
function () {
$(this).css({"color": "red", "font-size": "large"});
},
function () {
$(this).css({"color": "black", "font-size": "medium"});
}
);
// 10.focusin && focusout
// 参考:https://www.runoob.com/jquery/event-focusin.html
// 当 <div> 元素或其任意子元素获得焦点时,设置 <div> 元素的背景颜色。
// 当 <div> 元素或其任意子元素失去焦点时,设置 <div> 元素的背景颜色。
// 与 focus() 方法不同的是,focusin() 方法在任意子元素获得焦点时也会触发。
// 与 blur() 方法不同的是,focusout() 方法在任意子元素失去焦点时也会触发。
// 获取焦点,貌似是输入框的特有功能。
$("div").focusin(function () {
$(this).css("background-color", "#FFFFCC");
});
$("div").focusout(function () {
$(this).css("background-color", "#FFFFFF");
});
// 11.resize(调整浏览器窗口大小事件,拖动控制台边线,也算改变窗口大小。)
// 参考:https://www.runoob.com/jquery/event-resize.html
let x = 0;
$(window).resize(function () {
x++;
// $("p.resize").html(x);
// $("div p").html(x);
$("div>p").html(x);
console.log("x:", x);
});
// 12.select
// 参考:https://www.runoob.com/jquery/event-select.html
// 当 textarea 或文本类型的 input 元素中的文本被选择(标记)时,会发生 select 事件。
$("input.select").select(function () {
alert("文本已选中!");
});
// 13.submit(表单提交事件,点击提交按钮后,提交前触发。)
// 参考:https://www.runoob.com/jquery/event-submit.html
// 当提交表单时,会发生 submit 事件。
// 该事件只适用于 <form> 元素。
$("form").submit(function () {
alert("提交");
});
});
</script>
<input class="focus" value="5.focus事件">
<span>请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>
<p class="oneClick">8.oneClick事件,这是一个段落 。</p>
<p class="oneClick">8.oneClick事件,这是另外一个段落。</p>
<p class="oneClick">8.oneClick事件,点击任意一个段落来修改段落的字体大小,每个段落只会执行一次。</p>
<button class="slide">滑动8的三个段落</button>
<p class="hover">9.hover事件,鼠标移动到该段落。</p>
<div style="border: 1px solid black;padding:10px;">
10.First name: <input type="text"><br>
Last name: <input type="text">
</div>
<p>输入框获取焦点,输入框失去焦点。</p>
<div>
11.resize事件,窗口重置了
<p class="resize">0</p>
次大小。
</div>
<input class="select" type="text" value="12.select事件,www.runoob.com">
<p>在输入框中选取文本</p>
<form action="">
13.submit事件,First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
<input class="trigger" type="text" value="14.trigger.select事件,Hello World">
<br><br>
<button class="trigger">触发输入框的 select 事件</button>
<br>
<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button>
<br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点,触发事件的默认行为,而 .triggerHandler 仅仅
执行了指定的事件浏览器并未执行动作,输入框也没有获取焦点。</p>
<input class="triggerHandler" type="text" value="将获取焦点">
<input class="triggerHandler" type="text" value="将获取焦点">
<script>
$(function () {
// 14.trigger(用于,触发某元素的某事件。)
// 参考:https://www.runoob.com/jquery/event-trigger.html
// trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交, 浏览器的行为、动作)。
$("input.trigger").select(function () {
// $("input").before("文本已选中! ");
$(this).after(" 文本已选中!");
});
$("button.trigger").click(function () {
// 触发 <input.trigger> 元素的 select 事件
$("input.trigger").trigger("select");
});
// 15.trigger vs triggerHandler
// 参考:https://www.runoob.com/jquery/event-trigger.html
// trigger方法与triggerHandler方法类似,不同的是triggerHandler不触发事件的默认行为。
// trigger方法会操作jQuery对象匹配的所有元素,而triggerHandler方法只影响第一个匹配元素。
// 由triggerHandler()创建的事件不会在DOM树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
$("#old").click(function () {
$("input.triggerHandler").trigger("focus");
});
$("#new").click(function () {
$("input.triggerHandler").triggerHandler("focus");
});
$("input.triggerHandler").focus(function () {
$(this).after(" 文本已选中!");
$(this).css({"color": "red", "font-size": "large"});
// $("<p>获取焦点!</p>").appendTo("body").fadeOut(2000);
// $("body").append("<p>获取焦点!</p>");
});
});
</script>
</body>
</html>
jquery 事件 dblclick_change_blur_focus_one_hover_focusin_focusout_resize_select_submit.html
于 2019-07-26 17:54:45 首次发布