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 添加到網頁中：

<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 >
<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" target="_blank" rel="external nofollow"  />   
 <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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >改變背景顔色</a></td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td><a name="del" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除1</a></td>
   </tr>
   <tr>
    <td></td><td></td><td></td><td><a name="del" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除2</a></td>
   </tr>
   <tr><td></td><td></td><td></td><td><a name="add" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >增加</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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >改變背景顔色 </a>	$("a[name=bgColor]")
【删除 1】的連結	<a name="del" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >删除 1</a>	$("a[name=del]")
【删除 2】的連結	<a name="del" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >删除 2</a>	$("a[name=del]")
【增加】的連結	<a name="add" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >增加 </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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >改變背景顔色</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="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除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="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >删除x</a></td>') //建立一個删除x連結

var $btn = $('<a name="del" href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >删除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 )

10分鐘搞定jQuery

繼續閱讀

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

jquery_126_demo

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條