<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery事件</title>
<style>
span {
display: none;
}
</style>
<script src="js/jquery-3.2.1.js"></script>
</head>
<body>
<p class="click">1.click事件，單擊這個段落。</p>
<p class="dblclick">2.dbbclick事件，雙擊這個段落。</p>
<input class="change" type="text" value="3.change事件">
<p>在輸入框寫一些東西，然後按下 enter 鍵或點擊輸入框外部。</p>
<input name="blur" type="text" value="4.blur事件"><br>
<script>
// 參考：
$(function () {
// 1.click。
// 參考：https://www.runoob.com/jquery/event-click.html
$("p.click").click(function () {
// alert("段落被點擊了。");
// 隱藏
$(this).hide();
// 移除
// $(this).remove();
});
// 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);
});
// 6.on
// 參考：https://www.runoob.com/jquery/event-on.html
$("p.onclick").on("click", function () {
$(this).css({"color": "red", "font-size": "large", "background-color": "pink"})
});
// 7.off
// 參考：https://www.runoob.com/jquery/event-off.html
// off() 方法通常用於移除通過 on() 方法添加的事件處理程序。
$("button.off").click(function () {
$("p.onclick").off("click");
});
// 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="onclick">6.on.click事件，單擊這個段落。</p>
<button class="off">7.off.click事件, 移除6的click 事件句柄</button>
<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事件.html
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章