強大的JQuery（一）--基礎篇

強大的JQuery（一）--基礎篇

JQuery是一個優秀的Javascript架構，是輕量級的js庫，使用jQuery將極大的提高編寫javascript代碼的效率,，讓寫出來的代碼更加優雅，更加健壯。

學好了jquery，我們相當於站長了巨人的肩膀上。

我將分三篇部落格為大家介紹jquery，本篇部落格將主要介紹jquery的基本文法、智能感知、選取器和事件。

一、基本文法

<script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script><script type="text/javascript">$(document).ready(function(){  $("button").click(function(){  $(this).hide();});});</script>Click me

jQuery 文法是為 HTML 元素的選取編製的，可以對元素執行某些操作。

基礎文法是：$(selector).action()

——貨幣符號定義 jQuery

——選擇符（selector）“查詢”和“尋找” HTML 元素

—— jQuery 的 action() 執行對元素的操作

二、jquery智能感知

所謂”工欲善其事必先利其器“，我們在具體介紹jquery之前先介紹一個實用的小技巧--智能感知，也叫智能代碼提示。

我們在以往編程中都會有智能代碼提示，這一點對於基礎知識掌握的還不熟練的初學者來說是一個非常必要的功能，可是無論是vs還是dreamweaer中都沒有智能代碼提示。

那麼我們該怎麼辦呢？其實在vs中是有智能感知的，我們來看看是怎麼做的。

1、我們建立一個網站，會發現它會自動產生一個Scripts的檔案夾，裡面有三個檔案。

2、在html頁引用vsdoc版的jquery庫

    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>

3、此時再編寫jquery代碼看看是不是有智能提示了？

4、在獨立的.js檔案中啟用指令碼智能感知

以上方法只適用於html頁中的jquery編寫，那麼在獨立檔案中是如何?呢？

也同樣非常簡單，只需要在.js檔案開頭添入這樣一段。

///

5、注意：樣本中我們引入了"jquery-1.4.1-vsdoc.js"檔案. 如果引用其他版本比如min版本的jQuery類庫就無法啟用智能提示.但是在正式環境下,。

我們必須要使用"min"版本的jquery庫檔案

三、jquery選取器

jQuery 元素選取器和屬性選取器允許您通過標籤名、屬性名稱或內容對 HTML 元素進行選擇。

選取器允許您對 HTML 元素組或單個元素進行操作。

1、jquery元素選取器

jquery使用css選取器來選取HTML元素。

例如：

$("p") 選取

元素。
$("p.intro") 選取所有 class="intro" 的

元素。
$("p#demo") 選取所有 id="demo" 的

元素。

2、jQuery 屬性選取器

jQuery 使用 XPath 運算式來選擇帶有給定屬性的元素。

例如：

$("[href]") 選取所有帶有 href 屬性的元素。

$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。

3、jQuery CSS 選取器

jQuery CSS 選取器可用於改變 HTML 元素的 CSS 屬性。

下面的例子把所有 p 元素的背景顏色更改為紅色：

例如：

$("p").css("background-color","red");

四、jquery事件

jQuery 事件處理方法是 jQuery 中的核心函數。jquery的事件函數使用和javascript、c#等語言很像。

在jquery協助檔案中可以很容易查到jquery的全部事件用法。這裡寫一下常見的。

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成載入時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的獲得焦時間點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的滑鼠移至上方事件

以上就是jquery的基礎知識，從上面的內容我們就可以看出，jquery比javascript確實強大了不少。下一篇部落格我將為大家介紹jquery的動畫效果，繼續與大家感知query的強大之處。