jQuery无冲突处理方案

有一些特殊情况,jQuery可能会与其他的类库同时存在,比如zepto(通常是在某些人犯迷糊的时候)。

在这个时候“$”这个命名空间会出现冲突(或覆盖)。

简单的做法我们可以用“jQuery”或“Zepto”来替代“$”,并在代码中建立属于相关类库的作用域即可,作为命名空间来避免冲突。

那么有没有其他的办法呢。

 

jQuery 核心 – noConflict() 方法

在jquery里面有一个这样的方法可以改变jQuery的命名空间。

可以去看w3cSchool里面的解释

在《JavaScript框架设计》的第一章中就两次提到了这个方案。

我这里cv一下jquery的源代码供参考
//jquery1.2
var _jQuery = window.jQuery , _$ = window.$;
jQuery.extend({
noConflict: function(deep){
window.$ = _$;
if(deep)
window.jQuery = _jQuery
return jQuery;
}
})

要注意的是该方法只对单文件的类库框架有用。

如何对动态加载方式引入的文件解决冲突问题之后再做讨论,不在这里赘述。

关于input的radio和checkBox组件的一些用法总结

最近用的比较多,在这里总结一下。
要注意的是我下面的东西主要是在移动端开发测试的,chrome也测试了,pc端其他浏览器我会在之后补上说明的。
我这里说的click是已经优化过的点击,自己在合适的时候切换成touch。
另外,无视jquery2+。

大家都知道的

在input外面加上label,或者通过label中的for属性指向input,可以通过点击label区域触发input的change或者focus。
针对radio和checkBox主要就是change事件。
那么触发input:radio和input:checkBox会有什么操作呢?
radio:如果已选中,不会有变化。如果未选中,那么在同一个name里面,选中该radio,原来选中的radio取消选中。
checkBox: 如果已选中,取消选中;如果未选中,改变为选中状态。

你可能不知道的

前提:
这里以jquery的语法描述。
不在html中直接操作checked属性,因为要做遍历。

先说radio:
我们要通过label间接改变一个radio组的状态可以用click事件,也可以用change事件
以$(this).find(“input:radio”).is(‘:checked’)来判断当前的子元素是不是选中状态。
以$(this).find(“input:radio”).get(0).checked = false;来取消选中状态(如果你默认一个都不选中有可能会用到这个)。
click与change的区别就是,不管你该元素的状态是否变化,click都会触发。
而change只有在你元素选中与否变化时才会触发。所以我认为change是优选。
而你想通过其他方式修改这组单选状态的时候,可以通过$(this).find(“input:radio”).eq(index).trigger(“click”)来实现,不能用change。

以上的操作在pc端是没问题的,但是在移动端,想用change操作input的属性是不可以的。
那checkBox呢:
从上面对radio和radio其实没有不同。
但在做特别样式的展示,并且要把丑陋的input隐藏时,要注意保持展示和看不到的input状态是一致的。
我开始用click测试的时候就发现展示状态改变正常,但是input可能没有变化~

总结一些用法

如何确定该选择项目是否被选中:
有人说我要用$(this).attr(“checked”)来查看当前状态,那在我上面说的这个方发现,这么判断永远是空…
用$(this).is(‘:checked’)可以达到判断是否选中。当然你愿意用class标记是否选中也可以。
change和click:
pc端用change提高效率,移动端用click。

综合实例说事

点击查看实例 >>
或者扫码。

javascript的window.onload与jquery的$(document).ready()

 

以 浏览器装载文档为例,在页面加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中,通常使用 window.onload 方法,而在 Jquery 中,使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数,可以极大的提高 Web 应用程序的速度。

onload

window.load  $(document).ready()

执行时机  必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行  网页中所有 DOM 结构绘制完毕后就执行,可以能 DOM 元素关联的内容并没有加载完
编写个数  不能同时编写多个
以下代码无法正确执行:
window.onload = function(){
alert(“text1”);
};
window.onload = function(){
alert(“text2”);
};
结果只输出第二个  能同时编写多个
以下代码正确执行:
$(document).ready(function(){
alert(“Hello World”);
});
$(document).ready(function(){
alert(“Hello again”);
});
结果两次都输出
简化写法  无  $(function(){
// do something
});

另外,需要注意一点,由于在 $(document).ready() 方法内注册的事件,只要 DOM 就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的 html 下载完毕,并且已经解析为 DOM 树了,但很有可能图片还没有加载完毕,所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用 Jquery 中另一个关于页面加载的方法 —load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
Jquery 代码如下:
$(window).load(function (){
// 编写代码
});等价于 JavaScript 中的以下代码
Window.onload = function (){
// 编写代码
}

——————————————————————————————

最近在改一个嵌入在frame中的页面的时候,使用了jquery做效果,而页面本身也绑定了onload事件。改完后,Firefox下测试正常流畅,IE下就要等个十几秒jquery的效果才出现,黄花菜都凉了。

起初以为是和本身onload加载的方法冲突。网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差可能更大。可是我这页面分明是图片都显示出来十几秒了,还不见jquery的效果出来。

删了onload加载的方法试试,结果还是一样,看来没有必要把原本的onload事件绑定也改用$(document).ready()来写。那是什么原因使得Firefox正常而IE就能呢?接着调试,发现IE下原来绑定的onload方法竟然先于$(document).ready()的内容执行,而Firefox则是先执行$(document).ready()的内容,再执行原来的onload方法。这个和网上的说法似乎不完全一致啊,呵呵,有点意思,好像越来越接近真相了。

翻翻jquery的源码看看$(document).ready()是如何实现的吧:

复制代码 代码如下:
if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll(“left”);
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
jQuery.event.add( window, “load”, jQuery.ready );

结果很明了了,IE只有在页面不是嵌入frame中的情况下才和Firefox等一样,先执行$(document).ready()的内容,再执行原来的onload方法。对于嵌入frame中的页面,也只是绑定在load事件上执行,所以自然是在原来的onload绑定的方法执行之后才轮到。而这个页面中正好在测试环境下有一个访问不到的资源,那十几秒的延迟正是它放大出的时间差。