发布时间: 2018-08-24 17:52:00
三.对象互换
jQuery 对象虽然是 jQuery 库独有的对象,但它也是通过 JavaScript 进行封装而来的。可以直接输出来得到它的信息。
alert($); //jQuery 对象方法内部
alert($());
// jQuery 对象返回的对象object,还是 jQuery
alert($('#box'));
//包裹 ID
元素返回对象,还是 jQuery
alert($(“#box”)).css(“color”,”red”);
//返回jQuery对象
从上面三组代码发现:只要使用了包裹后,最终返回的都是 jQuery 对象。这样的好处显而易见,就是可以连缀处理。
alert($(“#box”)).css(“color”,”red”).css(“font-size”,”20px”);
但有时,也需要返回原生的 DOM 对象,比如:
alert(document.getElementById('box'));
//[object HTMLDivElement]
jQuery 想要达到获取原生的 DOM 对象,可以这么处理:
alert($('#box').get(0));
//ID 元素的第一个原生 DOM,0下标为第一个元素
从上面
get(0),这里的索引看出,jQuery 是可以进行批量处理 DOM 的,这样可以在很多需要循环遍历的处理上更加得心应手。
四.解决jQuery和其他库的冲突
当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。
那么,既然有冲突的问题,为什么要使用多个库呢?原因是 jQuery 只不过是 DOM 操作为主的库,方便日常 Web 开发。但有时,项目有更多特殊的功能需要引入其他的库,比如用户界面 UI 方面的库,游戏引擎方面的库等等一系列。
而很多库,比如 prototype、还有JavaScript 的 Base 库,都使用“$”作为基准起始符,如果想和 jQuery 共容有两种方法:
1.将 jQuery.js 库在 Base.js 库之前引入,那么“$”的所有权就归 Base 库所有,而 jQuery 可以直接用 jQuery 对象调用,或者创建一个“$$”符给 jQuery 使用。
var
$$ = jQuery; //创建一个$$的 jQuery对象
jQuery
$(function () { //这是
Base 的$
$
alert($('#box').ge(0)); //这是 Base 的 $
$ alert($$('#box').get()); //这是 jQuery 的$$
});
2.如果将 jQuery.js 库在 Base.js 库之后引入,那么“$”的所有权就归 jQuery 库所有,而 Base 库将会冲突而失去作用。这里,jQuery 提供了一个方法:
jQuery.noConflict();
//将$符所有权剔除
var
$$ = jQuery;
$(function
() {
alert($('#box').ge(0));
alert($$('#box').get());
});