欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery之入门(ready)

程序员文章站 2022-03-03 20:13:25
...
参考资料
1 jquery $(document).ready() 与window.onload的区别
http://www.jb51.net/article/21628.htm
2 jquery的$(document).ready()和onload的加载顺序
http://www.jb51.net/article/23653.htm
3 jQuery学习资料
http://www.blogjava.net/kissyan4916/category/42271.html
如无特别说明关于jQuery方面的东西使用版本都为:1.6.2
首先页面肯定引入jQuery的js库了
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>

以后就不在写这句话了,默认引入jQuery之入门(ready)
            
    
    博客分类: JavaScriptJquery jqueryreadyonloadjavascript 
关于jQuery中的ready函数是这样解释的,引用于:jQuery中文API
.ready( handler ):当DOM完全加载完成时,执行一个函数
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.

以下写法是等价的
//等待dom元素加载完毕.
$(document).ready(function(){
   alert("Hello World!");
});

//是上面的简写
$(function(){
	 alert("Hello World 2 !");
});

jQuery(document).ready(function(){
   alert("Hello World 3 !");
}); 

//以下是和其它库解决冲突的方法

//将变量$的控制权让渡给js库
jQuery.noConflict();				
jQuery(function(){					
  //在内部只能使用jQuery标记,不能使用$了,注意下面一种方式呀	
  alert("Hello World 4 !");
});

/*处理jQuery的$和别的库冲突的时候用的,通过jQuery.noConflict()这个方法,
 *我们就可以直接在代码中通过jQuery来代替$来使用
 */
jQuery.noConflict(); 
jQuery(function($){
  //在代码内部可使用$,不能在外面使用$
  alert("Hello World 5 !");
}); 

//自定义一个比较短快捷方式
var $j = jQuery.noConflict();		
$j(function(){						//使用jQuery
	alert("Hello World 6 !");
});

jQuery.noConflict();				
(function($){						//定义匿名函数并设置形参为$
	$(function(){					//匿名函数内部的$均为jQuery
		//继续使用 $ 方法
		alert("Hello World 7 !");
	});
})(jQuery);	//执行匿名函数且传递实参jQuery

//直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery(function(){  
    //内部代码使用jQuery 
	alert("Hello World 8 !");
});

如果页面有原生的widnow.onload的话,它会先执行jQuery的加载方法后,在去执行它jQuery之入门(ready)
            
    
    博客分类: JavaScriptJquery jqueryreadyonloadjavascript