1. 程式人生 > >JQ DOM 文件處理

JQ DOM 文件處理

文件處理

一、建立元素節點

1、使用函式建立新元素

  1. 建立的新元素不會自動的把新元素插入到頁面中,我們還需要明確的指定其插入到頁面中的位置(比如使用append方法,指定其插入位置為某個元素的最後一個子元素)
  2. 返回的jQuery物件中只包含html片段最頂層(外層)的元素,對於後代元素我們可以像處理頁面中已有元素一樣,使用children或find方法訪問 也就是說alert($newElement);的結果應為1
  3. 既然可以直接apend等方法插入html元素為何還要有這個建立新元素的功能? 使用$函式建立元素,是返回的是jQuery物件,我們可以使用jQuery物件裡面的方法在建立的這個元素被插入到頁面之前進行各種操作比如進行繫結事件處理函式!

2、克隆已有的元素

  1. jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

  2. 引數

    引數 描述
    withDataAndEvents 可選/Boolean型別是否同時複製元素的附加資料和繫結事件,預設為false
    deepWithDataAndEvents 可選/Boolean型別是否同時複製元素的所有子元素的附加資料和繫結事件,預設值即為引數withDataAndEvents
    的值。
  3. 注意

    jQuery 1.5 新增支援:clone()支援第二個引數deepWithDataAndEvents。該引數指示是否同時複製被克隆元素的所有子元素的附加資料和繫結事件。

    注意
    1、在jQuery 1.4之前,clone()函式只額外複製元素的繫結事件,從1.4版本開始,才開始支援複製元素的附加資料。
    2、1.5.0版本時(只有1.5.0),引數withDataAndEvents的預設值被錯誤地設定為true,從1.5.1開始,其預設值才被改回false

二、新增元素

1、內部新增

  1. 向當前元素的內部追加內容新增到末尾

    append($(selector))  
    
  2. 將當前元素在某元素內部追加。但由於會根據需要對當前元素進行移動,所以jQuery物件更改了,可用end()還原

    appendTo($(selector))  
    
  3. 向當前元素的內部前置內容

    prepend($(selector))  
    
  4. 將當前元素在某元素內部前置。類似於appendTo(),會改變物件

    prependTo($(selector))   
    

2、外部新增

  1. 向當前元素之後插入內容

    after($(selector))  
    
  2. 將當前元素插入到某元素之後。類似於appendTo(),會改變物件

    insertAfter($(selector))  
    
  3. 向當前元素之前插入內容

    before($(selector))  
    
  4. 將當前元素插入到某元素之前。類似於appendTo(),會改變物件

    insertBefore($(selector))  	
    

三、刪除元素

  1. 刪除當前元素,該元素包含的文字內容和後代元素會一起刪除掉,繫結的事件也不復存在

    remove()
    
  2. 同樣是刪除當前元素,但是繫結的事件還是存在的

    detach()
    
  3. 清空當前元素,該元素的文字內容和後代元素都將刪除,但保留其本身

    empty()
    

四、替換元素

  1. 移動頁面上原有的元素來替換當前選定的頁面元素,也可以新增新元素來替換

    replaceWith($(selector))
    replaceWith($(html))  
    
  2. 用當前選定的元素來替換某元素,可以使頁面上原有元素,也可以是新元素。同樣會根據需要複製當前元素副本,從而更改jQuery物件

     replaceAll($(selector))
     replaceAll($(html))