第一章 认识jQuery
一、常见的JS库
- Prototype 最早的js库之一。把好用JS方法组合,缺点结构松散。
- Dojo 离线存储API、生成图标组件、矢量图形库、Comet支持。企业级JS库,缺点文档不全、API不稳定。
- YUI 雅虎开发的富交互网页程序工具集。
- Exit JS侧重界面
- MooTools 模块化思想的轻量级JS框架
- jQuery 轻量级、强大选择器等。
二、jQuery优势
- 轻量级 30K左右
- 强大选择器
- 出色DOM封装
- 可靠的事件处理机制
- Ajax完善
- 不污染顶级变量
- 浏览器兼容
- 链式调用
- 隐式迭代
- 行为结构分离
- 插件丰富
- 文档完善
- 开源
三、编写注意事项
链式调用是应该注意:
- 同一对象不超过3个操作,直接写为一行
- 同一对象较多操作,每行写一个操作
- 多个对象的少量操作,每对象写一行(子元素缩进)
四、jQuery对象和DOM对象
DOM对象是直接从DOM树获取的对象,可以使用JS方法,不可以使用jQuery方法。jQuery对象是指jQuery包装后的DOM对象,可以使用jQuery方法,不可以使用JS方法(通过jQuery对象获取的变量在前面加$以作区分)。
两者相互转换:
- jQuery对象转换为DOM对象:
- [index] var dom=$("div")[0];
- get(index) var dom=$("div").get(0);
- DOM对象转换为jQuery对象: 直接使用$()打包DOM对象即可。
五、jQuery与其他JS库冲突解决($的让渡问题)
对于jQuery,全局变量被存储在自己的命名空间中一般与其他库没有冲突
- jQuery库在其他库后引入
-
jQuery.noConflict(); //将变量$控制权让给其他库 jQuery(function(){ //使用jQuery // 书写jQuery程序; });
2.
var $j=jQuery.noConflict(); //自定义一个快捷方式 $j(function(){ //使用jQery,利用自定义的快捷方式——$j //书写jQuery程序; });
如果不想自定义还想使用$(),不管其他库$()方法,又不想与其他库冲突。使用:
-
jQuery.noConflict(); //将变量$控制权让给其他库 jQuery(function($){ //使用jQery设定页面加载时执行的函,在函数内部继续使用$() //书写jQuery程序; });
-
jQuery.noConflict(); //将变量$控制权让给其他库 (function($){ //定义匿名函数并设置形参为$,匿名函数内部的$均为jQery,在函数内部继续使用$() $(function(){ // 书写jQuery程序; }); })(jQuery) ;
- jQuery库在其他库前引入
无需调用jQuery.noConflict(),直接使用jQuery做jQuery的是,其他函数库使用$()。