15 Days of jQuery(Day 5)--懶人用Jquery生成的HTML
這個讓我們輕松的紀念日已經到來–我恨我在計算機前已經花了48個小時，我希望能夠有另外一個jQuery來結束我的噩夢，并且讓我上網更快。
當我一邊“在用Jquery方法編寫”和一邊“進行復雜的文件上傳”，我已經筋疲力盡。然而這兩種操作的代碼是一種較淺的，它只不過是你才剛剛開始解決的一些簡單問題。
所以下來我開始介紹：
盡管我在我的網站用所有的CSS樣式表去進行表格設計（也許這要花費兩年半的時間或者更多），我已經用了很多我能找到的在這方面的信息。回到2004年5月(古代史)A list a part有一篇《關于創建陰影的偉大教程(洋蔥皮投影)》可以應用到任何圖片,無論尺寸多大.
那片文章的應經不能再評論了,但還是有些人希望能夠再出篇教程.
問題
一些css工程師用一些”不相干”的標記,就是為了使背景圖片能夠應用到每一個元素上.例如:
這里是A list a part用到的代碼:
<div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="object.gif" alt="The object casting a shadow" /> </div> </div> </div>
所有這些divs充當一個給圖片添加投影效果的”鉤子”.這不見得好,我們可以把源代碼精簡成這樣:
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
按著這個思路…
目標
在這里,我要想你展示如何用jQuery輕而易舉的將多于的標記從你的源代碼中剔除.運用這個方法,讓你的代碼更加干凈(更重要的是)將使以后變換布局容易的多.
解
這里,看看jQuery是如何擊退這個問題的.
$(document).ready(function(){ $("img.dropshadow") .wrap("<div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div>"); });
圖片就可以保持這樣了:
<img src="object.gif" class="dropshadow" alt="The object casting a shadow" />
仔細看看
$(document).ready() 是jQuery版的window.onload()
$(“img.dropshadow”) 告訴jQuery找到帶有class=“dropshadow”的圖片,如果你想用一個id你可以這樣: $(“img#dropshadow”)wrap() (wrap() tells jQuery to use the DOM (Document Object Method Model) to wrap the images with the class=”dropshadow” in the html inside the parenthesis. )
最后的結果
傻乎乎的圖片,但是和original Onion Skinned Drop Shadows用的是一樣的.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Onion Skin DropShadwo with jQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> .wrap0, .wrap1, .wrap2, .wrap3 { display:inline-table; /* \*/display:block;/**/ } .wrap0 { float:left; background:url(shadow.gif) right bottom no-repeat; } .wrap1 { background:url(shadow180.gif) no-repeat; } .wrap2 { background:url(corner_bl.gif) -18px 100% no-repeat; } .wrap3 { padding:10px 14px 14px 10px; background:url(corner_tr.gif) 100% -18px no-repeat; } body { background: #fff;} </style> <script src="jquery.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("img.dropshadow") .wrap("<div class='wrap0'><div class='wrap1'><div class='wrap2'>" + "<div class='wrap3'></div></div></div></div>"); }); </script> </head> <body> <h1>Onion Skinned - With jQuery</h1> <p>First, the old-school, multiple divs hard coded into the html as seen on the <a href="http:/ /www.ploughdeep.com/onionskin/360.html">orignial article</a>:</p> <div class="wrap0"> <div class="wrap1"> <div class="wrap2"> <div class="wrap3"> <img src="ball.jpg" alt="The object casting a shadow" /> </div> </div> </div> </div> <p style="clear:both;">And now, the jQuery method, which uses javascript to wrap the image at runtime:</p> <img src="ball.jpg" class = "dropshadow" alt="The object casting a shadow" /> <p>View the source of this page and you'll see the huge difference in markup!</p> </body> </html>
jQuery和其它解決方法的比較
jQuery的網站上有一個到Ajaxian網站的鏈接,那里有用另外一個javascrip庫創建的Onion Skin Drop Shadow ,我相信他的代碼復雜程度和代碼量現在看來自不待言.我寧愿使用jQuery.(怎么?你猜到了..)
平心而論,沒有一個庫是對于每一個工作或每一段代碼都是合適的.本教程不是為了證明jQuery是一切javascrip類庫中的老大. 試試Prototype, Scriptaculous, YUI, Rico, Behaviour, Moo.fx 和 the dozens 或者其它的.如果你找到了一個你用起來比較順手的,那就去用它吧.
jQuery對于我來說只是一個工具.我只是希望這個教程能夠提供給你更多使用它的方法.
有關jQuery的工具
jQuery用難以置信的簡單來操作DOM. 你應該花些時間看看jQuery能用來做什么,用下append(), prepend(), before(), after(), html(), and remove().
來自jQuery Docs
wrap(String html)
把所有匹配的元素用其他元素的結構化標記包裝起來。這種包裝對于在文檔中插入額外的結構化標記最有用，而且它不會破壞原始文檔的語義品質。
這個函數的原理是檢查提供的第一個元素（它是由所提供的HTML標記代碼動態生成的），并在它的代碼結構中找到最上層的祖先元素－－這個祖先元素就是包裝元素。
當HTML標記代碼中的元素包含文本時無法使用這個函數。因此，如果要添加文本應該在包裝完成之后再行添加。
示例:
$("p").wrap("<div class='wrap'></div>");
HTML
<p>Test Paragraph.</p>
結果
<div class='wrap'><p>Test Paragraph.</p></div>
留言列表
