GZRJ20130122【引入jquery后$，function
引入jquery后$(function(){});内部和普通js的执行顺序注意
一，凡是在如下里的内容（都会在加载完DOM元素之后加载）总结：
$(document).ready(function(){});
$().ready(function(){});
$(function(){})
二，如下代码
<script type="text/javascript" src="<%=basePath %>qrc/js/jquery.min.js" ></script>
<script>
//情况一：在head里
alert("#head1："+$("#head1").val());
$(function(){
alert("#head2:"+$("#head2").val());
});
function head3(){
alert("head3");
}
$(function(){
function head4(){
alert("head4");
}
});
</script>
</head>
<body>
<input type="text" value="head1" />
<input type="text" value="head2"/>
<input type="button" value="head3" onclick="head3()"/>
<input type="button" value="head4" onclick="head4()"/>
<input type="button" value="head5" onclick="head5()"/>
<!-- 情况二：在body里并且$(function(){});里有另一个函数-->
<script>
$(function(){
alert("#body1:"+$("#body1").val());
function aaa(){
alert("#body2:"+$("#body2").val());
}
});
aaa();
</script>
<!-- /情况三：在body里$(function(){});和普通函数分开-->
<!-- ----------------jquery选择器直接在元素上边：那么初始时就不能得到该元素，因为
-------------------- 选择器初始时，元素还未初始----------------------- -->
<script>
alert("#body3:"+$("#body3").val());
$(function(){
alert("#body4:"+$("#body4").val());
});
</script>
<input type="text" value="body1" />
<input type="text" value="body2"/>
<input type="text" value="body3" />
<input type="text" value="body4"/>
<!-- 情况三：在body里$(function(){});和普通函数分开-->
<!-- ------------jquery选择器直接在元素下边那么初始时能得到该元素，因为
-------------------- 选择器初始时，元素已经初始----------------------- -->
<input type="text" value="body5" />
<input type="text" value="body6" />
<script>
alert("#body5:"+$("#body5").val());
$(function(){
alert("#body6:"+$("#body6").val());
});
</script>
<script>
function head5(){
alert("head5");
}
</script>
</body>
| 执行顺序 | |
和DOM按顺序 同时加载 | #head1：undefined 【初始$("#head1").val()的时候，还未初始<input type="text" /> 所以是undefined根本没找到 】 |
#body3:undefined 【初始$("#body3").val()的时候，还未初始 <input type="text" /> 所以是undefined根本没找到】 | |
和DOM按顺序 同时加载 | #body5:body5 【初始$("#body5").val()的时候，已经初始了 <input type="text" /> 所以能得到body5的值】 |
$(function(){}) | #head2:head2 |
| #body1:body1 | |
| #body4:body4 | |
| #body6:body6 | |
| 按钮head3能用 | |
| 按钮head4不能用 | |
| 按钮head5能用 |