(三)jquery操作DOM

轉自:http://blog.csdn.net/lovesummerforever/article/details/45563239

什麼是DOM?

       DOM(Document Object Model,簡稱DOM),文檔對象模型。

       DOM是w3c的標準。DOM定義了訪問HTML和XML文檔的標準:W3C文檔對象模型(DOM)是中立於平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。

       Document:即文檔,我們創建一個頁面並加載到WEB瀏覽器的時候,DOM模型根據該頁面的內容創建一個文檔文件。

       Object:即文件,新建頁面成爲文檔對象,對象關聯特徵稱爲文檔屬性,訪問對象函數稱對象方法。

       Model:即模型。在頁面中通過樹狀模型展示頁面的元素和內容。


       例如如下html代碼

[html] view plain copy
 print?
  1. <span style="font-family:Microsoft YaHei;font-size:14px;">    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.     <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <title>DOM樹狀文檔</title>  
  5.         <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>  
  6.         <style>  
  7.           body{font-size:13px}  
  8.           table,div,p,ul{width:280px;border:solid 1px #666;  
  9.           margin:10px 0px 10px 0px;  
  10.           padding:0px;background-color:#eee}  
  11.         </style>  
  12.     </head>  
  13.     <body>  
  14.          <table>  
  15.            <tr><td>Td1</td></tr>  
  16.            <tr><td>Td2</td></tr>  
  17.          </table>  
  18.          <div>Div</div>  
  19.          <p>P</p>  
  20.          <div><span>Span</span></div>  
  21.          <ul>  
  22.            <li>Li1</li>  
  23.            <li>Li2</li>  
  24.          </ul>    
  25.     </body>  
  26.     </html>  
  27. </span>  
       其對應的樹狀模型如下圖



jquery操作DOM

       如下圖所示


       (圖片看不全,請右拉下方滾動條,謝謝)


       上圖中主要是針對jQuery操作元素屬性,jquery操作元素CSS,jquery操作頁面節點三方面來說的。孔子說“學而時習之,不亦說乎”,學到的東西有機會付諸於實踐,這不是一件值得高興的事情嗎?實踐是檢驗真理的唯一標準,還是在實踐中使用,這樣才能得到。

       PS:w3c jquery--http://www.w3school.com.cn/jquery/


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章