Jquery 基本知識(一)

標籤：技術   option   code   tar   css   ack   ges   關係   focus   

1.

DOM對象：通過例如getElementById方法擷取到DOM樹中的元素就是DOM對象

jQuery對象：通過jQuery封裝DOM對象後產生的對象

    --- 注意：jQuery對象和DOM對象不能使用對方的任何方法

 

 

2.Dom對象和Jquery對象之間的轉化

jQuery對象轉成DOM對象有兩種方法：

　　　　1、[index]

        var $div = $(‘div‘);//jQuery對象        var div = $div[0];//DOM對象

 

　　　　2、get(index)

        var $div = $(‘div‘);//jQuery對象        var div = $div.get(0);//DOM對象

　　

DOM對象轉成jQuery對象有一種方法：$(DOM對象)

        var div = document.getELementsByTagName(‘div‘)[0];//DOM對象        var $div = $(div);//jQuery對象

 

 

 

3.DOM樹對象

Document 的理解：

第一點：Document它管理了所有的Html文檔內容。

第二點：document它是一種文檔樹結構。有層級關係。

第三點：它讓我們把所有的標籤 都 對象化

第四點：我們可以通過document訪問所有的標籤對象。

 

document.getElementById(elementId)

通過標籤的id屬性尋找標籤dom對象，elementId是標籤的id屬性值

 

document.getElementsByName(elementName)

通過標籤的name屬性尋找標籤dom對象，elementName標籤的name屬性值

 

document.getElementsByTagName(tagname)

通過標籤名尋找標籤dom對象。tagname是標籤名

 

document.createElement(tagName)

通過標籤名，建立一個標籤dom對象在記憶體裡，tagName是標籤名。

 

4.jQuery選取器

    1.基本選取器

       改變id為div1的所有div的背景色

        $(‘#div1‘).css(‘background‘,‘#bbffaa‘);

　　

　　改變所有p標籤和class為one的div的背景色

        $(‘p,.one‘).css(‘background‘,‘#bbffaa‘);

      

      2.層次選取器

         選取div裡的所有span元素

1         $(‘div span‘);

　　選取div下元素名是span的子項目

         $(‘div > span‘);

　　選取class是one的下一個<div>同輩元素

        $(‘.one + div‘);

　　選取class是one的後面的所有的<div>同輩元素

        $(‘.one ~ div‘);

    

    3.過濾選取器 

 

       選取所有<div>元素中第一個<div>元素

        $(‘div:first‘);

　　　　選取class不是one的<div>元素

        $(‘div:not(.one)‘);

　　　　選取索引是偶數的的<div>元素

        $(‘div:even‘);

　　　　選取索引等於2的<div>元素

        $(‘div:eq(2)‘);

　　　　選取索引大於2的<div>元素

         $(‘div:gt(2)‘);

　　　　選取所有標題元素，例如h1、h2等

        $(‘:header‘);

　　　　選取當前正在執行動畫的所有元素

        $(‘:animated‘);

　　　　選取擷取當前焦點的元素

        $(‘:focus‘);

 

　　     

　　　　選取含有文本“堅持”的<div>元素

        $(‘div:contains(‘堅持‘)‘);

　　　　選取不包含子項目或者文本的<div>元素

        $(‘div:empty‘);

　　　　選取含有<p>元素的<div>元素

        $(‘div:has(p)‘);

　　　　選取含有子項目或者文本的元素

        $(‘div:parent‘);

 

 

　　　　

　　　　選取所有不可見的元素。包括<input type="hidden" />,<div style="display:none">和<div style="overflow:hidden">

        $(‘:hidden‘);

　　　　選取所有可見的<div>元素

        $(‘div:visible‘);

 

 

　　　　

　　　　選取有id屬性的元素

        $(‘div[id]‘);

　　　　選取id等於myId的<div>元素

        $(‘div[id="myId"]‘);

　　　　選取id值不等於myId的<div>元素

        $(‘div[id!="myId"]‘);

　　　　選取id值以my開頭的<div>元素

        $(‘div[id^="my"]‘);

　　　　選取id值以my結尾的<div>元素

        $(‘div[id$="my"]‘);

　　　　選取id值含有my的<div>元素

        $(‘div[id*="my"]‘);

　　　　選取屬性title等於en或者以en為首碼（en後跟一個連字號‘-‘）的元素

        $(‘div[title|="en"]‘);

　　　　選取屬性title中用空格分隔的值中包含字元en的<div>元素

        $(‘div[title~="en"]‘);

　　　　選取擁有屬性id並且屬性title以en為首碼的<p>元素

        $(‘p[id][title|="en"]‘);

 

　　

　　　　4.子項目過濾器

               

選取每個class為one的<div>父元素下的第2個子項目

        $(‘div.one :nth-child(2)‘);

　　　　選取每個class為one的<div>父元素下的第1個子項目

        $(‘div.one :first-child‘);

　　　　選取<ul>中是唯一子項目的<li>元素

        $(‘ul li:only-child‘);

 

 

 

　　　　5.表單對象屬性過濾選取器

　　　　選取id為"form1"表單內的所有可用元素

        $(‘#form1:enabled‘);

　　　　選取id為"form1"表單內的所有不可用元素

        $(‘#form1:disabled‘);

　　　　選取所有被選中的<input>元素

        $(‘input:checked‘);

　　　　選取所有被選中的選項元素

        $(‘select option:selector‘);

 

 

　　　　6.表單選取器

　　　　選取所有的<input>、<textarea>、<select>和<button>元素

        $(‘:input‘);

　　　　選取所有的單行文字框

        $(‘:text‘);

　　　　選取所有的不可見的元素

        $(‘:hidden‘);

 

Jquery 基本知識(一)