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)
$("#id")
$("div p")
$("div.container")

 

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

 

第二分钟：HelloWorld

       貌似所有讲相关技术的书籍，都是先HelloWorld开场。以下就是jQuery的HelloWorld的代码示例。

Hello Word ! jQuery !


 

 

亲自试一试

       $(document).ready（） 的优点是：
1.可以把此方法写在文档的任意地方。
2.可以随时随地添加多个onload方法。
以下代码都可以很好的运行：

 


Hello Word ! jQuery !


 

 

  亲自试一试

 


Hello Word ! jQuery !



 

 

亲自试一试

       当然，虽然jQuery给我们提供了便利，但是我们还是要有良好的编程习惯，不要在js的混乱的骂名上再添一笔。
对待编程的态度也就是对待生活的态度。切记！切记！

是不是觉得这没有什么值得骄傲的。确实这不是jQuery值得骄傲的地方。如果你还没有犯困的话，请继续往下看，你会发现jQuery的简洁和便利，
你会体现到WRITE LESS,DO MORE的真是含义。

在第三分钟讲解之前，我先给大家设定一个目标。以下几分钟的讲解，将围绕一个常见的html页面上的一个基本操作作为例子来讲解。

例子的效果如下：

大家先自己试试这个例子的效果，以下是例子的代码，除了加粗字体的js代码之外，都是普通的html代码，我会在如下的几分钟一一解释此功能代码。

 
 
    
 
 


 

  +
   10分钟搞定jQuery
  

  

   

    
Title1
Title2
Title3
Title4
   
   

    
改变背景颜色
   
   

    
删除1
   
   

    
删除2
   
   
增加
   
  
  
 

 

  亲自试一试

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：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程序员。
以下是更多的选择器实例

$(this)            当前 HTML 元素
$("div")            所有 
 元素
$("div.box")            所有 class="box" 的 
 元素
$(".box")            所有 class="box" 的元素
$("#btn")            id="btn" 的第一个元素
$("td:last")            最后一个  元素
$("[name='del']")            所有带有name="del"的元素属性
$("div#desc .box")            id="desc" 的 
 元素中的所有 class="box" 的元素

 

       所以例子中采用如下的方式获取我要操作的元素：

元素

HTML源 码

jQuery选择方式

【+】

+

$("#btn")

承载 table 的 div

… …

$("div.box")

table

… …

$("table.tstyle")

【改变 背景 颜 色】的 链接

改 变 背景 颜 色

$("a[name=bgColor]")

【删除 1】的 链接

删 除 1

$("a[name=del]")

【删除 2】的 链接

删 除 2

$("a[name=del]")

【增加】的链接

增加

$("a[name=add]")

 

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://blog.digitalforest.cn/jquery-10min )

第四分钟：给你的选择对象添加事件

     选择完你的操作对象后，就可以给你的选择对象绑定事件了。
普通的js绑定onclick事件：

document.getElementById("btn").onclick = function(event){alert("!!!");};

        jQuery提供的绑定事件：

$("#btn").bind("click", function(event) {alert("!!!");});

        所以jQuery对于绑定事件，使用bind方法。比如要绑定mourseover,mourseout,blur,change等

$("#btn").bind("mourseover", function(event) {alert("!!!");});
$("#btn").bind("mourseout", function(event) {alert("!!!");});
$("#btn").bind("blur", function(event) {alert("!!!");});
$("#btn").bind("change", function(event) {alert("!!!");});

        jQuery对于这样的常用方法，提供了更简便的写法：

$("#btn").click(function(event) {alert("!!!");});
$("#btn").mourseover(function(event) {alert("!!!");});
$("#btn").mourseover(function(event) {alert("!!!");});
$("#btn").blur(function(event) {alert("!!!");});
$("#btn").change(function(event) {alert("!!!");});

        所以在咱们的例子中，在ready方法中，给相关的页面元素都添加了相关的事件：

//+号按钮添加toggle事件
   $("#btn").toggle(
       //.......
   );//end toggle
  
   //【改变背景颜色】的链接添加click事件
   $("a[name=bgColor]").click(function(){
     //.......
   });
    //【删除】的链接添加click事件
   $("a[name=del]").click(function(){
     //.......
   });
 //【增加】的链接添加click事件
   $("a[name=add]").click(function(){
    //.......
  });

 

       toggle事件是什么呢？
在示例中，我们要实现的效果是，点击【+】按钮，表格显示，再点击一下，表格隐藏。
所以要调用表格显示和隐藏的方法。
toggle是click事件的一个变种，实现多次点击，每次点击执行的不同的方法，这些方法可以组成一个循环队列，每次执行一个。
所以给【+】添加了toggle的事件：

//+号按钮添加toggle事件
      $("#btn").toggle(
     function(){
      //表格显示
      $("div.box").show();
     },
     function(){
      //表格隐藏
      $("div.box").hide();
     }

 

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

第五分钟：添加效果，让你的页面元素动起来

       以上的例子中提到，表格的显示隐藏，js代码可以用如下方式显示：

     var divTest = [表格的dom节点];
      //表格显示
      divTest.style.display="";
      //表格隐藏
     divTest.style.display="none";

 

        jQuery提供非常便利的方法 show(),hide(),分别来实现显示和隐藏

//+号按钮添加toggle事件
      $("#btn").toggle(
     function(){
      //表格显示
       $("div.box").show();
     },
     function(){
      //表格隐藏
      $("div.box").hide();
     }
     );//end toggle

 

       如果简单的显示和隐藏，那就太逊了，虽然很简练，但是也不值得浪费咱一分钟的时间。
jQuery可以很方便的提供一些动画效果，比如说从上到下滑动显示表格，从下到上滑动隐藏表格。
slideDown()  就是通过调整高度来滑动显示被选元素
slideUp()  就是通过调整高度来滑动隐藏被选元素

//+号按钮添加toggle事件
      $("#btn").toggle(
     function(){
      //表格显示
       $("div.box").slideDown();
     },
     function(){
      //表格隐藏
      $("div.box").slideUp();
     }
     );//end toggle

 

       除此之外，jQuery还提供其他的动画效果，比如：
animate() 对被选元素应用“自定义”的动画
fadeIn()  淡入被选元素至完全不透明
fadeOut() 淡出被选元素至完全不透明
effect(） 设定多种参数，实现诸如弹出，飘出，爆炸消失等多种效果，具体请参照 http://jqueryui.com/demos/effect/

利用jQuery动画效果，发挥你的想象，可以做出多姿多彩，生动活泼的页面效果

 

 

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://avajava.iteye.com/blog/1558890 )

 

第六分钟：改变页面元素的css

现在的B/S结构的应用做的绝对不亚于C/S结构的，这取决于友好的操作界面，遍历的操作过程。
这些友好的界面，本质还是要基于不同状态下改变页面元素的CSS样式表现。

本例中，以 【改变表格一行的背景颜色】作为例子，来说明jQuery对页面元素的CSS样式是如何便利的操作的。

//【改变背景颜色】的链接添加click事件
   $("a[name=bgColor]").click(function(){
     $(this).parents("tr").css("background-color","red");
   });

 

        其中css（）方法就是设置或返回匹配元素的样式属性。
文中就是把【改变背景颜色】这个链接所在的行(tr)的背景颜色（background-color）设置为红色（red）

我们还可以改变一组css属性，比如：

$(this).parents("tr").css({
  "color":"white",
  "background-color":"red",
  "padding":"5px"
  });

 

       看到这里你会说，这么一组样式，定义为样式表，然后设置tr的class就可以了。
对，jQuery也想到了这一点。
addClass( classes ) 是为匹配元素添加样式（classes）
removeClass(classes)是删除匹配元素的样式（classes）
所以以上的代码可以写成这样：

$(this).parents("tr").addClass("trStyle");

 

 

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://blog.digitalforest.cn/jquery-10min )

第七分钟：十分方便的文档遍历，绝对不坑爹！

       在第六分钟的讲解中，代码中$(this).parents("tr")为何物？

//【改变背景颜色】的链接添加click事件
   $("a[name=bgColor]").click(function(){
     $(this).parents("tr").css("background-color","red");
   });

 

       我们的代码功能是改变【改变背景颜色】链接所在的行（tr）的背景。而$(this).parents("tr")就是选择这个链接所在的行。
$(this)是指链接改变背景颜色，然后parents()，是指当前链接的parent节点，   

,以此向上遍历
$(this).parents("tr")就是此parent节点集合中的节点

jQuery提供了非常方便的遍历元素的预置方法，你可以非常快速的，优雅的方式来定位你要操作的元素。
省去了我们给需要操作的页面元素添加不必要的id属性或者其他冗余的属性。
以下是常用的遍历页面元素的方法：

函数						描述
.next()						获得匹配元素集合中 每 个元素 紧邻 的同 辈 元素。
.prev()						获得匹配元素集合中 每 个元素 紧邻 的前一个同 辈 元素，由 选择 器 筛选 （可 选 ）。
.parents()						获得当前匹配元素集合中 每 个元素的祖先元素，由 选择 器 筛选 （可 选 ）。
.first()						将匹配元素集合缩 减 为 集合中的第一个元素。
.last()						将匹配元素集合缩 减 为 集合中的最后一个元素。
.filter()						将匹配元素集合缩 减 为 匹配 选择 器或匹配函数返回 值 的新元素。
.find()						获得当前匹配元素集合中 每 个元素的后代，由 选择 器 进 行 筛选 。

       详情请参照：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

 

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

 

第八分钟：轻松改变文档内容和元素属性

对于示例中，【+】按钮的效果，我们还有一点没有完成。
那就是当表格显示的时候，需要把【+】，变成【-】号
点击【-】的时候，表格隐藏，同时要把【-】换成【+】
本例中我使用的是jQuery对象的html(),方法，此方法是设置或返回匹配的元素集合中的 HTML 内容，类似js dom对象的innerHTML属性。

//+号按钮添加toggle事件
      $("#btn").toggle(
     function(){
      //表格显示
       $("div.box").slideDown();
       $(this).html("-");
     },
     function(){
      //表格隐藏
      $("div.box").slideUp();
       $(this).html("+");
     }
     );//end toggle

 

        到此为止，我们的【+】的功能介绍完毕。

       remove()
示例中的【删除1】和【删除2】链接的是删除此链接所在的行(tr) 代码如下：

//【删除】的链接添加click事件
   $("a[name=del]").click(function(){
    $(this).parents("tr").remove();
   });

 

       append()
示例中【增加】链接是在表格的最后处添加一行（tr），就是使用的append()方法

//【增加】的链接添加click事件
   $("a[name=add]").click(function(){
    var $tr = $("");
    $("table.tstyle").append($tr);
    var $btn = $('删除x').click(function(){
    $(this).parents("tr").remove();
    });
    $tr.find("td").last().append($btn);   
   });

 

       代码解释：
var $tr = $("");   //创建一个空行
$("table.tstyle").append($tr);  //把空行append到table的最后一行
$('删除x') //创建一个删除x链接
var $btn = $('删除x').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#name").val('@勒了个去'); 设置的值为 '@勒了个去'
removeAttr（） 从所有匹配的元素中移除指定的属性。
例如：  $("a").removeAttr("href");删除所有链接的href属性
操作页面内容的方法：

函数						描述
after()						在匹配的元素之后插入内容。
before()						在每 个匹配的元素之前插入内容。
empty()						删除匹配的元素集合中所有的子 节 点。
insertAfter()						把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()						把匹配的元素插入到另一个指定的元素集合的前面。
replaceWith()						用新内容替换 匹配的元素。
text()						设置或返回匹配元素的内容。
wrap()						把匹配的元素用指定的内容或元素包裹起来。

       详情请参照：http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp

 

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：http://avajava.iteye.com/blog/1558890 )

 

第九分钟：jQuery-Ajax

       Ajax对于web2.0来说，就是一把神兵利器，给web2.0开辟了一片多姿多彩的天地。
它的不刷新浏览器的情况下，异步从服务器端加载数据的特性，令无数人为之着迷。
jQuery库拥有完整的Ajax兼容套件，对Ajax的提供了完美的支持。

在这里推荐几个常用的方法供大家使用。

$("div").load('data.html');
//此方法直接请求服务器上的data.html，然后把返回结果放置指定的$("div")中

 

$.get("data_get.php",{id:"12"}, function(result){
    $("div").html(result);
  });
//此方法是使用get方法，请求服务器数据data_get.php,并且提交{id:"12"}的参数，返回结果放置到$("div")中

 

$.getJSON("data_json.php",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
  });
//此方法是使用get方法，请求服务器的json数据data_json.php,返回结果,使用each方法遍历result，然后append到$("div")中

 

$.post("data_post.php",{ name: "张三",age: "22" },function(result){
    $("div").html(result);
  });
此方法是使用post方法，请求服务器数据data_post.php,并且提交{ name: "张三",age: "22" }的参数，返回结果放置到$("div")中

(本文为原创，可以转载，但是必须注明原创地址，原创地址为如下：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 )