jQuery相關知識點2

標籤：選擇   操作dom   ogg   傳回值   ajax   代碼   test   function   刪除元素   

1-jQuery-

jQuery是一個JavaScript庫，通過封裝原生對象的JavaScript函數得到一套定義良好的方法。

jQuery主旨：以更少的代碼，實現更多的功能。

 

2—jQuery優勢

可以像css一樣訪問和操作dom；修改css控制頁面外觀；簡化js代碼操作；事件處理更容易；動畫效果使用方便；ajax技術更加完美；大量的基於jQuery的外掛程式；可以自訂擴充功能外掛程式

 

3—jQuery文法

$(selector).action()

 

4—多庫衝突

jQuery.onConflict()

 

5—原生js對象和jQuery對象之間的轉換

 

Js對象=>jQuery對象

var p=document.getElementById(‘p’);

$(p);  //轉換成jQuery對象

 

jQuery對象=>js對象

 $(p).get(0)或者$(p)[0]  //這樣就得到js原生對象

 

6—dom操作

（1）設定元素及內容

html()  擷取元素中的html內容

html(value) 設定元素中的html內容

text()   擷取元素中常值內容

text(value) 設定元素中常值內容

val()   擷取表單元素中的常值內容

val(value) 設定表單元素中的常值內容

  （2）操作元素屬性：對標籤元素屬性的操作

attr（key） 擷取元素key的屬性值

attr(key,value)設定元素key屬性的屬性值

attr({key1:value,key2:value}) 設定元素多個key屬性的屬性值，方法的參數就是一個object對象

（3）操作css樣式

Css({name1:value1,name2:value2})  設定元素多個css樣式

addClass(class)   給每個元素添加一個css

addClass(class1,class2,class3)  給元素添加多個css類

remove(class)    刪除元素的一個css類

removeClass(class1,class2,class3) 刪除元素的多個css類

 

toggleClass(class)  來回切換預設樣式和指定樣式

 

7—如何使用jQuery來提取一個html標記的屬性，如連結的href

attr()方法被用來提取任意一個html元素的一個屬性的值。首先需要

利用jQuery選擇到所有的連結或者一個特定的連結，然後應用attr()方法來擷取它們的href屬性的值。

$(‘a’).each(function(){

   alert($(this).attr(‘href’));

});

 

8—jquery中的detach()和remove()方法的區別

   都被用來移除一個dom元素，兩者之間的主要不同在於detach()會保持對過去被解除元素的跟蹤，因此可以取消解除；而remove()方法則會保持過去被移除對象的引用。

 

9—jQuery選取器

 

（1）基本選取器

 

Id選取器：$(“#mydiv”)  傳回值為單個元素組成的集合 直接選取html中id為mydiv的元素

 

標籤選取器：$(“div”)  傳回值為集合元素  選擇div元素

 

類別選取器：$(“.mydiv”) 傳回值為集合元素  選擇類名為mydiv的元素/組

 

萬用字元選取器：$(“*”)  傳回值為集合元素 匹配所有元素，多用於結合上下文來搜尋

 

組合選取器： $(“div,span,p,.myclass,#mydiv”) 傳回值為集合元素 將每一個選擇匹配到的元素合并後一起返回，可以指定任意多個選取器，並將匹配到的元素合并到一個結果內

  

（2）層次選取器

 

祖先後代選取器：$(“form input”) 傳回值為集合元素  在給定的祖先元素下匹配所有後代元素。

 

父子項目選取器：$(“form>input”) 傳回值為集合元素  在給定的父元素下匹配所有子項目

 

相鄰元素選取器：$(“div+input”)  傳回值為集合元素   匹配所有緊鄰著prev元素後的第一個next元素

 

兄弟元素選取器：$(“div~input”) 傳回值為集合元素  匹配所有prev元素之後的所有sibling元素

 

（3）過濾選取器

主要通過特定的過濾規則篩選出所需的dom元素，該選取器以:開頭

按照不同的過濾規則，過濾選取器可分為基本過濾、內容過濾、可見度過濾、屬性過濾、子項目過濾和表單對象屬性過濾器。

 

基本過濾選取器：

:first  $（“tr:first”） 傳回值為單個元素  匹配找到的第一個元素

:last   $(“tr:last”)   傳回值為單個對象  匹配找到的最後一個元素

:not(selector)   $(“input:not(:checked)”)  傳回值為集合元素  去除所有與給定選取器匹配的元素，即沒有被選中的input元素

 

:even   $(“tr:even”)  傳回值為集合元素   匹配所有索引值為偶數的元素，從0開始計數

 

:odd    $(“tr:odd”)   傳回值為集合元素   匹配所有索引值為奇數的元素，從0開始計數

 

:eq(index)  $(“tr:eq(0)”)  傳回值為集合元素  匹配一個給定索引值的元素 eq(0)是擷取第一個tr元素，括弧內的是索引值

 

:gt(index)  $(“tr:gt(0)”)  傳回值為集合元素   匹配所有大於給定索引值的元素

 

:lt(index)  $(“tr:lt(2)”)  傳回值為集合元素   匹配所有小於給定索引值的元素

 

:header   $(“:header”)  傳回值為集合元素   匹配如h1，h2之類的標題元素

 

:animated  $(“:animated”) 傳回值為集合元素 匹配所有正在執行動畫效果的元素

 

內容過濾選取器：

主要體現在它所包含的子項目和常值內容上

 

:contains(text)   $(“div:contain(‘john’)”)  傳回值為集合元素  匹配包含給定文本的元素，其作用是尋找被標籤圍起來的常值內容是否符合指定的內容的

 

:empty  $(“:empty”)  傳回值為集合元素  匹配所有不包含子項目或者文本的空元素

 

:has(selector)   $(“div:has(p)”)  傳回值為集合元素  匹配含有選取器所匹配的元素的元素

 

:parent   $(“td:parent”)  傳回值為集合元素  匹配含有子項目或者文本的元素

 

可見度過濾選取器：

根據元素的可見和不可見狀態來選擇相應的元素

:hidden  $(“:hidden”)  傳回值為集合元素  匹配所有的隱藏元素

 

:visible $(“tr:visible”) 傳回值為集合元素  匹配所有的可見元素

 

屬性過濾選取器

通過元素的屬性來擷取相應的元素

[attribute]  $(“div[id]”) 傳回值為集合元素  匹配所有包含給定屬性的元素，如選取所有帶id屬性的div標籤

 

[attribute=value]  $(“input[name=’newsletter’]”) 傳回值為集合元素 匹配給定的屬性是某個特定值的元素

 

[attribute!=value] $(“div[title!=’test’]”) 傳回值為集合元素 匹配所有不含有指定的屬性或者屬性不等於特定的元素

 

[attribute^=value] $(“input[name^=’news’]”)  傳回值為集合元素 匹配給定的屬性是以某些值開始的元素

 

[attribute$=value]  $(“input[name$=’lete’]”) 傳回值為集合元素 匹配給定的屬性是以某些值結尾的元素

 

[attribute*=value]  $(“input[name*=’name’]”) 傳回值為集合元素 匹配給定的屬性是以包含某些值的元素

 

[attributeSelector1][attributeSelector2][attributeSelector3]  $("input[id][name$=‘man‘]");傳回值：集合元素。 複合屬性選取器，需要同時滿足多個條件時使用。

 

元素過濾選取器：

:nth-child(index) $(“ul li:nth-child(2)”) 傳回值為集合元素 匹配其父元素下的第n個子項目，從1開始的

 

:first-child  $(“ul li:first-child”)  傳回值為集合元素  匹配第一個子項目

 

:last-child    $(“ul li:last-child”)   傳回值為集合元素 匹配最後一個子項目

 

:only-child    $(“ul li:only-child”)   傳回值為集合元素  如果某個元素是父元素中唯一的子項目，將會被匹配到

 

表單對象屬性過濾選取器：

:enabled   $(“input:enabled”) 傳回值為集合元素 匹配所有可用的元素  尋找所有input中不帶disabled=”disabled”的input元素

 

:disabled  $(“input:disable”) 傳回值為集合元素 匹配所有停用元素

 

:checked   $(“input:checked”) 傳回值為集合元素 匹配所有被選中的元素

 

:selected  $(“select option:selected”) 傳回值為集合元素  匹配所有選中的option元素

 

（4）表單選取器

:input $(“:input”)  傳回值為集合元素 匹配所有input textarea select button 元素

 

:text  $(“:text”)  傳回值為集合元素  匹配所有的單行文字框

 

:password  $(“:password”)  傳回值為集合元素  匹配所有的密碼框

 

:radio   $(“:radio”)  傳回值為集合元素  匹配所有選項按鈕

 

:checkbox  $(“:checkbox”)  傳回值為集合元素  匹配所有複選框

 

:submit   $(“:submit”)  傳回值為集合元素  匹配所有提交按鈕

 

:image   $(“:image”)  傳回值為集合元素  匹配所有的映像域

 

:rest  $(“:reset”)  傳回值為集合元素  匹配所有重設按鈕

 

:button  $(“:button”)  傳回值為集合元素  匹配所有按鈕

 

:file   $(“:file”)  傳回值為集合元素  匹配所有檔案域

 

:hidden  $(“:hidden”) 傳回值為集合元素  匹配所有不可見的元素

jQuery相關知識點2