首頁 > 網際網路

jQuery初體驗：[1]jQuery基礎語法和基本用法

2019-12-13 00:58:59

簡單的介紹下：Jquery是一個優秀的輕量級Javascript框架和javascript庫，它的開發理念是「寫的更少，但做的更多」——用最少的程式碼實現最豐富的效果。它相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），使用相當廣泛。但jQuery2.0及後續版本將不再支援IE6/7/8瀏覽器。

基本上，對於簡單的操作如如何選取 HTML 元素，以及如何對它們執行類似隱藏、移動以及操作其內容等，你可以直接學習Jquery而甚至都不用需要理解javascript。

本人不才，介紹點基礎的Jquery知識，希望對想入門的人有幫助。

請注意：下面的範例都事先在頭部當中引入了jQuery檔案了。否則其他的Jquery操作將不會執行。

1

Jquery當中幾乎所有的功能、選擇、事件處理等都用到了這個函數。

對於比較基礎的是的使用者來說，通常用這個來獲取元素，獲取到的元素都會被儲存為jQuery物件。

範例程式碼及效果如下：

2

var $div = $("#abc"),獲取id為abc的div。

為了確認div是不是被獲取到了，我alert了下，發現值為【object object】，說明獲取到元素了。

3

如果你熟悉html和CSS的話那就會知道這裡使用的是id選擇器，其他的還有類選擇，標籤選擇，子孫選擇，兄弟選擇，屬性選擇，為類選擇等等。如：$(".class")/$(".class div")/$("div")/$("div:first")......

1

因為講解的是基礎，實際上我們使用到的也是些基礎的事件效果。比如點選某個元素，改變下顏色或者背景，又或者隱藏/顯示某個區域的內容；

2

jQuery當中的內建了幾個事件函數，包括：click（）點選事件函數；mouseover（）滑鼠劃入函數；mouseout（）滑鼠畫出函數；hover（）滑鼠經過函數，相當於mouseover和mouseout函數的組合等等這幾個也是我經常使用到的.

3

在對元素執行了事件函數之後，其具體的操作是放在事件函數當中。

比如$("#abc").click( function(){ //具體執行的程式碼... } );其中的function就是來執行具體的操作，整行的意思是我在點選的時候執行function中的程式碼塊，可以使改變樣式、也可以是輸出資訊等等。

參看範例，程式碼如下圖：

4

在範例當中，我給div新增了click事件，執行alert（）函數，輸出div中的文字內容，具體程式碼見圖。

1

1、事件觸發改變樣式

改變樣式有兩種情況，一種是改變class名，一種是直接設定如background：#fff;

範例程式碼，如下

2

先看直接改變樣式屬性值的方法：

在jQuery當中，視同過CSS（）函數實現的，通過在裡面傳入屬性和屬性值改變樣式：

1） css("background-color","#f00")改變一種樣式

【一些特定情況下需要寫成這樣css("backgroundColor","#f00") 】

點選div之後背景就變成紅色。

3

2） css({"background":"#f00","color":"#fff",......}) 改變多種樣式

【也可以寫成這樣css({background:"#f00",color:"#fff",......}) 】

範例如下，點選之後背景變紅，文字變白了

4

總結：簡單的說，jQuery對元素的操作分為兩個步驟：1、選取；2、操作。理解起來很方便的。今天的講解就到這裡，希望能對代價有所幫助。如覺有用，請投票哦。

IT145.com E-mail:sddin#qq.com