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 公司出的最后一版,2005年 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(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/
jQuery Easy UI从1.3.3到现在的最新版本1.3.4都是基于jQuery2.0的,而jQuery2.0是不支持IE6、7、8的了,所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想继续兼容IE8以前的版本,只能使用jQueryEasyUI1.3.2或以前的版本了,但是可能得注意一些EasyUI的API可能会有差异。
ie下报缺少标识符、字符串或数字,在firefox及其他下均无问题,郁闷的找了半天也没结果,使用Companion。js也不行。最好google了一下:
原因及解决方法
1.原因:一般出现在类的定义时在最后一个属性或方法后加了逗号,在Firefox是无所谓的,而IE下就会出错,而且提示得云里雾里,要除错都很难。
2.解决方法:去掉这个逗号…..
六、关于通过DOM操作添加新控件,新控件不能触发事件的问题,可以参考:http://blog.csdn.net/a15937822658/article/details/13091159
jQuery 学习之路(1):引子的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- Jquery学习之路(二) 实现table样式的设定
上一篇jquery实现checkbox的全选,得到了一些朋友的建议,其中插件的定义我的确不太清楚,也闹了个笑话,有些朋友建议我去看<锋利的Jquery>,说实话正在看了.由于正在学习中,我 ...
- Jquery学习之路(一) 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...
- jQuery学习之路(6)- 简单的表格应用
▓▓▓▓▓▓ 大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQue ...
- jQuery学习之路(4)- 动画
▓▓▓▓▓▓ 大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 ▓▓▓▓▓▓ jQuery中的动画 ▓▓▓▓▓▓ show()和hide()方法 ...
- jQuery学习之路(3)- 事件
▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- Linq Like
Like的操作,有点像in,但是,方向变了.什么意思呢.就是你给定一个字符串,去寻找数据中某个字段包含这个字符串.就是给定的字符串是某字段的子集.Sql Script是这么写的. Selec * fr ...
- XCode显示iOS Simulators时不显示系统版本号并出现Identifier(UUID)
如果出现如下的显示问题,说明你添加了多个相同系统版本的iOS Simulators: 打开Windows->Devices,查看已经出现了相同版本的模拟器: 那么我们删除一些相同的模拟器,即可解 ...
- Nginx反向代理tomcat
location /gm { root html; proxy_pass http://localhost:8080/gm; proxy_set_hea ...
- vmware的安装
VMware Workstation是一款功能强大的虚拟机软件,在不影响本机操作系统的情况下,用户可以在虚拟机中同时运行不同版本的操作系统,用于开发.测试以及部署工作,这边小编为大家分享最新版本VMw ...
- Oracle 的表备份的方法
1.直接备份(防止误操作后数据库表不能恢复) create table new_table as select * from old_table; 2.创建表头,然后插入列(繁琐的做法) create ...
- MySQL数据库常用函数
一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 不区分大小写 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等 ...
- Java数据结构与排序算法——堆和堆排序
//================================================= // File Name : Heap_demo //--------------------- ...
- haproxy安装
最近一直在整理之前用过的东西,现在到haproxy了,安装如下: tar xf haproxy-1.4.27.tar.gz cd haproxy-1.4.27 make TARGET=linux26 ...
- docker网络基础配置
常用两种方式: 1)映射容器端口到宿主机 2)容器互联机制 --------------------------------------------- 端口映射实现访问容器的用法: docker ru ...
- 云服务程序在启动的时候执行Powershell脚本
如果在云服务程序启动时候,需要执行Powershell脚本,我们需要将脚本嵌入到程序中,并且编写一个cmd来执行这个脚本,具体如下: 1.编写测试的Powershell脚本:每隔10分钟 检测dns ...