1.点击事件
<body>
<button>
<strong>click to change div content</strong>
</button>
<div>娱乐新闻:进击的巨人更新啦</div>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
//js中所有的事件都是以on开头,去掉on就是jQuery中的事件
//js中所有功能的使用以属性为基础,jQuery中以函数为基础
//找到标签
let $btn=$("button");
//js绑定事件 $btn[0].οnclick=function(){}
//jQuery绑定事件
$btn.click(function(event){
console.log($(this).text());
console.log($("div").text());
//event 事件源(包含了该事件的所有信息,只要有事件存在,该事件源对象就默认存在)
console.log(event.target)
});
</script>
</body>
2.表单提交事件
<body>
<form action="">
<input type="submit" value="提交">
</form>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$("form").submit(function(){
return true;//true 可以提交 false
})
</script>
</body>
3.onchange事件
<body>
<input type="text">
<select name="">
<option value="">ahei</option>
<option value="">aha</option>
<option value="">ahou</option>
</select>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
$("input").change(function(){
console.log($(this).val());
})
$("select").change(function(){
console.log(this.selectedIndex)
})
</script>
</body>
4.ready事件
<button>click</button>
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
/*//onload 事件只能存在一次,多个会被覆盖 且在DOM结构及图片都加载完毕后才会执行函数中的代码
window.οnlοad=function(){
$("button").click(function(){
alert("------");
})
}
window.οnlοad=function(){
$("button").click(function(){
alert("======");
})
}*/
//ready事件是可以多次使用,ready事件是在DOM结构加载完毕后就执行
$(function(){
$('button').click(function(){
alert("+++++");
})
})
$(function(){
$('button').click(function(){
alert("&&&&&&&");
})
})
/*
onload和ready的区别
1.onload只能使用一次,ready可以多次使用
2.执行时机不同(onload是在DOM结构及图片资源加载完后执行,ready是在DOM结构加载完后执行)
*/
</script>
5.焦点事件
<body>
<input type="text">
<script src="./js/jquery-3.1.1.js"></script>
<script type="text/javascript">
/*//焦点事件 鼠标点击input框变色
$("input").focus(function(){
$(this).css("backgroundColor","darkblue");
})
//失去焦点事件 鼠标移开变回原色
$("input").blur(function(){
$(this).css("backgroundColor","#FFFFFF");
})*/
//on简写
$("input").on({
focus:function(){
$(this).css("backgroundColor","darkblue");
},
blur:function(){
$(this).css("backgroundColor","#FFFFFF");
}
})
</script>
</body>