jQuery開發之DOM操作四，jquery開發dom
1，設定擷取HTML、文本和值
(1) html()方法
此方法類似於javaScript的innerHTML 屬性，可以用來讀取或者設定某個元素的HTML內容。
範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("ul li:eq(2)").click(function(){ var $li_html =$(this).html(); alert($li_html); });});</script></head><body><p title ="選擇最喜歡的水果">選擇最喜歡的水果</p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul></body></html>運行結果如下：
(2)text()方法
範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ var p_text =$("p").text(); alert(p_text);});</script></head><body><p title ="選擇最喜歡的水果"><strong>選擇最喜歡的水果</strong></p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul></body></html>運行結果如下：
注意：
(1) JavaScript中的innerHTML 屬性並不能在Firefox瀏覽器下運行，而jQuery 的text()方法支援所有的瀏覽器。
(2) text()方法對所有的HTML文檔和XML文檔都有效。
(3) val()方法
此方法類似於JavaScript中的value屬性，可以用來設定擷取元素的值。
範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("body").dblclick(function(){ var p_text =$("input").val(); alert(p_text); });});</script></head><body><p title ="選擇最喜歡的水果" ><strong>選擇最喜歡的水果</strong></p><ul><li title ="蘋果">蘋果</li><li title ="橘子">橘子</li><li title ="菠蘿">菠蘿</li></ul><div><input type ="text"/></div></body></html>運行結果如下：
2，遍曆節點
(1) children()方法
該方法用於取得匹配元素的子項目集合。
(2) next()方法
該方法用於取得匹配元素後面緊鄰的同輩元素。
(3)prev()方法
該方法用於擷取匹配元素前面近鄰的同輩元素。
(4)siblings()方法
該方法用於匹配元素前後所有的同輩元素。
(5)closest()方法
該方法用於擷取最近匹配的元素，首先檢查當前元素是否匹配，如果匹配，直接返回元素本身，如果不匹配則向上尋找父元素，逐級向上直到找到匹配的元素，如果什麼都沒有找到，那麼返回一個空的jQuery對象。
(6) parent(),parents()與closest()的區別
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
