一 概述

1.JQuery是什麽？

JQuery是一個JavaScript庫，簡化了JS操作，擴展了JS功能。

2.分離原則

JQuery遵循導入與使用分離的原則，即使用一個<script>導入，另建一個<script>標簽使用。

3.基本語法

$(selector).action();

獲取HTML元素，對該元素執行指定的操作。

二 選擇器

1.基本選擇器

同CSS選擇器相同，JQuery基本選擇器根據標簽、類別、id選擇HTML元素。

2.組合選擇器

• $(selector01,selector02,selectorN)：獲取滿足任何一個條件的元素的集合。
• $(selector01selecctor02)：獲取同時滿足多個條件的元素。
• $(selector01 selector02)：獲取滿足第一個條件的元素的子元素中滿足第二個條件的元素。

3.屬性選擇器

根據屬性選擇元素。

• $("[attr]")：獲取帶attr屬性的全部元素。
• $("[attr=‘value‘]")：獲取具有指定屬性值的全部元素。
• $("[attr！=‘value‘]")：獲取具有指定屬性並且其值不等於指定值的全部元素。
• $("[attr$=‘value‘]")：獲取具有指定屬性並且其值以指定值結尾的全部元素。
• $("[attr^=‘value‘]")：獲取具有指定屬性並且其值以指定值開頭的全部元素。

4.$(this)

通常用在方法內部,獲取當前對象，即方法的調用者。

三 元素操作

1.元素創建

$("<tag>")

JQuery創建對象時使用的HTML標簽，可以僅僅是標簽的開頭<tag>，也可以同時包含開頭與結尾<tag></tag>，還可以包含詳情，如

<tag style="xxxxx">content</tag>

• 不能夠直接使用標簽名創建對象，即$("tagName")不能創建對象，這一點不同於JavaScript。
• 不能夠單獨使用標簽結束標識創建對象，即$("</tag>")不能創建對象。

2.獲取內容

• text()：設置或者返回所選元素的文本內容。
• html()：設置或者返回所選元素的內容（包含HTML標簽）。
• val()：設置或者返回所選字段的值。

3.內部插入

• append()：在結尾（後端）添加子元素。
• prepend()：在開頭（前端）添加子元素。
• appendTo()：將操作對象作為子對象添加到參數對象結尾。

4.外部插入

• before()：在前面添加兄弟元素。
• after()：在後面添加兄弟素。
• insertBefore()：在前面插入兄弟元素。
• insertAfter()：在後面插入兄弟元素。

5.刪除元素

• remove()：刪除自身及子元素。
• empty()：刪除子元素。
• remove("根據基本選擇器選擇指定元素")：刪除基本選擇器中指定元素。

6.獲取子元素

• children()：獲取全部子元素。
• children("基本組合選擇器")：獲取具有自定標簽與指定屬性的子元素。

7.篩選

如果一個選擇器返回的結果不是一個對象，而是多個對象構成的集合，可以使用以下方法獲取集合中的指定對象：

• eq(index)：獲取集合中指定索引位置的對象，索引從0開始。
• filter(":even")：獲取集合中所有索引為奇數的對象。
• filter(":odd")：獲取集合中所有索引為偶數的對象。
• slice(index)：獲取索引大於指定值的對象。
• slice(0,index)：獲取索引小於指定值的對象。
• not(selector)：選擇指定對象以外的全部對象。

四 屬性操作

• attr("attrName")：獲取屬性值。
• attr("attrName","attrValue")：修改屬性值。
• removeAttr("atrrName")：刪除屬性。

五 常用操作

• 遍歷對象：$.each(obj,function(i,n))，i是索引，n是當前遍歷子對象。
• 獲取單選按鈕與復選框的選擇狀態：$(this).is(":checked")。

六 常用標簽及其操作

1.select

⑴增加選項

$(selector).options[index]=new Option(name,value);//按照索引增加
$(selector).add(option,before);//按照指定位置增加

⑵刪除選項

$(selector).length=0;//全部刪除
$(selector).remove(index);//按索引刪除

⑶option

• option.index：設置與返回index屬性值。
• option.text：設置與返回文本。
• option.value：設置與返回value。
• option.selected：設置與返回選擇狀態，true/false。

JQuery總結摘要