jQuery事件绑定
Demo: 使用 jq 绑定单机事件
第一种绑定方式
$(function(){
//绑定删除事件
$("button").click(function(){
alert("绑定了一个单机事件!")
})
})
第二种绑定方式
$(function(){
$("button").click(remove);
})
function remove(){
alert("删除数据!")
}
第三种绑定方式:
$(function(){
$("button").on("click",function(){
alert("绑定了一个单机事件!")
})
})
第四种绑定方式:
$(function(){
$("button").bind("click",function(){
alert("绑定了一个单机事件!")
})
})
Demo: 为多个元素绑定事件
html:
<body> <table border="1"> <tr> <td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪资</td><td>部门编号</td><td>操作</td> </tr> <tr> <td>7963</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td><td><button type="button">删除</button></td> </tr> <tr> <td>7788</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td><td><button type="button">删除</button></td> </tr> <tr> <td>7932</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td><td><button type="button">删除</button></td> </tr> <tr> <td>7369</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td><td><button type="button">删除</button></td> </tr> <tr> <td>7521</td><td>SMITH</td><td>PRESIDENT</td><td>5000.00</td><td>10</td><td><button type="button">删除</button></td> </tr> </table> </body>
jq:
1 $(function(){ 2 $("button").click(removeEmpByld); 3 }) 4 //定义删除雇员的函数 5 function removeEmpByld(){ 6 var flag = window.confirm("你确定要删除此数据吗?"); 7 //不确定则结束此方法 8 if(!flag){ 9 return; 10 } 11 //获取要删除的雇员编号 12 //$(this):表示触发该函数的按钮元素本身 13 //$(this).parents("tr"): 表示取得当前按钮的 tr(所在行) 14 //$(this).parents("tr").find("td:eq(0)"): 表示根据当前按钮的父元素(tr)找到对应数据编号所在的td 15 //var empno = $(this).parents("tr").find("td:eq(0)").text(): 取得第一个 td 中的文本内容 16 var empno = $(this).parents("tr").find("td:eq(0)").text(); 17 //删除之后将页面中对应的内用也移除 18 var parentsTr = $(this).parents("tr"); 19 $(this).parents("tr").fadeOut('slow',function(){ 20 parentsTr.remove(); 21 console.log($("tr").length); 22 }); 23 }