JQuery入門學習(1)

2022-07-25 06:42:08 字數 2299 閱讀 5296

為了避免在dom対象完全載入之前過早地執行**,jquew提供 了乙個名為ready()的函式,使用函式 ,使用該函式可以將包括在其中的**推遲至dom物件載入完畢後再執行。語法格式如下:

$[(document).ready](function());
(1)如果不希望使用 ready()函 數 ,則可 將jquery**寫在頁面html**的最下邊 ,例如 ,將**寫在

之 後 。

(2)使用ready()函式的話我們可以把**寫在

中示例:

(1)情況一:寫在

中,但沒有使用ready()函式:

步驟1:在

中插入表單

步驟2:把點選觸發事件的jquery**寫在

步驟3:執行效果如下圖;發現點選按鈕並沒有觸發點選事件(原因可能是沒有捕獲到點選事件)

(2)把jquery**放在表單之後:

步驟1:把jquery**放在表單之後

步驟2:執行效果,出現提示

(3)寫在

中,使用ready()函式

步驟1:在index1.html基礎上,使用ready()函式

步驟2**:**執行效果,出現提示

①通用選擇器:通用選擇器$(*)用於返回頁面中所有元素。

② 元素(標記)選擇器:元素選擇器$("元素名")用於返回指定型別的所有元素。

$("p") 選取 元素。

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

$("p#demo") 選取所有 id="demo" 的 元素。$("h1").css("color","blue");呼叫css()方法將頁面中所有標記的字型顏色設定為藍色

③ id選擇器:id選擇器$("#元素id")用於返回指定元素id值代表的單一元素。

//設定伺服器控制項textbox1的text屬性為"張三"

$("#textbox1").attr("value","張三");//attr()方法的語法格式為attr("屬性名","屬性值");

④ 類選擇器:類選擇器$(".類名稱")用於返回使用指定類名稱的所有元素。

//下列語句將第一和第三層的背景色設定為紅色

這是第乙個層

這是第二個層

這是第三個層

//jquery**:

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

⑤ 組合選擇器:組合選擇器可以將多種選擇器組合在一起,返回所有符合條件的元素。

$(".c1,#d2").css("background-color","red");

$("h1,h2").css("color","blue");

通過dom物件的層次關係來獲取特定元素,如同輩元素、子元素和相鄰元素等。層次選擇器也是使用$()函式來實現的,返回結果均為jquery物件陣列。

$(".one+div");     等同於     $(".one").next("div");

$(".one~div");     等同於     $(".one").nextall("div");

示例:

使用過濾選擇器可以按照預設過濾規則(條件)篩選出所需要的頁面元素。

//設定**第1行的背景色為灰色

$("table tr:first").css("background-color","gray");

//設定**最後1行文字右對齊

$("table tr:last").css("text-align","right");

siblings() 方法返回被選元素的所有同級元素。

JQuery入門學習(2)

1 屬性操作 attr 方法 attr 方法用於獲取所匹配元素集合中第乙個元素的屬性,也可以用來設定所匹配元素的乙個或多個屬性值,attr 方法有如下所示的4種語法格式。attr name 獲取元素的屬性值 attr name,value 設定元素的某個屬性的值 attr 設定元素的多個屬性的值 a...

JQuery 入門學習列表

選擇器 元素選擇 eq find parents next prev index dom元素和jquery元素區別與轉換 eq get 屬性樣式操作 attr data css 類操作 addclass removeclass toggleclass hasclass 獲取寬高 width heig...

jQuery 學習筆記1

一 引入jquery庫 引入jquery.js檔案。方法2 url引入 jquery.js 二 jquery 語法 jquery 語法是為 html 元素的選取編制的,可以對元素執行某些操作。基礎語法是 selector action 三 jquery 語法示例 this is another pa...