在B/S結構客戶端越來越“胖”的今天,作為一名全端程序員,您很可能會在前端操作html字符串,注意,是操作html字符串,不是操作當前頁面的html。
舉個例子,百度推出的在線HTML富文本編輯器Ueditor,可以在線制作富文本文檔,功能堪比精簡版的Microsoft Word。雖然Ueditor身披百度的光環,但實際效果不太讓人滿意,我們需要二次處理一下它生成的html字符串,比如把所有圖片的寬度設成90%。
通過某個方法,我們可以拿到文本編輯器中的html字符串,假設字符串如下:
復制代碼代碼如下:
<p>花一樣的騷年</p>
<img src="./saonian.png" style="border-left-color: rgb(0, 153, 204); border-left-width: 1px; border-left-style: solid; padding: 0px 3px; margin: 3px auto 0px; width: 640px; background-color: rgb(242, 246, 251); clear: both; border-top-color: rgb(0, 153, 204); border-top-width: 1px; border-top-style: solid; border-right-color: rgb(0, 153, 204); border-right-width: 1px; border-right-style: solid;"> 復制代碼代碼如下:
//定義容器,方便獲取修改后的html字符串
//直接用jQuery包裝"<div></div>",此時在內存中就有了一個div元素
var $container = $("<div></div>");
//假設這是需要修改的html字符串
var html = "<img style='width: 50%;' src='./test.jpg' >";
//直接將要修改的html字符串插入到容器中
//jQuery強大到自動將html字符串包裝成dom元素,然后插入到內存中的div容器中
$container.append(html);
//在容器中搜索所有的img標簽,并遍歷
$container.find("img").each(function(i,n){
//對于每一個img元素,直接修改其style屬性中的width屬性
//如果style屬性沒有,自動添加;如果已經有width屬性,直接修改;完全不用過多操心
$(n).css({
width: "90%"
});
});
//獲取修改后的html字符串,即容器的html內容
alert($container.html());
代碼中注釋很詳細,小菜就不多解釋啦,我們要明白,jQuery不僅僅可以操作實實在在的頁面中的html,也可以操作內存中的虛擬html。
通過兩者對比,相信讀者立即可以體會到哪個方法更好一些。
正如小菜經常說的一句話:如果你認為一個問題可以解決,但用了很長時間仍然沒有解決,很可能是你的思路錯了,換個角度想一想,問題迎刃而解!