jQuery事件
1.添加事件
用 $("#aa").click(function(){ }) 的方式添加，如果是给class等选取的含有多个元素的jQuery对象添加事件，可以一次性给所有元素加上事件，可以在函数体中用 $(this) 来选取当前元素，
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <!--以下是4个同class名的按钮--> <input type="button" class="aa" value="测试1"> <input type="button" class="aa" value="测试2"> <input type="button" class="aa" value="测试3"> <input type="button" class="aa" value="测试4"> </body> <script type="text/javascript"> $(".aa").click(function(){ //一次性给class名为aa的元素全部都添加上事件 var a = $(this).val(); //$(this)代表当前点击的元素，点击谁谁就是 alert(a); }) </script> </html>
2.挂事件和清事件
触发一个事件会给另一个元素添加上事件就是挂事件，触发一个事件会把另一个元素上挂上的事件清除掉就是清事件
用 bind() 方法挂事件，用 unbind() 方法清掉事件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <!--以下是3个按钮，id分别为aa、bb、cc，点击aa会给bb添加事件，点击cc会给bb清掉挂上的事件--> <input type="button" id="aa" value="测试1"> <input type="button" id="bb" value="测试2"> <input type="button" id="cc" value="测试3"> </body> <script type="text/javascript"> $("#aa").click(function(){ //点击aa触发事件 $("#bb").bind("click",function(){ //给bb挂上点击事件 alert($(this).val()); }) }) $("#cc").click(function(){ //点击cc触发事件 $("#bb").unbind("click"); //清除bb上挂的点击事件 }) </script> </html>
例子：复选框的全选
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <!--1个全选框，5个复选框，点击全选可以全部选取或不选取5个复选框--> <div><input type="checkbox" name="qx" id="qx"><label for="qx">全选</label></div> <input type="checkbox" name="shi" class="shi" id="jn"><label for="jn">济南</label> <input type="checkbox" name="shi" class="shi" id="qd"><label for="qd">青岛</label> <input type="checkbox" name="shi" class="shi" id="zb"><label for="zb">淄博</label> <input type="checkbox" name="shi" class="shi" id="yt"><label for="yt">烟台</label> <input type="checkbox" name="shi" class="shi" id="wf"><label for="wf">潍坊</label> </body> <script type="text/javascript"> $("#qx").click(function(){ //给全选框添加点击事件 var zt = $(this).prop("checked"); //获取全选框的选中状态 $(".shi").prop("checked",zt); //将全选框的状态赋予5个复选框 }) </script> </html>
