標籤：dom
DOM（Document Object Model 文件物件模型）：一種與瀏覽器、平台、語言無關的介面，使用該介面可以輕鬆地訪問頁面中所有的標準組建
DOM操作的分類
-DOM Core : DOM Core並不專屬於JavaScript，任何一種支援DOM的程式設計語言都可以使用。它的用途並非僅限於處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文檔，如XML
-HTML DOM：使用JavaScript和DOM為HTML文檔編寫指令碼時，有許多專屬於HTML-DOM的屬性
-CSS-DOM：針對於CSS操作，在JavaScript中，CSS-DOM主要用於擷取和設定style對象的各種屬性
參考 http://shamrock.blog.51cto.com/2079212/1564560
http://shamrock.blog.51cto.com/2079212/1564688
尋找節點
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">//測試JQuery操作文本節點 屬性節點$(function() {//操作文本節點，通過JQuery對象的text()方法alert($("#bj").text());$("#bj").text("北京天安門");//操作屬性節點 通過JQuery對象的attr()方法alert($(":text[name=‘username‘]").attr("value"));$(":text[name=‘username‘]").attr("value", "syd");});</script></head><body><p>你喜歡哪個城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="sz2">深圳2</li> </ul> <p>你喜歡哪本書？</p> <ul id="book"> <li id="xyj" name="xyj">西遊記</li> <li>三國演義</li> <li>水滸傳</li> <li>水滸傳2</li> </ul> <br/> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br/> <input type="text" name="username" value="umgsai"/></body></html>
建立節點並且添加到指定的位置
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Untitled Document</title><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">//測試JQuery建立節點並且插入節點到指定位置$(function() {//建立一個p節點,並添加到city下//$("<li id=‘atguigu‘>尚矽谷</li>").appendTo("#city");//$("#city").append("<li id=‘atguigu‘>【尚矽谷】</li>");//alert($("#atguigu").text());//接到第一個節點的 前面$("<li id=‘atguigu‘>尚矽谷1</li>").prependTo($("#city"));//$("#city").prepend("<li id=‘atguigu‘>【尚矽谷】</li>");//插入到指定位置的後面//$("<li id=‘atguigu‘>尚矽谷2</li>").insertAfter($("#bj"));$("#bj").after($("<li id=‘atguigu‘>尚矽谷2</li>"));//插入到指定位置的前面//$("<li id=‘atguigu‘>尚矽谷3</li>").insertBefore($("#bj"));$("#bj").before($("<li id=‘atguigu‘>尚矽谷4</li>"));});</script></head><body><p>你喜歡哪個城市？</p> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="sh">上海</li> <li id="sz">深圳</li> <li id="sz2">深圳2</li> </ul> <p>你喜歡哪本書？</p> <ul id="book"> <li id="xyj" name="xyj">西遊記</li> <li>三國演義</li> <li>水滸傳</li> <li>水滸傳2</li> </ul> <br/> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br/> <input type="text" name="username" value="umgsai"/></body></html>
本文出自 “阿凡達” 部落格，請務必保留此出處http://shamrock.blog.51cto.com/2079212/1565065
JQuery學習筆記-JQuery的DOM操作
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
