《锋利的jQuery》读书笔记第一章(jQuery对象)
2017-11-09 22:47
288 查看
JavaScript库作用及对比
PrototypePrototype是的JavaScript库之一,对JavaScript的内置(String对象、Array等)做了大量的扩展。现在还有很多项目使用Prototype。Prototype可以看是好的、有用的JavaScript的组合在一起而形成的JavaScript库。使用者可以在需要的时候随时将其中的几段代码抽出来放进自己的脚本里。但是由于Prototype成型年代早,从整体上对于面向对象的编程思想把握不是很到位,导致了其结构的松散,不过现在Prototype也在慢慢改进。
Dojo
Dojo的强大之处在于Dojo提供了很多其他JavaScript库所没有提供的功能。例如离线存储API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。Dojo是一款非常适合企业级应用的JavaScript库、并且得到了IBM、SUN和BEA等一些大公司的支持。但是Dojo的缺点也是很明显的:学习曲线陡,文档不齐全。最严重的就是API不稳定。每次升级都可能导致已有的程序失效,但是自从Dojo的1.0.0版出现以后,情况有所好转,Dojo还是一个很有发展潜力的库。
YUI
YUI是有Yahoo公司开发的一套完备的、扩展性良好的富交换网页程序工具集。YUI封装了一系列比较丰富的功能。例如DOM操作和Ajax应用等,同时还包括了几个核心的CSS文件。该库本身文档及其完备,代码编写也非常规范。
Ext JS
Ext JS常简称为Ext,原本是对YUI的一个扩展,主要用于创建前端用户界面,如今已经发展到可以利用包括jQuery在内的多种JavaScript框架作为基础库,而Ext作为界面的扩展库来使用。Ext可以用来开发富有华丽外观的富客户端应用,能使B/S应用更加具有活力。但是由于Ext侧重于界面,本身比较臃肿,所以使用之前先权衡利弊。另外,需要注意的是,Ext并非完全免费,如果用于商业用途,需要付费获得授权许可。
MooTools
MooTools是一套轻量、简介、模块化和面对对象的JavaScript框架。MooTools的语法几乎跟Prototype一样,但却提供了更为强大的功能、更好的扩展性和兼容性。其模块化思想非常优秀,核心代码大小只有8KB.无论用到哪个模块都可即时导入,即时是完整版大小也不超过160KB.MooTools完全彻底的面向对象的编程思想。语法简介直观,文档完善,是一个非常不错的JavaScript库。
jQuery
jQuery同样是一个轻量级的库,拥有强大的选择器,出色的DOM操作,可靠的事件处理、完善的兼容性和链式操作等优点。
jQuery的优势:
轻量级强大的选择器
出色的DOM操作的封装
可靠的事件处理机制
完善的Ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层的分离
丰富的插件支持
完善的文档
window.onload和$(document).ready()的对比
区别 | windo 4000 w.onload | $(document).ready |
---|---|---|
执行时机 | 必须等待网页中所有的内容加载完毕后(包括图片)才能执行 | 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 |
编写个数 | 不能同时编写多个一下代码无法正常执行: window.onload = function() { alert("test1")}; window.onload = function() {alert("test2");结果只会输出”test2” | 能同时编写多个一下代码正确执行:$(document).ready(function() {alert("Hello world!")}); $(document).ready(function() {alert("Hello again!")});结果两次都输出 |
简化写法 | 无 | 可以简写成:$(function(){//…}); |
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么就可以使用jQuery里的方法。例如
$("#foo").html(); //获取id为foo的元素内的html代码。.html()是jQuery里的方法
这段代码等同于:
document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。
jQuery对象和DOM对象的相互转换
1.jQuery对象转成DOM对象(1)
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
(2)
var $cr = $("#cr");//jQuery对象
var cr = $cr.get(0);//DOM对象
2.DOM对象转成jQuery对象
var cr = document.getElementById("cr");//DOM对象
var $cr = $(cr);//jQuery对象
解决jQuery和其他库的冲突
jQuery库在其他库之后导入jQuery库在其他库之前导入
相关文章推荐
- ThinkInJava4读书笔记之第一章对象入门
- jquery Callbacks 回调对象的读书笔记-源码分析
- 《Linux多线程服务端编程》读书笔记——第一章_线程安全的对象生命期管理
- think in java 第四版读书笔记 第一章对象导论
- 《锋利的jQuery》读书笔记 -- 编写jQuery插件
- 《锋利的jQuery》的读书笔记 -- jQuery应用实例
- jquery Deferred 延迟对象的读书笔记-源码分析
- 《锋利的jQuery》读书笔记 第5章 jQuery对表单、表格的操作及更多应用
- [读书笔记] 深入探索C++对象模型-第一章《关于对象》
- 《深度探索C++对象模型》读书笔记第一章:关于对象
- 《jQuery源码解析》读书笔记(第二章:构造jQuery对象)
- 读书笔记《道法自然--面向对象实践指南》第一章
- Thinking in java4th读书笔记-第一章 对象导论
- 《锋利的jQuery》读书笔记 第1章 认识jQuery
- 《锋利的JQuery》读书笔记——第三章 JQuery的DOM操作
- 《Java编程思想》读书笔记-第一章/对象导论
- 《锋利的JQuery》读书笔记——第一章
- 《深度探索C++对象模型》读书笔记——第一章(关于对象)
- 《锋利的jQuery》读书笔记 第3章 jQuery中的DOM操作
- Thinking in Java 读书笔记 第一章 对象导论