jQuery的基本使用 實踐 效果 API

2022-09-06 19:24:11 字數 2045 閱讀 4086

j-j**ascript+query就是查詢js的庫,把js中的dom操作做了封裝,實現快速查詢使用其中的功能。

優化了dom操作、事件處理、動畫設計和ajax互動

學習jquery的本質:學習呼叫函式方法

優點:輕量級、相容、鏈式程式設計、隱式迭代、對事件、樣式、動畫支援,大大簡化了dom操作,支援外掛程式擴充套件開發

1.入口函式等待dom載入完畢再去執行js**

$

(document)

.ready

(function()

)$(function()

)

jquery的頂級物件$,可以使用$將元素包裝成jquery物件$是jquery的別稱,但是一般都是使用$

2.jquery物件和dom物件

原生js獲取的物件就是dom物件

var … = document.getelementbyid(』…』);

jquery獲取的元素就是jquery物件

$(『div』)

jquery物件的本質就是利用$對dom物件包裝後產生的物件(偽陣列形式儲存)

3.jquery物件和dom物件的相互轉換

dom物件轉換成jquery物件

$(dom物件)

jquery物件轉換成dom物件

$(『div』)[index] index是索引號

$(『div』).get(index)

4.jquery樣式操作

引數只寫屬性名,則是返回屬性值

$(this).css(「color」)

引數是屬性名,屬性值,逗號分開,是設定一組樣式,必須加引號,值如果是數字可以不用跟單位和引號

$(this).css(「color」,「red」)

引數可以是物件形式,方便設定多組樣式。屬性名和屬性值用冒號隔開,屬性可不加引號

$(this).css()

新增類 $(「div」).addclass(「current」);

移除類 $(「div」).removeclass(「current」)

切換類 $(「div」).toggleclass(「current」)

5.類操作和classname區別

原生js中classname會覆蓋元素裡面原先的類名

jquery裡面類操作只是對指定類進行操作,不影響原先的類名

單個事件註冊

事件處理on()繫結事件,off()解綁

element.on(events,[selector],fn)

$

("div").

on(, click:

function()

, mousele**e:

function()

})

顯示隱藏 show([speed,easing,fn]) hide() toggle()

滑動 slidedown() slideup() slidetoggle()

淡入淡出 fadein() fadeout() fadetoggle() fadeto()

自定義動畫 animate()

事件切換 hover(function(),function()) 如果只有乙個函式,經過和離開都會觸發函式

jquery的基本選擇器

**$(「選擇器」) ** 裡面的選擇器直接就是css的選擇器,加上引號即可

jquery的隱式迭代

遍歷內部dom元素(偽陣列形式儲存)的過程就叫做隱式迭代

簡單理解:給匹配到的所有元素進行迴圈遍歷,執行相應的方法,不用我們再去迴圈

jQuery學習之基本效果

1 show 顯示隱藏的匹配元素 這個就是 show speed,callback 無動畫的版本。如果選擇的元素是可見的,這個方法將不會改變任何東西。無論這個元素是通過hide 方法隱藏的還是在css裡設定了display none 這個方法都將有效。示例 顯示所有段落 html hello jqu...

jQuery 效果 動畫animate的使用

語法 selector animate speed,callback 引數說明 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可以取以下值 slow fast 或毫秒。可選的 callback 引數是動畫完成後所執行的函式名稱。document r...

jQuery實現動畫效果基本操作

動畫效果 show 顯示 hide 隱藏 toggle 顯示和隱藏效果切換 都可以傳入引數,speed.fadeout 淡出 fadein 淡入 fadetoggle 淡入淡出切換 fadeto 2000,0.3 將顯示到透明度為 30 的程度 滑動顯示 slidedown slideup slid...