jQuery 学习之路(1):引子

一、主流 javascript 库

  除 jQuery 外,还有
Prototype、Dojo、YUI、ExtJS、MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS
界面很棒但需要商业授权,MooTools 也是值得学习的一个 js 库,Dojo 有一些特殊功能,也可以考虑学习,YUI
的文档很完备,语法也规范。对我个人而言,选择性依次为 jQuery > MooTools > ExtJS > Dojo
> YUI > Prototype。

  jQuery 的口号是 "write less,do
more."。它的优点是使用了链式操作和隐式迭代大量减少了代码量,将行为操作从 html
代码中剥离出来利于分工合作和后期维护,此外强大的选择器也是其一大优势。

  jQuery 的界面库有 jQuery UI 和 easy UI,学完 jQuery
可以去考虑继续学习这两个。

二、欲善其事,先利其器

  先选择一个便于学习 jQuery 的 IDE,可以使用 Dreamweaver
8,它拥有一个可以智能提示 jquery 书写的插件,叫 jQuery_API .mxp,通过 Dreamwearver 的
"命令"——>"扩展管理" 可以安装使用。Dreamweaver 8 是 Macromedia 公司出的最后一版,然后 Macromedia
公司被 Adobe 公司收购,Dreamweaver 开始从 CS3 开始命令,使用最新的 CS6 版本即内置支持 jQuery
智能提示。

  其次,并不一定要去下载 jQuery
库到本地,可以直接使用下面两个在线链接地址:


http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.js
http://ajax.microsoft.com/ajax/jquery/jquery-2.1.0.min.js

  从上面可以看出,jQuery 提供了 1.x 和 2.x 的版本,区别在于,2.x
版本不再支援 IE 6/7/8 ,所以体积更小。不过考虑到现在 xp 和 win8 上的默认 IE 版本仍然在这个区间,还是建议使用 1.x 的库,而
jQuery 团队也声明未来将同时支援 1.x 和 2.x 的升级。

三、第一个 jQuery 代码


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("body").html("Hello,World!");
});
</script>
</body>
</html>

  这里有两个问题需要提一下:一是以前的写法是
<script type="text/javascript"></script>,但在 HTML5 中 javascript
已经是默认脚本,不必写出; 二是关于 $(document).ready(function(){ ... });
函数的意义,表示等待所有文档加载完成,再执行里面的代码。它还可以简写成如下形式: $(function(){ ... });

四、关于 DOM 对象和 jQuery 对象

  简单粗暴的说,jQuery 对象就是 DOM 对象 的集合,jQuery
隐式迭代的特性就是建立在此基础之上。 简单例子如下:


<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var dom_obj = document.getElementById(‘id‘);
var jquery_obj = $(‘#id‘);

alert(dom_obj.innerHTML);
alert(jquery_obj.html());
alert(jquery_obj[0].innerHTML); //将 jquery 对象转化成 dom 对象
alert($(dom_obj).html()); //将 dom 对象转化成 jquery 对象
});
</script>
</head>
<body>
<span id=‘id‘>Hello,World!</span>
</body>
</html>

  上面四个 alert 语句输出的都是 "Hello,World!",可见 DOM 对象和
jQuery 对象是可以互相转化的,这样在需要的时候,我们就可以结合两者来快速完成一些功能。需要注意的是,使用
if(document.getElementById(‘id‘)){} 这样的代码可以判断该元素是否存在,而使用 if($(‘#id‘)){}
 则不可以,它永远返回一个对象,当元素不存在时,只是长度为0的集合对象罢了,所以要么转化成 dom 对象来判断,要么根据其 jquery
对象的长度来判断。

五、参考资料

官方文档已经非常详尽:http://api.jquery.com/

时间: 2024-10-10 21:51:23

jQuery 学习之路(1):引子的相关文章

jQuery学习之路(四)之过滤选择器

今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>

Jquery学习之路(三) 实现弹出层插件

弹出层的应用还是比较多的,登陆,一些同页面的操作,别人的总归是别人的,自己的才是自己的,所以一直以来想写个弹出层插件.不多废话,直接开始吧! 不想看可以在这里直接下载源码xsPop.zip 1:遮罩层 要弹出层,先要用一个遮罩层挡在下面的页面,此遮罩层是全屏的,页面滚动也要有,所以设置 position: fixed;还要有透明效果,下面是我定义的遮罩层css,取名mask .mask { position: fixed; width: 100%; height: 100%; backgroun

jQuery 学习之路(4):事件

一.文档载入事件 二.事件绑定 三.事件对象 四.浏览器事件 五.表单事件 六.键盘事件 七.鼠标事件 jQuery 学习之路(4):事件,布布扣,bubuko.com

jQuery 学习之路(5):表单

处理表单中的元素 jQuery 学习之路(5):表单,布布扣,bubuko.com

Jquery 学习之路(四)高大上的图片轮换

网站首页没有一点动画怎么可以,我以前用过Flash As3做过图片切换,效果非常不错,可是麻烦,改变起来麻烦.一直都想自己做个图片切换效果,总认为比较麻烦,今天自己实践了一下,其实还比较简单.不过有个小问题,IE8不兼容模式下 设置有透明效果的div 样式添加失效了,但是我用谷歌,IE8兼容测试都ok. 反正是给自己记录的,也不多话了,js没有与页面分离,也没有做出插件.一个网站要不了几个这种效果,先实现了再说吧.最后的效果还是很高大上的. 下载地址:http://files.cnblogs.c

jQuery学习之路(1)-选择器

▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jQuery学习之路-A

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="D:/jquery2.0/jquery-2.0.0.js"></scr

jQuery学习之路(8)- 表单验证插件-Validation

▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维

jquery学习之路之选择过滤

$(myForm.elements). jquery选择过滤学习:$("tr:even")----匹配所有的偶数行(索引值查询)$("tr:odd")----匹配所有的技术行$("tr:eq(2)")----匹配下标为2的tr元素内容$("tr:gt(1)")----匹配所有下标大于1的行$("tr:lt(2)")----匹配所有下标小于2的行$("div:not(:animated)"