首頁 > 開發者 > JavaScript

jQuery入門介紹之基礎知識，jquery入門基礎知識

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jQuery入門介紹之基礎知識，jquery入門基礎知識

JavaScript 庫作用及對比

為了簡化JavaScript 的開發, 一些 JavsScript 庫誕生了. JavaScript 庫封裝了很多預定義的對象和實用函數。能協助使用者建立有高難度互動的Web2.0 特性的富用戶端頁面, 並且相容各大瀏覽器

當前流行的JavaScript 庫有:

 

jQuery 簡介

jQuery 是繼 Prototype 之後又一個優秀的 JavaScript 庫

jQuery 理念: 寫得少, 做得多. 優勢如下:

輕量級

強大的選取器

出色的 DOM 操作的封裝

可靠的事件處理機制

完善的 Ajax

出色的瀏覽器安全色性

鏈式操作方式

……

jQuery: HelloWorld


jQuery 對象

jQuery 對象就是通過 jQuery ($()) 封裝 DOM 對象後產生的對象

jQuery 對象是 jQuery 專屬的. 如果一個對象是 jQuery對象, 那麼它就可以使用 jQuery 裡的方法: $(“#persontab”).html();

jQuery 對象無法使用 DOM 對象的任何方法, 同樣 DOM 對象也不能使用 jQuery 裡的任何方法

約定：如果擷取的是jQuery 對象, 那麼要在變數前面加上 $.  

var $variable = jQuery 對象

var variable = DOM 對象

DOM 對象轉成 jQuery 對象

對於一個 DOM 對象, 只需要用 $() 把 DOM 對象封裝起來(jQuery 對象就是通過 jQuery 封裝 DOM 對象後產生的對象), 就可以獲得一個 jQuery 對象.

 

   轉換後就可以使用 jQuery 中的方法了

jQuery 對象轉成 DOM 對象

jQuery 對象不能使用 DOM 中的方法, 但如果 jQuery 沒有封裝想要的方法, 不得不使用 DOM 對象的時候, 有如下兩種處理方法:

(1) jQuery 對象是一個數組對象, 可以通過 [index] 的方法得到對應的 DOM對象. 

(2) 使用 jQuery 中的 get(index) 方法得到相應的 DOM 對象                       

jQuery 選取器

選取器是 jQuery 的根基, 在 jQuery 中, 對事件處理, 遍曆 DOM 和 Ajax 操作都依賴於選取器

jQuery 選取器的優點:

簡潔的寫法                                                                                   

完善的事件處理機制

基本選取器

基本選取器是 jQuery 中最常用的選取器, 也是最簡單的選取器, 它通過元素 id, class 和標籤名來尋找 DOM 元素(在網頁中 id 只能使用一次, class 允許重複使用).


基本選取器樣本

改變 id 為 one 的元素的背景色為 # bbffaa

改變 class 為 mini 的所有元素的背景色為 # bbffaa

改變元素名為<div> 的所有元素的背景色為 #bbffaa

改變所有元素的背景色為 #bbffaa

改變所有的<span>元素和 id 為 two 的元素的背景色為 # bbffaa

層次選取器

如果想通過 DOM 元素之間的層次關係來擷取特定元素, 例如後代元素, 子項目, 相鄰元素, 兄弟元素等, 則需要使用層次選取器.

 

 

注意:  (“prev ~ div”) 選取器只能選擇“# prev ” 元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與前後位置無關, 只要是同輩節點就可以選取

層次選取器樣本

改變<body> 內所有<div> 的背景色為 # bbffaa

改變<body> 內子 <div>的背景色為 # bbffaa

改變 id 為 one 的下一個 <div> 的背景色為 # bbffaa

改變 id 為 two 的元素後面的所有兄弟<div>的元素的背景色為 # bbffaa

改變 id 為 two 的元素所有 <div> 兄弟元素的背景色為 # bbffaa

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More