ready和onload比较；可以在下面的script里面调用先前script；动态为元素添加事件;浮动广告;js添加删除tr

浏览数：21 / 时间：2015年06月09日

JQuery等js框架一般都提供一个ready事件，该事件是document对象的，类似onload

onload和ready哪个先执行？

1） ready是在页面html代码全部加载完成后自动执行，也就是DOM树结构建立好后就执行

2） load则是在页面所有资源加载完成后才执行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
<script type="text/javascript">
function allSelect(flag){
var allItem=document.getElementsByName("province");
for(var i=0;i<allItem.length;i++){
allItem[i].checked=flag;
}
}
function changeColor(){

//给大于0的奇数行修改背景色
$("#myTable tr:gt(0):odd").attr("bgColor","#00ff00");
$("#myTable tr:gt(0):even").attr("bgColor","#eeeeee");

$("#firstTr+tr").attr("bgColor","#ff0000");
}
function checkAllBox(flag){

$(":checkbox[name=‘email‘]").attr("checked",flag);

}
function test(){
alert("test");
}
function onButton(){
//:后面跟的是type的值，first表示第一个button，开启onclick功能
$(":button:first").on("click",test);
}
function offButton(){
//关闭click功能
$(":button:first").off("click");
}
function showImg(){//浮动广告
var topValue=parseInt(Math.random()*600)+"px";
var leftValue=parseInt(Math.random()*1000)+"px";
//top是图片顶部距离整个web页面的顶部距离，left是图片左边距离web页面的左边框的距离,.每隔两秒再调用此方法
$("div").animate({top:topValue,left:leftValue},2000,showImg);
}
function hideImg(){
$("div").animate({top:"-150px"},2000);
}
var index = 2;
function addRow() {
// $("#mytable").append("<tr><td>"+index+"</td><td><input type=‘text‘ name=‘chepai‘ ></td><td><select name=‘type‘><option>全责</option><option>主责</option><option>次责</option><option>无责</option></select></td><td><input type=‘button‘ value=‘ - ‘ onclick=‘delRow(this);‘></td></tr>");

$("#mytable2").append($("#demoRow").clone());
$("#mytable2 tr:last td:first").html(index);
//找到该行最后一行，最后一列使得该input显示出来
$("#mytable2 tr:last td:last input").css("display","");
index++;
}

function clearRow() {
//除了第一个都清除
$("#mytable2 tr:gt(1)").remove();
}

function delRow(button) {
//移除butto的父节点td的父节点tr
$(button.parentNode.parentNode).remove();
}

</script>

</head>

<body onload="changeColor();showImg();">
省份
<input type="checkbox" value="全部" id="all" onclick="allSelect(this.checked)">
<br>
<input type="checkbox" name="province" value="安徽" id="a1">
<input type="checkbox" name="province" value="江苏" id="a2">
<input type="checkbox" name="province" value="上海" id="a3">
<input type="checkbox" name="province" value="北京" id="a4">
<input type="checkbox" name="province" value="河南" id="a5">
<hr><br>
<table id="myTable" width="50%" border="1">
<tr bgColor="black" id="firstTr"><td>编号</td><td>姓名</td></tr>
<tr><td>1</td><td>张开</td></tr>
<tr><td>2</td><td>邓紫棋</td></tr>
<tr><td>3</td><td>阎罗王</td></tr>
<tr><td>4</td><td>降临人间</td></tr>
<tr><td>5</td><td>可以</td></tr>
</table>
<hr><br/>
<center>
<input type="checkbox" name="allbox" id="allbox" onclick="checkAllBox(this.checked);"> 全选 <br>
<input type="checkbox" name="email" value="1" > 邮件1 <br>
<input type="checkbox" name="email" value="2" > 邮件2 <br>
<input type="checkbox" name="email" value="3" > 邮件3 <br>
<input type="checkbox" name="email" value="4" > 邮件4 <br>
<input type="checkbox" name="email" value="5" > 邮件5 <br>
<input type="checkbox" name="email" value="6" > 邮件6 <br>
<input type="checkbox" name="email" value="7" > 邮件7 <br>
<br>
<hr>
<br>
<input type="checkbox" name="sex" value="男" > 男
<input type="checkbox" name="sex" value="女" > 女
</center>
<hr/>
<br/>
<center>
<input type="button" value="测试" >
<br>
<input type="button" value="打开" onclick="onButton();">
<input type="button" value="关闭" onclick="offButton();">
</center>
<hr><br/>
<center>

<div style="position:absolute; top:-200px; left:0px; widows: 100px; height: 200px;">
<img src="images/12.jpg" width="100px" height="200px"
onclick="hideImg();window.open(‘http://www.guanggao.com‘)"/>
</div>
</center>
<hr>
<br>
<input type="button" value=" + " onclick="addRow();">
<input type="button" value="清空" onclick="clearRow();">
<table border="1" id="mytable2" width="80%">
<tr>
<td width="20%">编号</td>
<td width="40%">车牌号</td>
<td width="20%">责任</td>
<td>操作</td>
</tr>
<tr id="demoRow">
<td>1</td>
<td><input type="text" name="chepai" ></td>
<td>
<select name="type">
<option>全责</option>
<option>主责</option>
<option>次责</option>
<option>无责</option>
</select>
</td>
<td>
<input style="display:none" type="button" value=" - " onclick="delRow(this);">
</td>
</tr>

</table>

</body>

</html>