10分钟搞定jQuery

（本文作者的微博地址：http://weibo.com/free529）

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：

http://avajava.iteye.com/blog/1558890

http://blog.digitalforest.cn/jquery-10min)

??

首先说明一下适合本文的读者应该满足的条件：
??? 1.你是否是一个程序员或者是想成为一个程序员，不管是.net的，java的，web前端的，数据库的等等，不管是有证的还是无证的，只要你认为自己是程序员的。
??? 2.你是否有html，javascript的基础，无论是了解过，还是熟悉的，精通的，甚至是资深的，只要是你觉得你懂html，javascript的。
??? 3.你是否还没有接触过jQuery，不知jQuery为所云的，而且你觉得有心情了解jQuery的，或者是无所谓，10分钟而已的？
以上3个问题，如果你有一个问题回答是否，我劝你绕道，因为这篇文章不适合你，免得让我浪费你的时间，哪怕只有10分钟，时间就是生命。
如果你的答案都是：【是】，恭喜你，这篇文章适合你，以下的10分钟你将有所收获。

现在请你放下手中忙的所有的事情，开始咱们的10分钟洗脑。Ready Go！

?

第一分钟：先做热身运动，磨镰不误砍柴工

??? 什么是jQuery?
??? jQuery是一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
jQuery的宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 极大地简化了 JavaScript 编程。它使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
??? 非常简练的代码，非常遍历的操作，非常炫的效果，越来越受到程序员的追捧。

???? 加载jQuery
???? 使用之前，必须把jQuery的js引入到自己的html中。
下载地址：http://code.jquery.com/jquery-1.7.2.min.js （官方地址，压缩版，截止到本文：最新版本时1.7.2）
可以通过下面的标记把 jQuery 添加到网页中：

?
??????? 如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从jQuery , Google 或 Microsoft 加载 CDN jQuery 核心文件。
??????? Google Ajax API CDN (Also supports SSL via HTTPS)
???????? Microsoft CDN (Also supports SSL via HTTPS)
?
??????? jQuery CDN (via Media Temple)
?
??????? “$”美元符号的使用
?????? 无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了
 你慢慢会习惯如下的代码，并且你会喜欢上它。
?
亲自试一试
?????? $(document).ready（） 的优点是：
 1.可以把此方法写在文档的任意地方。
 2.可以随时随地添加多个onload方法。
 以下代码都可以很好的运行：
?
?亲自试一试
?
亲自试一试
?????? 当然，虽然jQuery给我们提供了便利，但是我们还是要有良好的编程习惯，不要在js的混乱的骂名上再添一笔。
 对待编程的态度也就是对待生活的态度。切记！切记！
是不是觉得这没有什么值得骄傲的。确实这不是jQuery值得骄傲的地方。如果你还没有犯困的话，请继续往下看，你会发现jQuery的简洁和便利，
 你会体现到WRITE LESS,DO MORE的真是含义。
在第三分钟讲解之前，我先给大家设定一个目标。以下几分钟的讲解，将围绕一个常见的html页面上的一个基本操作作为例子来讲解。
例子的效果如下：

 大家先自己试试这个例子的效果，以下是例子的代码，除了加粗字体的js代码之外，都是普通的html代码，我会在如下的几分钟一一解释此功能代码。
?
?亲自试一试
(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://avajava.iteye.com/blog/1558890)
?
第三分钟： 选择你的操作对象????
?????? 例子中的html很简单，而且所有的元素都没有显式的添加事件。例子中是在页面文档ready时，给页面上的元素添加事件。
 这样可以做到页面的结构和页面的行为完全分离。
 要给页面上的元素添加事件，必须要在js脚本中选择你的操作对象。jQuery提供了多种选择方式，我们称之为选择器。
 例如：
 我们常用document.getElementById("eid")来获取id="eid"的页面元素，在jQuery里用$("#eid")就可以获取。
 我们常用document.getElementsByTagName("table")来获取页面上所有的table元素，在jQuery里用$("table")就可以获取。
 我们常用document.getElementsByName("del")来获取页面上所有的name="del"的元素，在jQuery里用$("[name=del]")就可以获取。
 jQuery不只是对js原有方法的重复，他有自己的多种选择方式，虽然其中的原理跟js操作html的dom对象一致，但是它去大大的方便了js程序员。
 以下是更多的选择器实例
?
?????? 所以例子中采用如下的方式获取我要操作的元素：
改变背景颜色</a>删除1</a>删除2</a>增加</a> $(this).parents("tr")就是此parent节点集合中的<tr>节点
jQuery提供了非常方便的遍历元素的预置方法，你可以非常快速的，优雅的方式来定位你要操作的元素。
 省去了我们给需要操作的页面元素添加不必要的id属性或者其他冗余的属性。
 以下是常用的遍历页面元素的方法：
?
?????? 代码解释：
 var $tr = $("<tr><td></td><td></td><td></td><td></td></tr>");?? //创建一个空行
 $("table.tstyle").append($tr);? //把空行append到table的最后一行
 $('<a name="del" href="#">删除x</a></td>') //创建一个删除x链接
 var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){? //给删除链接添加click事件，删除自己所在的行
 $(this).parents("tr").remove();
 });
 $tr.find("td").last().append($btn);? //把删除链接append到新生成的那一行的最后一个td中
 $tr.find("td")? //find("td")是获取tr下的所有td子节点
 $tr.find("td").last()? //last()是将匹配元素集合缩减为集合中的最后一个元素，也就是最后一个td元素
 注：find和last是我们第七分钟讲解的遍历元素的方法，是不是十分的方便。
除此之外操作页面元素属性的，还有如下方法：
 attr（）?? 设置或返回匹配元素的属性和值。
 例如：? $("img").attr("width");取得img匹配元素的width
 $("img").attr("width",'100'); 设置img匹配元素的width值为 100
 val()??? 设置或返回匹配元素的值。相当于 attr("value");
 例如：? $(":input#name").val(); 取得<input id='name' type="text" />的值
 $(":input#name").val('@勒了个去'); 设置<input id='name' type="text" />的值为 '@勒了个去'
 removeAttr（） 从所有匹配的元素中移除指定的属性。
 例如：? $("a").removeAttr("href");删除所有<a>链接的href属性
 操作页面内容的方法：
?
(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://blog.digitalforest.cn/jquery-10min)
最后一分钟：随便聊聊！
?????? jQuery由美国人John Resig创建以来，以它轻量级的js类库，压缩版本只有21k，写更少的代码,做更多的事情的宗旨
 多浏览器支持，丰富多彩的动画效果，优雅的写作方式，捕获了许多web前端开发的程序员的芳心。
2011年使用率增长最快Web技术TOP10 jQuery第一，每天都有398个网站开始使用它。
 jQuery目前在所有网站中的使用率已达到了42.8%。其市占率更是达到了 84.1%，许多人都将它视为JavaScript库的事实标准。
jQuery简单易用的特性，不需要开发者投入太多，就能迅速开始开发工作，然后逐渐提高技巧。它简洁而强大，
 开发者能迅速得到自己想要的结果，使使用jQuery变成一件充满乐趣的事情。
目前基于jQuery开发的插件目前已经有大约数千个，完全可以覆盖web前端开发的所有要求。特别是jQuery UI提供的
 拖拽层，模式窗体，进度条，日历选择器，滑动按钮，自动完成组件，标签（tab）组件等，给web UI编程带来了极大的方便。
最后提供几个比较好的资源：
 jQuery的官方网站： http://jquery.com/????http://jquery.org/
 w3school的jQuery教程： http://www.w3school.com.cn/jquery/
 博客文章【从零开始学习jQuery】 : http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html
 博客园jQuery专题 ： http://kb.cnblogs.com/zt/jquery/
 【jQuery基础教程】 人民邮电出版社 ISBN 978-7-115-18110-7/TP
好了，十分钟搞定jQuery已经到此结束，打完收功。 ：） -_-。
 如果这篇文章对大家有点作用的话，请不要吝啬你的鸡蛋和西红柿，随便扔。
（本文作者的微博地址：http://weibo.com/free529）
(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：
http://avajava.iteye.com/blog/1558890
http://blog.digitalforest.cn/jquery-10min)