JQuery事件
JS添加点击事件
<input type="button" value="测试" onclick="test()" /><script type="text/javascript">function test(){ ???alert("aa");}</script>JQuery添加点击事件
<input type="button" value="测试2" id="btn" /><script type="text/javascript">$(document).ready(function(e) { ???????$("#btn").click(function(){ ???????alert("一个按钮"); ???????}) ????});</script>给一个类添加点击事件
<input type="button" value="测试3" class="btn" /><input type="button" value="测试4" class="btn" /><input type="button" value="测试5" class="btn" /><script type="text/javascript"> ???$(document).ready(function(e) { ????$(".btn").click(function(){ ???????????alert($(this).val()); ???//显示当前元素的值 ???????}) ???});</script>动态的给一个元素加事件
<input type="button" value="挂事件" id="gua" /><input type="button" value="测试事件" id="ceshi" /><input type="button" value="移除事件" id="yichu" /><script type="text/javascript">$(document).ready(function(e) {//点击给测试事件按钮挂一个事件 ???$("#gua").click(function(){ ???????????//bind方法用于挂事件 ???????????$("#ceshi").bind("click",function(){ ??//bind方法可以移除掉，click方法移除不掉 ???????????????????alert("挂上了事件"); ???????????????}); ???????????????????}) ???????//点击给测试事件按钮移除点击事件 ???$("#yichu").click(function(){ ???????????$("#ceshi").unbind("click"); ??//移除bind里的click方法 ???????})}）；</script>例子（全选）
<body><br /><div><input type="checkbox" id="qx" /> 全选</div><br /><div><input type="checkbox" class="ck" /> 山东<input type="checkbox" class="ck" /> 淄博<input type="checkbox" class="ck" /> 张店<input type="checkbox" class="ck" /> 淄川<input type="checkbox" class="ck" /> 桓台</div></body><script type="text/javascript">function xuan(){ ???var a = document.getElementById("qx"); ???var ck = document.getElementsByClassName("ck"); ???????for(var i=0;i<ck.length;i++) ???{ ???????if(a.checked) ???????{ ???????????ck[i].setAttribute("checked","checked"); ???????} ???????else ???????{ ???????????ck[i].removeAttribute("checked"); ???????} ???}}$("#qx").click(function(){ ???????//var xz = $(this)[0].checked; ???????var xz = $(this).prop("checked"); ???????$(".ck").prop("checked",xz); ???}) ???</script></html>例子（变色）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-1.11.2.min.js"></script><style type="text/css">.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6}</style></head><body><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><div class="aa"></div><input type="button" value="测试" onclick="test()" /></body><script type="text/javascript">$(".aa").click(function(){ ???????//所有元素背景色变成原来的 ???????$(".aa").removeAttr("xz"); ???????$(".aa").css("background-color","#3F6"); ???????//找到点击了谁 ???????$(this).attr("xz","1"); ???????$(this).css("background-color","red"); ???})$(".aa").mousemove(function(){ ???????????//所有元素背景色变成原来的 ???????$(".aa").css("background-color","#3F6"); ???????//找到点击了谁 ???????$(this).css("background-color","yellow"); ???????$("[xz=‘1‘]").css("background-color","red"); ???})$(document).ready(function(e) { ???//事件要执行代码 ???});function test(){ ???alert("aa");}</script></html>JQuery事件
原文地址：https://www.cnblogs.com/Whitehat/p/8598278.html