`

jQuery之入门(ready)

阅读更多
参考资料
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函数是这样解释的,引用于: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经典入门教程(绝对详细)

    上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$...

    jQuery权威指南-源代码

    第1章 jQuery开发入门/1 1.1 jQuery概述/2 1.1.1 认识jQuery /2 1.1.2 jQuery基本功能/2 1.1.3 搭建jQuery开发环境/3 1.1.4 编写第一个简单的jQuery应用/3 1.1.5 jQuery程序的代码风格/5 1.2 jQuery的简单...

    jQuery 绝对入门第1/2页

    代码如下:$(document).ready(function() { $(“a”).click(function() { alert&#40;“Hello world!”&#41;; }); }); 单击文档中任一个连接都会触发alert&#40;&#41; 事件 $号是 jQuery类的一个别称,因此$()构造了一...

    jQuery 学习入门篇附实例代码

    程序代码 [removed] = function(){ … ... 对于此,jquery提供了一个”ready”事件,你可以使用以下的代码片段: 程序代码 $(document).ready(function(){//获取文档对象就绪的时候,不需要等待图片等下载完成。 // 你的

    jQuery入门基础知识学习指南

    jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行。 $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { ...

    jQuery权威指南366页完整版pdf和源码打包

    前 言 第1章 jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2...

    jquery实例

    jquery入门实例,新手必看。jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数,那就是ready… 他在页面加载完成之前执行。

    jQuery-Keymap:使用jQuery创建一个键映射以显示键绑定

    ##安装/快速入门 下载压缩文件并解压缩。 包括keymap.js和keymap.css &lt;!-- Include Keymap --&gt; &lt; script src =" //code.jquery.com/jquery-1.11.3.min.js " &gt; &lt;/ script &gt; &lt; script src =...

    精通jQuery(2012年版)

    Part 1: Getting Ready..............................................................................................1 Chapter 1: Putting jQuery in Context ................................................

    middleman-heroku-bourbon-ready:中间人-heroku-bourbon-ready 入门套件

    (不适用于 ie 6/7/8)或 Jquery 1 带有 Open-sans 的 准备好与 默认ERB 4.3.0 系统要求 和Heroku帐户。 Ruby(您可以在 Gemfile 中设置自己的版本)(默认为 2.1.2) 安装 设置 mkdir your-folder git clone ...

    jQuery循环滚动展示代码 可应用到文字和图片上

    我用只依靠 jQuery 入门的思路写了一版,代码更少使用也更简单。 在线演示: http://demo.jb51.net/js/2012/jquery_xhpic/[JavaScript]代码 代码如下: $(document).ready(function(){ $(“#sItem li:not(:first)”)....

    JQuery 无废话系列教程(二) jquery实战篇上

    还是入门篇所说的那样,其实JQuery很简单. : )在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址//www.jb51.net/books/17812.html 好了,进入正题. 再次申明JQuery很简单,take easy!  从那开始呢? ...

    jQuery Validate表单验证深入学习

    之前一篇文章介绍了jQuery Validate表单验证入门的基础知识,详细内容参见《jQuery Validate表单验证入门学习》,今天这篇文章深入学习jQuery Validate表单验证,以下就是文章的全部内容: 1、用其他方式替代默认的 ...

    JS基础学习教程

    jQuery入门指南教程 这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括...

    fast.js:像库一样的JQuery。 精简,快速,简便

    jQuery之类的库。 精简版,快速简便。 入门 添加到您的html文件中: [removed]/index.js"&gt;[removed] 版本标记与github版本中的发行版本标记匹配。 使用fast.js 与JQuery类似,fast.js中的所有操作都使用$函数完成...

    ProjectBlocker:一个方便的 jQuery 解决方案,用于在开发过程中阻止响应式、IE 或不完整的位被看到

    入门 包括 jQuery。 包括dist/jquery.projectblocker.min.js 。 当document ready() ,初始化ProjectBlocker : $ ( document ) . on ( 'ready' , function ( ) { $ . projectBlocker ( ) ; } ) ; 完整示

    textTruncate:使用 JQuery 截断样式文本以适应容器

    文本截断使用 JQuery 截断样式文本以适应容器入门在您的网页中: &lt; script type =" text/javascript " &gt; $ ( document ) . ready ( function ( ) { $ ( '#element' ) . textTruncate ( { marginText : "..." ,...

    Learning Web Development with Bootstrap and AngularJS [PDF+EPUB+MOBI]

    Utilize AngularStrap to pull in Bootstrap's jQuery plugins through Angular directives Packed with tips to help you avoid potential stumbling blocks while developing Who This Book Is For Whether you ...

    javaScript 页面自动加载事件详解

    方法1: 代码如下: [removed]=function(){ Var name=document....“JQuery的第一个入门案例”&#41;;//加载HTML,不需等待,立即加载});方法3: ( 等同于方法2 ) 代码如下:jQuery(function (){ if($(“input[name=’

    kss:一个超轻量Javascript库

    代码都是一些常见的设计思路,没有jQuery的复杂和迂回,适合和我一样刚入门的童鞋参考和学习。Api文档基础选择器$(selector)/kss(selector)传入"#id"/".class"/"tag"/elem/function(Ready方法),支持带空格如".class...

Global site tag (gtag.js) - Google Analytics