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()