Jquery中的text()和html()的基本用法與區(qū)別

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> New Document </title>
 <meta name="Generator" content="EditPlus">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.7.js"></script>
 <script type="text/javascript">
 <!--
	 function f1()
	 {
	 //text方法 只獲取標簽中的文本內(nèi)容
		 alert($("#myDiv").text());
	 }
	 function f2()
	 {
	 //html方法 獲取指定標簽中的html標簽和內(nèi)容
		 alert($("#myDiv").html());
	 }
 //-->
 </script>
 </head>

 <body>
 <div id="myDiv" style="border:5px solid red; width:300px;height:300px;">
 <span style="color:blue; font-size:35px">大家好 我是div<span>
</div>
<input type="button" value="text()" onclick="f1()">
<input type="button" value="html()" onclick="f2()">
 </body>
</html>

紹

VvvebJs是一個開源的網(wǎng)頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網(wǎng)頁樣式，內(nèi)置jquery和Bootstrap，你可以拖拽相關(guān)的組件進行網(wǎng)頁的構(gòu)建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網(wǎng)頁設(shè)計，需要的朋友不可錯過！

Github地址

https://github.com/givanz/VvvebJs

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化編輯器，調(diào)用Vvveb.Builder.init。第一個參數(shù)是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數(shù)是頁面加載完成時調(diào)用的函數(shù)，默認情況下調(diào)用編輯器Gui.init();

結(jié)構(gòu)

Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側(cè)面板中對組件進行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/video"];

Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網(wǎng)格行等。例如，TextInput擴展Input對象并定義為：

var TextInput = $.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

輸入還需要一個在編輯器html（在editor.html中）定義為<script>標簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助瀏覽器翻譯工具，對官網(wǎng)的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關(guān)文檔！

設(shè)計界面預(yù)覽

總結(jié)

VvvebJs是一個非常強大的網(wǎng)頁可視化生成構(gòu)建工具，讓不懂網(wǎng)頁設(shè)計的小伙伴們也能夠通過拖拽來生成美觀大方的網(wǎng)頁出來，讓設(shè)計網(wǎng)頁就像設(shè)計圖片一樣，VvvebJs特別適合展示型網(wǎng)頁，甚至可以不需要代碼就能完成一項復(fù)雜的網(wǎng)頁設(shè)計，總體來說，VvvebJs是一個值得嘗試的工具！

開發(fā)過程中，jQuery.html() 是獲取當前節(jié)點下的html代碼，并不包含當前節(jié)點本身的代碼，然后我們有時候確需要，找遍jQuery api文檔也沒有任何方法可以拿到。

看到有的人通過parent().html()，如果當前元素沒有兄弟元素還行，如果有那就行不通了。后臺實驗發(fā)現(xiàn)有一個jQuery的一個方法可以解決，而且非常簡便，如下：

jQuery.prop("outerHTML");

<div class="test"><p>hello，你好！</p></div>
<script>$(".test").prop("outerHTML");</script>

輸出結(jié)果為：<div class="test"><P>hello,你好！</p></div>

因為原生JS DOM里有一個內(nèi)置屬性 outerHTML （看清大小寫哦，JS是區(qū)分大小寫的）用來獲取當前節(jié)點的html代碼(包含當前節(jié)點)，所以用jQuery的prop()能拿到，經(jīng)過實驗attr()方法是拿不到的，不信的話，大家也可以嘗試嘗試，謝謝。

當然也有人用jQuery的 clone() 函數(shù)配合append() 來創(chuàng)建一個只有一個子元素的節(jié)點，然后來拿節(jié)點的html，這樣也是可行的，但是代碼繁瑣。

在線咨詢

上一篇：肖sir_html之A鏈接標簽認識（2）
下一篇：網(wǎng)頁中如何實現(xiàn)圖片的展示，自己圖片大小的修改#html

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商