jQuery 基礎 (筆記源於runoob)

2022-09-06 15:30:17 字數 2541 閱讀 5345

在您開始學習 jquery 之前,您應該對以下知識有基本的了解:

jquery是乙個j**ascript函式庫。

jquery是乙個輕量級的"寫的少,做的多"的j**ascript庫。

jquery庫包含以下功能:

可以通過多種方法在網頁中新增 jquery。 您可以使用以下方法:

從 cdn 中載入 jquery, 如從 google 中載入 jquery

1.通過 jquery,您可以選取(查詢,query) html 元素,並對它們執行"操作"(actions)。

基礎語法:$(selector).action()

例項:您也許已經注意到在我們的例項中的所有 jquery 函式位於乙個 document ready 函式中:

$(document).ready(function());

這是為了防止文件在完全載入(就緒)之前執行 jquery **,即在 dom 載入完成後才可以對 dom 進行操作。

如果在文件沒有完全載入之前就執行函式,操作可能失敗。下面是兩個具體的例子:

jquery 選擇器允許您對 html 元素組或單個元素進行操作。

選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"(或選擇)html 元素。 它基於已經存在的 css 選擇器,除此之外,它還有一些自定義的選擇器。

jquery 中所有選擇器都以美元符號開頭:$()。

jquery 元素選擇器基於元素名選取元素。

在頁面中選取所有 元素:

$("p")

jquery #id 選擇器通過 html 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的,所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下:

$("#test")

jquery 類選擇器可以通過指定的 class 查詢元素。

語法如下:

$(".test")

語法描述

$("*")

選取所有元素

$(this)

選取當前 html 元素

$("p.intro")

選取 class 為 intro 的 元素

$("p:first")

選取第乙個 元素

$("ul li:first")

選取第乙個 元素的第乙個 元素

$("ul li:first-child")

選取每個 元素的第乙個 元素

$("[href]")

選取帶有 href 屬性的元素

$("a[target='_blank']")

選取所有 target 屬性值等於 "_blank" 的 元素

$("a[target!='_blank']")

選取所有 target 屬性值不等於 "_blank" 的 元素

$(":button")

選取所有 type="button" 的 元素 和 元素

$("tr:even")

選取偶數字置的 元素

$("tr:odd")

選取奇數字置的 元素

如果您的**包含許多頁面,並且您希望您的 jquery 函式易於維護,那麼請把您的 jquery 函式放到獨立的 .js 檔案中。

script>

script>

//my_jquery_function.js為外部js檔案 用其存放相關的jquery**

head>

jquery 是為事件處理特別設計的。

事件處理程式指的是當 html 中發生某些事件時所呼叫的方法

常見 dom 事件:

滑鼠事件

鍵盤事件

表單事件

文件/視窗事件

click 單擊

keypress 按鍵

submit

load

dblclick 雙擊

keydown 按鍵下落過程

change

resize

mouseenter滑鼠進入

keyup     按鍵彈起

focus得到焦點

scroll

mousele**e滑鼠離開

blur  失去焦點

unload

注:keypress() 方法觸發 keypress 事件,或規定當發生 keypress 事件時執行的函式。

keypress 事件與 keydown 事件類似。當按鈕被按下時發生該事件。

然而,keypress 事件不會觸發所有的鍵(比如 alt、ctrl、shift、esc)。請使用 keydown() 方法來檢查這些鍵。

submit() 方法觸發 submit 事件,或規定當發生 submit 事件時執行的函式。

當提交表單時,會發生 submit 事件。

該事件只適用於 元素。

觸發被選元素的 submit 事件:$(selector).submit()

新增函式到 submit 事件:$(selector).submit(function)

jquery基礎筆記

1 jquery 2 animate方法 animate animate 方法執行 css 屬性集的自定義動畫。該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性 值是逐漸改變的,這樣就可以建立動畫效果。只有數字值可建立動畫 比如 margin 30px 字串值無法建立動畫 比如 ba...

JQuery基礎筆記

一.jquery物件和js物件區別與轉換 1.jquery物件在操作時,更加方便。2.jquery物件和js物件方法不通用的.3.兩者相互轉換 jq js jq物件 索引 或者 jq物件.get 索引 js jq js物件 二.選擇器 篩選具有相似特徵的元素 標籤 1.基本操作學習 1.事件繫結 1...

Jquery基礎學習筆記 1

1 屬性 為所有匹配的元素設定乙個計算的屬性值 為所有的input新增屬性class btn input attr class btn 2 css 為每個匹配的元素新增指定的類名 對所有的提交按鈕新增樣式 input submit addclass btn 3 值 獲得第乙個匹配元素的當前值 取的某...