GZRJ20130122【引入jquery后 $(function(){});内部和普通js的执行顺序注意】

引入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" id="head1"  value="head1" />
<input type="text" id="head2"  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" id="body1"  value="body1" />
    <input type="text" id="body2"  value="body2"/>
    <input type="text" id="body3"  value="body3" />
    <input type="text" id="body4"  value="body4"/>
    <!-- 情况三：在body里$(function(){});和普通函数分开-->
    <!-- ------------jquery选择器直接在元素下边那么初始时能得到该元素，因为
-------------------- 选择器初始时，元素已经初始----------------------- -->
    <input type="text" id="body5"  value="body5" />
    <input type="text" id="body6"  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" id="head1" value="head1" />


　　所以是undefined根本没找到

】		






#body3:undefined


【初始$("#body3").val()的时候，还未初始 <input type="text" id="body3" value="body3" />


所以是undefined根本没找到】






  

和DOM按顺序


同时加载




#body5:body5


【初始$("#body5").val()的时候，已经初始了 <input type="text" id="body5"  value="body5" />


所以能得到body5的值】








$(function(){})
Dom之后加载
一切正常



    		
#head2:head2




#body1:body1




#body4:body4




#body6:body6




 
按钮head3能用　　




 
按钮head4不能用






 
按钮head5能用









 






		

			posted on 
2013-01-22 10:24 
FanRongOS 
阅读(281) 
评论(0) 
 
收藏 
举报