bind(type,[data],fn)：为每一个匹配到的元素绑定方法
- type表示事件类型，多个事件类型使用空格分隔；
- data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；
- fn表示绑定的函数；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bind(type,[data],fn)</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
$(window).bind('keydown', function() {
if(event.keyCode==13){
console.log("运行成功");
}
});
});
</script>
</head>
<body>
</body>
</html>
//打开网页后按下Enter键会在控制台打印：运行成功。unbind：将bind事件取消掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bind(type,[data],fn)</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function() {
$(window).bind('keydown', function() {
if(event.keyCode== 13) {
console.log("Enter键");
}
});
$(window).unbind();
});
</script>
</head>
<body>
</body>
</html>
//打开网页后按下Enter键控制台不打印one：事件只被执行一次（该方法大都被用在注册信息中的注册提交按钮上）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>one(type,[data],fn)</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<input type="button" value="按钮"/>
<script>
$("[value='按钮']").one("click", function(){
console.log("仅执行一次");
});
</script>
</body>
</html>
//该方法只被执行一次，多次点击，控制台上也只打印一次trigger：触发每一个匹配元素上某类事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>trigger(type,[data])</title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
</form>
<script>
$("#search").trigger("submit");
</script>
</body>
</html>
//打开网页后会直接跳转到百度中国页面上change：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-3.4.1.js"></script>
<body>
<input type="text" />
<script>
$("input").change(function(){
console.log("1111");
})
</script>
</body>
</html>
//当输入框中内容变化时会在控制台打印1111click：鼠标点击匹配元素时触发click事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" action="https://www.baidu.com/s">
<input type="hidden" name="wd" value="中国"/>
<input type="button" id="search_btn" value="百度一下" />
</form>
<script>
$("#search_btn").click(function(){
$("#search").submit();
})
</script>
</body>
</html>
//点击百度一下会跳转到中国的页面中
keydown：当键盘或按钮被按下时触发keydown事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>click([[data],fn])</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(window).keydown(function(event) {
if(event.keyCode == 13) {
console.log("Enter键");
}
});
</script>
</head>
<body>
</body>
</html>
//打开网页后按下Enter键后会在控制台打印"Enter键"submit:提交表单时触发submit 事件，该事件只适用于表单元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<form id="search" action="https://www.baidu.com">
</form>
<script>
$("#search").submit();
</script>
</body>
</html>
//打开网页会直接跳转到百度界面上事件冒泡：事件会按照 DOM 层次结构像水泡一样不断向上直至顶端；事件处理函数中返回 false, 会对事件停止冒泡，还可以停止元素的默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com" onclick="return test();">百度</a>
<script>
function test(){
console.log("1111");
return false;
}
</script>
</body>
</html>
//当return false时，此时只在控制台打印1111，无法实现跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<a href="http://www.baidu.com" onclick="return test();">百度</a>
<script>
function test(){
console.log("1111");
return true;
}
</script>
</body>
</html>
//当retur true时，不仅会在控制台打印1111，还会跳转到百度页面上去
2764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
