abstract：jq 事件函數(shù)練習(xí) 在 jquery 中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件 簡單理解：事件方法會觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個事件 ready()方法：文檔對象模型DOM完全加載完后觸發(fā)事件;相當(dāng)于 js 的 onload 事件。語法：$(document).ready(function(){})注意不可以跟<body onload=&qu
jq 事件函數(shù)練習(xí)
在 jquery 中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件
簡單理解：事件方法會觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個事件
ready()方法：文檔對象模型DOM完全加載完后觸發(fā)事件;相當(dāng)于 js 的 onload 事件。
語法：
$(document).ready(function(){})注意不可以跟<body onload="">一起使用。
blur()方法：當(dāng)元素失去焦點時調(diào)用事件;相當(dāng)于 js 中的 onblur。
舉例：input 元素失去焦點后寬度變?yōu)?00px：
$("input").blur(function () {
$("input").css("width", "100px")
})focus()方法：當(dāng)元素獲得焦點時調(diào)用事件;相當(dāng)于 js 中的 on focus。 效果與 blur()相反。
click()方法：元素被點擊后觸發(fā)事件。
舉例：單擊按鈕彈窗：
$("button").click(function () { alert("按鈕被點擊了") })dblclick()方法：元素被雙擊后觸發(fā)事件;
mouseover()方法：鼠標(biāo)指針位于元素上方時觸發(fā)事件;
mouseenter()方法：鼠標(biāo)指針穿過元素時觸發(fā)事件;
不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。對應(yīng)mouseout
只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件。對應(yīng)mouseleave
pageX()方法:獲取鼠標(biāo)的 x 坐標(biāo);
pageY()方法:獲取鼠標(biāo)的 Y 坐標(biāo);
resize()方法:調(diào)整瀏覽器大小時觸發(fā)事件;
用上述所有方法做了一個案例:
改變窗口大小 div1背景變化
代碼"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.3.1.js"></script>
<style>
div {
width: 200px;
height: 200px;
background: red;
margin-bottom: 50px;
/* border: 3px solid rgb(70, 70, 0); */
}
.box1,
.box2 {
position: relative;
left: 150px;
width: 100px;
height: 100px;
background: rgb(25, 11, 221);
margin-bottom: 20px;
}
</style>
</head>
<body>
<script>
$(document).ready(function () {//jq就緒函數(shù)
$(".div1").mouseenter(function () {//鼠標(biāo)進(jìn)入該元素，文字變化
$(".div1").html("鼠標(biāo)穿過了這個元素，所以這里面的內(nèi)容發(fā)生了變化")
})
$(".div1").mousedown(function () {//鼠標(biāo)在該元素按下，元素變小
$(".div1").css({
"width": "180px",
"height": "180px"
})
})
$(".div1").mouseup(function () {//鼠標(biāo)在該元素抬起，元素變大
$(".div1").css({
"width": "250px",
"height": "250px"
})
})
$(".div1").mouseleave(function () {//鼠標(biāo)離開該元素，元素背景色變綠
$(".div1").css("background", "green")
})
$(document).mousemove(function (a) {//鼠標(biāo)移動時獲取鼠標(biāo)坐標(biāo)并輸入到div2中
$("#div2").text("鼠標(biāo)坐標(biāo)是（" + a.pageX + "，" + a.pageY + "）")
})
$(window).resize(function () {//rgb設(shè)置隨機(jī)顏色
$r = Math.floor(Math.random() * 256);
$g = Math.floor(Math.random() * 256);
$b = Math.floor(Math.random() * 256);
$(".div1").css(
"background", 'rgb(' + $r + ',' + $g + ',' + $b + ')'
)
})
})
</script>
<div class="div1">
移動到上面文字發(fā)生變化，鼠標(biāo)按下時該元素變小，抬起時變大
</div>
<div id="div2"></div>
</body>
</html>