onchange()和oninput()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" oninput="change1()" onchange="change2()">
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
function change1() {
console.log("每次改动都会触发")
}
function change2() {
console.log("失去焦点且改变时才会触发")
}
</script>
</html>
oninput()每次改变输入框内的内容都会触发，而onchange()改变输入框内内容，且输入框失去焦点的时候才会触发。
focusin()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="text">
</form>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$('form').focusin(function () {
console.log('form表单获取到了焦点')
})
</script>
</html>
当form表单获取到焦点（其实是内部的input框获取到了焦点）的时候就会触发这个事件，这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
keydown() keyup() keypress()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="btn"></input>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$("#btn").keydown(function () {
console.log("keydown")
});
$("#btn").keyup(function () {
console.log("keyup")
});
$("#btn").keypress(function () {
console.log("keypress")
})
</script>
</html>
keydown事件会在键盘按下时触发。
keypress事件会在敲击按键时触发。 敲击按键的定义为按下并抬起同一个按键。这几个事件发生的顺序是:keydown keypress keyup
keyup 事件会在键盘按下时触发。
load()
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="img" src="../../img/MARVEL.png" alt="">
</body>
<script src="https://cdn.bootcss.com/jquery/1.4.1/jquery.min.js"></script>
<script>
$("#img").load(function () {
console.log("图片加载完毕")
})
//只有低版本的jQuery可以用 例如1.4.1版本
</script>
</html>
只有低版本的jQuery可以使用，比如1.4.1版本。
在每一个匹配元素的load事件中绑定一个处理函数。
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。
scroll()
做一个当滚动条滚动一定的距离，触发一个事件的效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 100%;
height: 1000px;
background-color: mediumspringgreen;
}
#div2{
width: 100px;
height: 100px;
background-color: gold;
transition: all 2s ease;
}
.div2{
width: 100% !important;
background-color: orchid !important;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$(window).scroll(function (e) {
var page = parseInt(e.currentTarget.pageYOffset);
if (page >= 180){
$("#div2").addClass('div2');
}else {
$("#div2").removeClass();
}
})
</script>
</html>
当滚动条滚动一定距离，下面的div长度和背景色发生变化
select()
在每一个匹配元素的select事件中绑定一个处理函数。
当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" value="1234567">
</body>
<script src="../../js/jquery-3.1.1.min.js"></script>
<script>
$("input").select(function (e) {
var start = e.target.selectionStart;
var end = e.target.selectionEnd;
console.log($(this).val().substring(start, end))
});
</script>
</html>
当输入框中的内容被选中时，会在后台打印出被选中的那部分内容
7696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
