10分钟搞定jQuery

wangyi529

浏览: 34059 次
性别:
来自: 大连

最近访客更多访客>>

云飞鸿

cy_001

mysh

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

JavaScript Ajax UI

（本文作者的微博地址：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 添加到网页中：

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从jQuery , Google 或 Microsoft 加载 CDN jQuery 核心文件。

Google Ajax API CDN (Also supports SSL via HTTPS)

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

Microsoft CDN (Also supports SSL via HTTPS)

<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
</head>

jQuery CDN (via Media Temple)

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>

“$”美元符号的使用
无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了
你慢慢会习惯如下的代码，并且你会喜欢上它。

$(document)
$("#id")
$("div p")
$("div.container")

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

第二分钟：HelloWorld

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

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert("Hello World！");
});
</script>
</head>

<body>
<p>Hello Word ! jQuery !</p>
</body>

</html>

亲自试一试

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

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert("Hello World1！");
});
$(document).ready(function(){
    alert("Hello World2！");
});
$(document).ready(function(){
    alert("Hello World3！");
});
</script>
</head> 

<body>
<p>Hello Word ! jQuery !</p>
</body>

</html>

亲自试一试

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert("Hello World1！");
});
</script>
</head> 

<body>
<p>Hello Word ! jQuery !</p>
<script type="text/javascript">
$(document).ready(function(){
    alert("Hello World2！");
});
</script>
</body>
<script type="text/javascript">
$(document).ready(function(){
    alert("Hello World3！");
});
</script>
</html>

亲自试一试

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

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

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

例子的效果如下：

10分钟搞定jQuery

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>10分钟搞定jQuery</title>
 <link rel="stylesheet" type="text/css" href="style.css" />   
 <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
    //+号按钮添加toggle事件
      $("#btn").toggle(
    function(){
     $("div.box").slideDown();
     $(this).html("-");
    },
    function(){
      $("div.box").slideUp();
      $(this).html("+");
    }
     );//end toggle
  
   //【改变背景颜色】的链接添加click事件
   $("a[name=bgColor]").click(function(){
     $(this).parents("tr").css("background-color","red");
   });
    //【删除】的链接添加click事件
   $("a[name=del]").click(function(){
    $(this).parents("tr").remove();
   });
 //【增加】的链接添加click事件
   $("a[name=add]").click(function(){
    var $tr = $("<tr><td></td><td></td><td></td><td></td></tr>");
    $("table.tstyle").append($tr);
    var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){
     $(this).parents("tr").remove();
    });
    $tr.find("td").last().append($btn);   
   });
  });
 </script>
</head>
<body>
 <div class="content">
  <strong id="btn" class="btn">+</strong>
   10分钟搞定jQuery
  <div class="box">
  <table cellpadding="0" cellspacing="0" class="tstyle">
   <tr>
    <th>Title1</th><th>Title2</th><th>Title3</th><th>Title4</th>
   </tr>
   <tr>
    <td></td><td></td><td></td><td><a name="bgColor" href="#">改变背景颜色</a></td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td><a name="del" href="#">删除1</a></td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td><a name="del" href="#">删除2</a></td>
   </tr>
   <tr><td></td><td></td><td></td><td><a name="add" href="#">增加</a></td>
   </tr>
  </table>
  </div>
 </div>
</body>
</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程序员。
以下是更多的选择器实例

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

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

元素	HTML源码	jQuery选择方式
【+】	<strong id="btn" class="btn">+</strong>	$("#btn")
承载 table 的 div	<div class="box">… …</div>	$("div.box")
table	<table cellpadding="0" cellspacing="0" class="tstyle">… … </table>	$("table.tstyle")
【改变背景颜色】的链接	<a name="bgColor" href="#">改变背景颜色 </a>	$("a[name=bgColor]")
【删除 1】的链接	<a name="del" href="#">删除 1</a>	$("a[name=del]")
【删除 2】的链接	<a name="del" href="#">删除 2</a>	$("a[name=del]")
【增加】的链接	<a name="add" href="#">增加 </a>	$("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）
所以以上的代码可以写成这样：

<style type="text/css">
.trStyle{
  "color":"white",
  "background-color":"red",
  "padding":"5px"
  })
</style>

$(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)是指链接<a name="bgColor" href="#">改变背景颜色</a>，然后parents()，是指当前链接的parent节点，<td> <tr> <table>,以此向上遍历
$(this).parents("tr")就是此parent节点集合中的<tr>节点

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 = $("<tr><td></td><td></td><td></td><td></td></tr>");
    $("table.tstyle").append($tr);
    var $btn = $('<a name="del" href="#">删除x</a></td>').click(function(){
    $(this).parents("tr").remove();
    });
    $tr.find("td").last().append($btn);   
   });

代码解释：
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属性
操作页面内容的方法：

函数	描述
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 )