jQuery - 添加元素

過 jQuery，可以很容易地添加新元素/內(nèi)容。

添加新的 HTML 內(nèi)容

我們將學(xué)習(xí)用于添加新內(nèi)容的四個 jQuery 方法：

append() - 在被選元素的結(jié)尾插入內(nèi)容
prepend() - 在被選元素的開頭插入內(nèi)容
after() - 在被選元素之后插入內(nèi)容
before() - 在被選元素之前插入內(nèi)容

jQuery append() 方法

jQuery append() 方法在被選元素的結(jié)尾插入內(nèi)容。

實例

$("p").append("追加文本");

jQuery prepend() 方法

jQuery prepend() 方法在被選元素的開頭插入內(nèi)容。

實例

$("p").prepend("在開頭追加文本");

通過 append() 和 prepend() 方法添加若干新元素

在上面的例子中，我們只在被選元素的開頭/結(jié)尾插入文本/HTML。

不過，append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。可以通過 jQuery 來生成文本/HTML（就像上面的例子那樣），或者通過 JavaScript 代碼和 DOM 元素。

在下面的例子中，我們創(chuàng)建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 append() 方法把這些新元素追加到文本中（對 prepend() 同樣有效）：

實例

functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標(biāo)簽創(chuàng)建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}

jQuery after() 和 before() 方法

jQuery after() 方法在被選元素之后插入內(nèi)容。

jQuery before() 方法在被選元素之前插入內(nèi)容。

實例

$("img").after("在后面添加文本"); $("img").before("在前面添加文本");

通過 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。

在下面的例子中，我們創(chuàng)建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。然后我們通過 after() 方法把這些新元素插到文本中（對 before() 同樣有效）：

實例

functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素vartxt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現(xiàn)延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實當(dāng)中，延遲腳本并不一定會按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實現(xiàn)會忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會在頁面 load 事件前執(zhí)行。不能保證腳本會按順序執(zhí)行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點：不能控制加載的順序

3、動態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網(wǎng)頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

s插件jquery可以很方便的對HTML的元素進(jìn)行操作，比如一些元素的顯示與隱藏，一些元素的動態(tài)效果等，今天就說一說通過jquery獲取DIV元素的CSS屬性，以及設(shè)置DIV元素的CSS屬性的方法。

jquery獲取DIV元素的CSS屬性值

jq獲取DIV元素的屬性值，可以使用css()方法

例：利用jquery獲取DIV元素的寬

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <style>
 #mochu{
 margin: 10px;
 padding: 10px;
 color: red;
 height: 30px;
 width: 40px;
 }
 </style>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 var h = $('#mochu').css('width');
 console.log(h);
 </script>
</body>
</html>

打印結(jié)果：

40px

例：利用jquery獲取DIV元素的高

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 var h = $('#mochu').css('height');
 console.log(h);
 </script>
</body>
</html>

打印結(jié)果：

42px

注意：

1、如果給DIV元素定義了CSS屬性的值，則直接輸出定義的CSS值

2、如果未定義DIV元素的CSS屬性值，則輸出瀏覽器渲染后DIV的默認(rèn)值

利用jquery設(shè)置DIV元素的值

在JQ中可以通過CSS方法獲取DIV元素的CSS屬性值，也可以設(shè)置或改變元素的CSS屬性值

例：利用jq改變字體的顏色

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 $('#mochu').css('color','red');
 </script>
</body>
</html>

結(jié)果如圖：

注：改變DIV中字體的顏色其實就是給這個DIV加入了一個 color 的CSS屬性，并把屬性值設(shè)置成 red（紅色）

在瀏覽器中查看元素就可以發(fā)現(xiàn)加入的CSS屬性

例：給DIV元素加入多個CSS屬性

<!DOCTYPE html>
<html>
<head>
 <title>Document</title>
 <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
 <div id="mochu">飛鳥慕魚博客<br/>http://www.feiniaomy.com</div>
 <script>
 $('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
 </script>
</body>
</html>

在瀏覽器中審核元素，如下圖

可以發(fā)現(xiàn)，對過JQ設(shè)置的CSS屬性都寫到了DIV上

注意：利用JQ的CSS()方法設(shè)置或添加多個CSS屬性的時候，要以{'':'','':''}這種數(shù)據(jù)格式寫入。

在線咨詢

上一篇：HTML中的特殊符號你了解幾個？百分之九十五的人不知道！
下一篇：PHP哈希表碰撞攻擊原理

您的項目需求

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

整合營銷服務(wù)商