jquery入門必備的基本認識

來源:互聯網
上載者:User

1.Juqery是javascript的優秀架構。它是輕量級的js庫,它相容CSS3,還相容各種瀏覽器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。jQuery使使用者能更方便地處理HTML documents、events、實現動畫效果,並且方便地為網站提供AJAX互動。jQuery還有一個比較大的優勢是,它的文檔說明很全,而且各種應用也說得很詳細,同時還有許多成熟的外掛程式可供選擇。jQuery能夠使使用者的html頁面保持代碼和html內容分離,也就是說,不用再在html裡面插入一堆js來調用命令了,只需定義id即可。

 

 

當用jQuery2.0的架構,通過上面這段話我想說的是如果有些代碼在eclipse運行不出來,說明裡面瀏覽器核心太低,只要在高版本的瀏覽器下面就能顯示效果。

 

2.jQuery 庫包含以下特性:

·  HTML 元素選取

·  HTML 元素操作

·  CSS 操作

·  HTML 事件函數

·  JavaScript 特效和動畫

·  HTML DOM 遍曆和修改

·  AJAX

·  Utilities

3.Google 和 Microsoft 對 jQuery 的支援都很好。

如果您不願意在自己的電腦上存放 jQuery 庫,那麼可以從 Google 或 Microsoft 載入 CDN jQuery 核心檔案。

使用 Google 的 CDN

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

</head>

使用 Microsoft 的 CDN

<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

</head>

 

 

基本文法:

jQuery 文法執行個體

$(this).hide()

示範 jQuery hide() 函數,隱藏當前的 HTML 元素。

$("#test").hide()                                           / /讀取id

示範 jQuery hide() 函數,隱藏 id="test" 的元素。

$("p").hide()

示範 jQuery hide() 函數,隱藏所有 <p> 元素。 //這樣可以直接讀取標籤

$(".test").hide()

示範 jQuery hide() 函數,隱藏所有 class="test" 的元素。 //讀取class的元素節點

 

 

 

Jquery的選取器有很多種:jQuery 元素選取器

jQuery 使用 CSS 選取器來選取 HTML 元素。

$("p") 選取 <p> 元素。

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

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

jQuery 屬性選取器

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

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

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

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

$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。

jQuery CSS 選取器

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

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

執行個體

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

 

jQuery 事件

下面是 jQuery 中事件方法的一些例子:

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

 

這裡感謝w3c school網站提供的學習資料和百度百科。

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.