1. 程式人生 > >jQuery——入門(三)JQuery DOM操作(核心處理和文件處理)

jQuery——入門(三)JQuery DOM操作(核心處理和文件處理)

jQuery——入門(三)JQuery DOM操作(核心處理和文件處理)

一、核心處理(JQuery物件訪問)

1、頁面載入檢測函式:$(document).ready(function(){}); —— $(function(){});

2、JQuery選擇器函式:$(selector) —— $(“#box”);

3、動態建立JQuery包裝的DOM元素:$(html)

4、JQuery物件遍歷函式:each()

$(selector).each(function(index){});

$.each(selector,function(index){});

5、獲取JQuery選中元素的數量:$(selector).size();   //size()是例項方法,定義在JQuery中,只能在JQuery下使用

6、獲取JQuery選中元素的數量/長度:$(selector).length;   //length是例項屬性,定義在dom和JavaScript中,不使用JQuery也可以使用

7、獲取選中元素中指定下標DOM物件:$(selector).get(index);  //也可以使用$(selector)[index]方式獲取DOM物件

8、獲取指定下標的元素的JQuery物件:$(selector).eq(index);

9、搜尋匹配的元素,獲取指定元素的位置,從0開始計數:index()

二、文件處理

1、在指定元素內部插入HTML內容或文字 —— 內部插入

(1)、append()方法             //$(A).append(B) 把B追加到A中

語法:$(selector).append(content/fn)   向每個匹配的元素內部追加內容

   content:要追加的內容,直接向指定的所有元素追加

   fn:函式,引數有兩個

index:正在遍歷的JQuery選中元素列表的下標

html:要追加的內容

案例1:$(".box").append("<p>hello world</p>");

HTML程式碼:<div class="box"></div>

輸出結果:<div class="box"><p>hello world</p></div>

案例2:$(".box").append(function(index,html){

if(index == 1) {

html = "<p>hello world</p>";

}

return html;

})

注:index:匹配選中元素集合的下標

html:賦值,並返回,追加到指定元素的內部

$(".box").append("hello world"); //父元素.append(內容)  內容可以是純文字

$(".box").append("<p>hello world</p>");   //父元素.append(內容)   內容裡可以含有html標籤

$(".box").append(function(i) {

return i;

 })

(2)、appendTo()方法           //$(A).appendTo(B);  把A追加到B中

語法:$(content).appendTo(selector)    將所有匹配的元素新增到另一個指定的元素中。被追加的元素原來的位置資料被移除。

content可以是現有的,也可以是新增的

與append()方法區別:執行效果相同,語法上內容和目標的位置不同

案例1:把所有段落追加到id值為foo的元素中去

HTML程式碼:<p>hello world</p>

     <div></div>

     <div></div>

JQuery程式碼:$("p").appendTo("div);

輸出結果:<div><p>hello world</p></div>

   <div><p>hello world</p></div>

案例2:新建段落追加div中並加上一個class

HTML程式碼:

 <div></div>

 <div></div>

JQuery程式碼:

$("p").appendTo("div").addClass("test").end().addClass("test2");

輸出結果:

<div><p class="test test2"></p></div>

<div><p class="test"></p></div>

注: $("<p>hello world</p>").appendTo(".box");   //$(內容).appendTo(父元素)   把內容追加到父元素裡  作為最小孩子出現

 內容不能是純文字,可以是新內容也可以是現有內容,如果是現有內容的話,會把現有的元素直接剪下到父元素裡

(3)、prepend()方法 

語法:$(selector).prepend(content | fn);      向每個匹配的元素內部最前面新增指定的內容

content:要新增的內容

fn:函式,有兩個引數,遍歷新增指定的內容

index:當前正在遍歷元素的下標

html:要新增的內容

案例:向所有段落中前置一些HTML標記程式碼

HTML程式碼:<p>hello world</p>

JQuery程式碼:$("p").prepend("<i>HELLO</i>");

輸出結果:<p><i>HELLO</i>hello world</p>

(4)、prependTo()方法

語法:$(selector1).prependTo(selector2);    

在selector2中內容的最前面,新增匹配的selector1的元素(把selector1前置到selector2中)

案例:把所有段落追加到id值為foo的元素中去

HTML程式碼:<p>hello world</p>

     <div id="foo"></div>

JQuery程式碼:$("p").prependTo("#foo");

輸出結果:<div id="foo"><p>hello world</p></div>

2、在指定元素的相鄰位置(之前或之後)插入內容 —— 外部插入

(1)、after()方法

語法:$(selector1).after(selector2);  

向指定的元素selector1之後,新增selector2元素,元素可以是DOM物件,也可以是JQuery物件,也可以是文字!

案例:把div插入p標籤之後

HTML程式碼:<div id="foo"></div>   

     <p>hello world</p>

JQuery程式碼:$("p").after($("#foo"));

               $("p").after($("#foo")[0]);
               $("p").after("<div id="foo"></div> ");

輸出結果:<p>hello world</p><div id="foo"></div>   

(2)、before()方法

語法:$(selector1).after(selector2);
向指定的元素selector1之前,新增selector2元素,元素可以是DOM物件,也可以是JQuery物件,也可以是文字!
案例:把div插入p標籤之前
HTML程式碼:<p>hello world</p> 

     <div id="foo"></div>
JQuery程式碼: $("p").before($("#foo"));
$("p").before($("#foo")[0]);
$("p").before("<div id="foo"></div> ");
輸出結果:<div id="foo"></div> <p>hello world</p>

(3)、insertAfter()方法

語法:$(selector1).insertAfter(selector2)

和after()方法相對,A.after(B)方法是在A之後新增B  === A-B

A.insertAfter(B)方法是將A放到B的後面 === B-A

(4)、insertBefore()方法

語法:$(selector1).insertBefore(selector2)

和before()方法相對,A.before(B)是在A之前新增B ===  B-A

A.insertBefore(B)方法是將A新增到B的前面 === A-B

3、包裹元素

(1)、wrap()

語法:$(selector).wrap(content);

將選中的元素,使用content結構化標記包裹起來

案例:所有的input被div包裹起來

HTML程式碼:<input type="text" />
    <input type="password" value="" />    

JQuery程式碼:$("input").wrap("<div></div>");

輸出結果:<div><input type="text" /></div>

  <div><input type="password" value="" /></div>

(2)、unwrap()

語法:$(selector).unwrap();   刪除被選元素的父元素,可以快速消除wrap效果

案例:移除span

HTML程式碼: <span>
 <input type="password" value="" />
     </span>

JQuery程式碼:$("input[type=password]").unwrap();

輸出結果: <input type="password" value="" />

(3)、wrapAll()

語法:$(selector).wrapAll(wrapper) 

將所有匹配的元素用單個元素包裹起來

案例:

HTML程式碼:<span><input type="text" /></span>

JQuery程式碼:$("span").wrapAll("<b></b>"); 

輸出結果:<b><span><input type="text" /></span></b>

(4)、wrapInner()

語法:$(selector).wrapInner(wrapper)

使用指定的 HTML 內容或元素,來包裹每個被選元素中的所有內容 (inner HTML)

案例:

HTML程式碼:<span>
<input type="password" value="" />
     </span>

JQuery程式碼:$("span").wrapInner("<b></b>");

輸出結果:<span>

<b>
  <input type="password" value="" />

</b>
   </span>

4、替換

(1)、replaceWith()  用指定的HTML內容或元素替換被選元素

語法:$(selector).replaceWith(content)  【維護使用較多】

content:html程式碼,新元素,已存在的元素(不會被移動,只會被複制)或者是函式返回值

 將所有選中匹配的元素,使用content進行替換(或者使用fn函式返回的內容進行替換)

案例:

HTML程式碼:<div>
<span>hello,我是div裡的span元素</span>
     </div>

JQuery程式碼: $("div").replaceWidth("你好世界!");   //JQuery物件.replaceWidth(內容)

$("div").replaceWith("<a href=''>超連結</a>");       

$("div").replaceWith($("span"));  //jquery物件.replaceWidth(內容) 

內容可以是純文字,可以識別標籤,還可以是本來就存在的元素

輸出結果:你好世界!

   超連結

   hello,我是div裡的span元素

(2)、replaceAll() 

語法:$(content).replaceAll(selector)   【維護使用較多】

將所有匹配到的selector的內容,使用content進行替換

注意:和replaceWith的替換和被替換內容剛好相反

案例:

HTML程式碼:<div>
<span>hello,我是div裡的span元素</span>
     </div>

JQuery程式碼:$("<a href=''>hello</a>").replaceAll("div");  

      //$(內容).replaceAll(選擇器) 用內容把後面jquery物件替換掉

輸出結果:hello

5、複製 —— clone()

案例:

HTML程式碼:<div>
<span>hello,我是div裡的span元素</span>
     </div>

JQuery程式碼:var n = $("div").clone();

$("span").append(n);

輸出結果:hello,我是div裡的span元素

  hello,我是div裡的span元素

7、刪除

(1)、empty() 

語法:$(selector).empty();     移除被選元素,包括所有文字和子節點

案例:

HTML程式碼:   <ul>

<li>第一</li>

<li>第二</li>

<li>第三</li>

<div>我是div</div>

</ul>

JQuery程式碼:$("ul").empty();     //jquery物件.empty()清空裡面的內容 自身還在

輸出結果:(內容被清空,html還在)HTML程式碼:<ul></ul>

(2)、remove()

語法:$(selector).remove();   從DOM中刪除所有selector匹配的元素

案例:

HTML程式碼:   <ul>

<li>第一</li>

<li>第二</li>

<li>第三</li>

<div>我是div</div>

</ul>

JQuery程式碼:$("ul").remove(); 

輸出結果:(所有jquery物件裡的東西,包含自身都被刪除完畢,無HTML程式碼)

(3)、detach()

語法:$(selector).detach(); 移除被選元素,包括所有文字和子節點

案例:同remove()