JS在页面中的执行顺序
2013-06-09 11:55
225 查看
页面从上到下开始加载。执行顺序如下:
1、
$(function () {
alert("Loading");
$("#Label1").click(function () {
alert("你点击了Label1");
})
$("#Label2").click(function () {
alert("你点击了Label1");
})
$("#LinkButton1").click(function () {
alert("你点击了LinkButton1");
})
$("#RadioButton1").click(function () {
alert("你点击了RadioButton1");
})
});
但
2、
3、
页面加载完之后执行body后面的js代码
4、执行第一步当中
完整页面如下:
1、
$(function () {
alert("Loading");
$("#Label1").click(function () {
alert("你点击了Label1");
})
$("#Label2").click(function () {
alert("你点击了Label1");
})
$("#LinkButton1").click(function () {
alert("你点击了LinkButton1");
})
$("#RadioButton1").click(function () {
alert("你点击了RadioButton1");
})
});
但
$(function () { alert("Loading"); $("#Label1").click(function () { alert("你点击了Label1"); }) $("#Label2").click(function () { alert("你点击了Label1"); }) $("#LinkButton1").click(function () { alert("你点击了LinkButton1"); }) $("#RadioButton1").click(function () { alert("你点击了RadioButton1"); }) });
里面的代码在页面加载完之后执行
2、
alert("NotLoading"); $(".C").click(function () { alert("good"); })但是此时不能为 $(".C")加入click事件,因为此时页面还没有生成元素。
3、
页面加载完之后执行body后面的js代码
script type="text/javascript"> alert("AfterBody"); $(".C").click(function () { alert("good"); }) </script>此时为class为C的元素加入了click事件
4、执行第一步当中
$(function () { alert("Loading"); $("#Label1").click(function () { alert("你点击了Label1"); }) $("#Label2").click(function () { alert("你点击了Label1"); }) $("#LinkButton1").click(function () { alert("你点击了LinkButton1"); }) $("#RadioButton1").click(function () { alert("你点击了RadioButton1"); }) });
完整页面如下:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript">
alert("first");
$(function () {
alert("Loading");
$("#Label1").click(function () {
alert("你点击了Label1");
})
$("#Label2").click(function () {
alert("你点击了Label1");
})
$("#LinkButton1").click(function () {
alert("你点击了LinkButton1");
})
$("#RadioButton1").click(function () {
alert("你点击了RadioButton1");
})
});
</script>
<script type="text/javascript">
alert("NotLoading");
$(".C").click(function () {
alert("good");
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Label2"
runat="server" Text="Label"></asp:Label>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:RadioButton
ID="RadioButton1" runat="server" />
<p class="C">点我吧!</p>
</div>
</form>
</body>
<script type="text/javascript"> alert("AfterBody"); $(".C").click(function () { alert("good"); }) </script>
</html>
相关文章推荐
- 页面中js执行顺序
- js在页面中的加载顺序及多个jquery $(document).ready() 的执行顺序
- 页面中js执行顺序
- JS_001:web页面js加载执行顺序
- js中页面加载完成后执行的几种方式及执行顺序
- js 页面载入时的执行顺序
- 关于在页面里加载和执行JS顺序的问题
- iframe与父页面中JS执行顺序控制
- 关于HTML页面中JS/JQ/Onload执行顺序测试代码
- 页面中的js执行顺序
- 页面中的js执行顺序
- 页面中js执行顺序----
- 页面中js执行顺序----
- 页面中的js和jquery的执行顺序
- 关于Ajax load页面中js部分$(function(){})的执行顺序
- 运行page页面时的事件执行顺序
- 当jsp页面完全加载完成后执行一个js函数
- 页面自动执行(加载)js的几种方法
- asp.net页面事件执行顺序
- 引用asp.net母版页后,母版页和内容页的页面事件执行顺序