由于jQuery版本不同,中间可能存在些许差距,我们做页面的插件也好还是什么功能也好,不可能每个功能部分都加载个jquery文件。所以动态调用jQuery是有必要的。
当页面有加载jQuery的时候直接调用代码,如果没有就要实现加载jQuery,当然如果你不怕你网页代码比较乱的话你可以多次加载jQuery。
那么这其中就牵涉到一些问题
问题一:如何判断有没有加载jQuery?
可通过如下代码判断:
//判断是否加载了jQ function hasjQ(){ return window.jQuery; }
问题二:动态加载jQuery之后直接调用 $ 是会出错的,怎么处理?
动态调用jQuery我们是通过document.writeln来实现的,此时我们打印出jQuery代码之后并没有加载完改文件,此时使用 $ 是会报错的,显示为未定义 $ 。此时,有一种方法是用window.onload()来等待记载完毕,可这里我要提醒大家,window.onload()方法在整个页面上只会执行一次,只会执行最后一个。不信的朋友可以写两个试试。如果网页本身就调用了该方法那么你将给他覆盖掉,这不是我们想要的,此时就需要通过一个方法来实现添加事件。
//注册事件方法 var eventUtil={ addHandler: function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on" + type, handler); }else{ element["on" + type] = handler; } } }
来看一个实际的例子吧,
Html部分
<h6 style="margin:0; padding:30px 0 0px;">动态加载jQuery之后重新绑定/定义事件</h6> <p>window.onload事件只会执行最后一个,所以直接在加载jQuery之后通过window.onload是不明智的。</p> <div style="height:50px; width:80px; background-color:#FC6; display:none; line-height:50px; text-align:center; color:#393"> <span style="display:none;" id="sp">Hello!</span> </div>
Js部分
//注册事件方法 var eventUtil={ addHandler: function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on" + type, handler); }else{ element["on" + type] = handler; } } } //调用jQ document.writeln('<scr'+'ipt type="text/java'+'script" src="http:'+'//apps.bdimg.c'+'om/libs/jquery/1.9.0/jqu'+'ery.min.js"><'+'/sc'+'ript>'); myload=function(){ document.title=hasjQ()?'Ok':'No'; $("div").fadeIn('slow',function(){$('span',this).fadeIn('slow');}); $('#sp').click(function(){ $(this).fadeOut('slow',function(){$(this).parent().fadeOut();}); }); } //判断是否加载了jQ function hasjQ(){ return window.jQuery; } //执行事件的注册 eventUtil.addHandler(window,'load',myload); eventUtil.addHandler(window,'load',function(){ setTimeout(function(){alert('这是来自第二个load事件');},2000); });
效果: