整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
了執(zhí)行Javascript，需要在HTML文件內(nèi)以特定的方式書(shū)寫(xiě)JavaScript的代碼，JavaScript的書(shū)寫(xiě)方法有多種，其執(zhí)行的流程也各不相同：
此種嵌入方法無(wú)法操作<script>之后的DOM元素。因?yàn)?lt;script>之后的DOM元素還未構(gòu)造，因此在<script>標(biāo)簽內(nèi)就無(wú)法取得位于其后的DOM元素。
此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行，async可以異步執(zhí)行。
此種嵌入方法在頁(yè)面讀取完后再對(duì)其執(zhí)行，所以可以對(duì)所有的DOM元素操作。
<body onload="alert('hello')">
window.onload = function(){alert('hello');};當(dāng)window.onload事件觸發(fā)時(shí)，頁(yè)面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。
//window.onload不能同時(shí)編寫(xiě)多個(gè)。
//以下代碼無(wú)法正確執(zhí)行，結(jié)果只輸出第二個(gè)。
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//$(document).ready()能同時(shí)編寫(xiě)多個(gè)
//結(jié)果兩次都輸出
$(document).ready(function(){
alert("Hello World");
});
$(document).ready(function(){
alert("Hello again");
}); window.onload和body中onload也有些許區(qū)別：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log("window.onload");}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}</script>
</head>
<body onload="console.log('bodyonload');">
<div id="div1">a</div>
</body>
</html>在IE10和FireFox下，結(jié)果為 ：
"DOMContentLoaded"
"bodyonload"
說(shuō)明body中的onload會(huì)覆蓋window.onload
在chrome下，結(jié)果為：
DOMContentLoaded
window.onload
bodyonload
然后，如果把javascript代碼移到最下面，結(jié)果又會(huì)是什么樣呢？
chrome和IE10、FireFox的結(jié)果竟然是一樣的：
DOMContentLoaded
window.onload
IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰(shuí)在下面就是誰(shuí)覆蓋誰(shuí)，只會(huì)執(zhí)行后面的那個(gè)。
onload方法可能需要等待時(shí)間，而本方法可以在完成HTML解析后發(fā)生的事件，減少等待時(shí)間。
在chrome、IE10和FireFox中，執(zhí)行結(jié)果是：DOMContentLoaded然后才是onload的輸出。所以說(shuō)一般情況下，DOMContentLoaded事件要在window.onload之前執(zhí)行，當(dāng)DOM樹(shù)構(gòu)建完成的時(shí)候就會(huì)執(zhí)行DOMContentLoaded事件。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="jquery2.js"></script>
<script language="javascript">
window.onload = haha;
function haha(){console.log(document.getElementById("div1"));}
if(document.addEventListener){
function DOMContentLoaded(){
console.log("DOMContentLoaded");
}
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
}
</script>
</head>
<body>
<div id="div1">a</div>
</body>
</html>如果你是個(gè)jQuery使用者，你可能會(huì)經(jīng)常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件
5.1 使用原生js方法
動(dòng)態(tài)創(chuàng)建script標(biāo)簽，并指定script的src屬性
function loadJs(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (typeof(callback) != "undefined") {
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
}
script.src = url;
document.body.appendChild(script);
}
loadJs("test.js", function() {
alert('done');
});還可以使用同樣的原理動(dòng)態(tài)加載css文件，只不過(guò)插入的的父節(jié)點(diǎn)是head標(biāo)簽。
5.2 使用document.write/writeln(）方式
該種方式可以實(shí)現(xiàn)js文件的動(dòng)態(tài)加載，原理就是在重寫(xiě)文檔流，這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面重繪。
document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");
需要注意的是特殊字符的轉(zhuǎn)義。
5.3 使用jQuery
使用getScript(url,callback)方法實(shí)現(xiàn)動(dòng)態(tài)加載js文件
$.getScript('test.js',function(){
alert('done');
});－End－
插入排序是將數(shù)組分為待排序和已排序兩個(gè)區(qū)間。依次從待排序區(qū)間中取出一項(xiàng)，用該項(xiàng)跟已排序區(qū)間項(xiàng)逐個(gè)對(duì)比，通過(guò)位移來(lái)實(shí)現(xiàn)插入到對(duì)應(yīng)位置的排序方式。插入排序平均時(shí)間復(fù)雜度是：O(n^2)
步驟是：
插入排序有多種實(shí)現(xiàn)方式，這里介紹常見(jiàn)的3種：
1、通用實(shí)現(xiàn)方式，自左往右遍歷待排序數(shù)組，再?gòu)漠?dāng)前的左側(cè)位置開(kāi)始自右往左循環(huán)已排序數(shù)組，再逐個(gè)比較和移動(dòng)被比較項(xiàng)，最后將當(dāng)前項(xiàng)填入到空缺位置上。
2、利用數(shù)組splice方法，類(lèi)似打撲克牌，先拿出要排序的牌，然后找準(zhǔn)位置插入。這種方式利用了原生API，減少了數(shù)組反復(fù)移動(dòng)位置的操作。性能上之前差不多。
3、新建數(shù)組法與splice結(jié)合法，這種方式會(huì)多建立一個(gè)數(shù)組，也就會(huì)多占用一個(gè)空間，但理解起來(lái)最容易，也利用了JS語(yǔ)言的特性。
插入排序與冒泡、選擇都是比較簡(jiǎn)單好懂的排序方式，性能上也差不多。插入排序通俗來(lái)講就像打撲克牌排序，你抓了一手牌之后。假如是：2、1、5、3、4，你會(huì)：
1、先把牌分成兩組，假定左側(cè)第一張牌為一組(標(biāo)識(shí)A，這時(shí)只有2)，其他牌為另外一組(標(biāo)識(shí)B，包括1、5、3、4)。
2、從B組里面從左起選擇第一張牌（位置空出等待填充），也就是1，拿這張牌與A組里面從右往左挨個(gè)對(duì)比，當(dāng)遇到比這張牌還小時(shí)就在這個(gè)位置停留下來(lái)(如果A組全部比這張牌都大那就在A組最前面停留下來(lái)，如果A組里沒(méi)有比這張牌大的就在當(dāng)前位置停留)。
3、然后將A組里比這張牌(也就是1)大的牌逐個(gè)往右移動(dòng)1位，原B組空出位置被填充，此時(shí)剛才停留的位置空出，將1這張牌插入在這里。這時(shí)候A組增加一個(gè)數(shù)字，變?yōu)椋?、2，B組減少1個(gè)，變?yōu)椋?、3、4。
4、移動(dòng)指針，繼續(xù)指向B組的第一個(gè)，也就是5。用5這張牌重復(fù)第二部，即拿5去跟A組自右往左逐個(gè)比較，然后插入到A組。此時(shí)A組：1、2、5，B組：3、4。
5、將B組里數(shù)字按照第二部重復(fù)操作，直到B組為空時(shí)整個(gè)循環(huán)結(jié)束。此時(shí)A組為：1、2、3、4、5。
HTML 使用超級(jí)鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎可以在所有的網(wǎng)頁(yè)中找到鏈接。點(diǎn)擊鏈接可以從一張頁(yè)面跳轉(zhuǎn)到另一張頁(yè)面。
HTML 鏈接
如何在HTML文檔中創(chuàng)建鏈接。
(可以在本頁(yè)底端找到更多實(shí)例)
HTML 超鏈接（鏈接）
HTML使用標(biāo)簽 <a>來(lái)設(shè)置超文本鏈接。
超鏈接可以是一個(gè)字，一個(gè)詞，或者一組詞，也可以是一幅圖像，您可以點(diǎn)擊這些內(nèi)容來(lái)跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個(gè)部分。
當(dāng)您把鼠標(biāo)指針移動(dòng)到網(wǎng)頁(yè)中的某個(gè)鏈接上時(shí)，箭頭會(huì)變?yōu)橐恢恍∈帧?/p>
在標(biāo)簽<a> 中使用了href屬性來(lái)描述鏈接的地址。
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：
一個(gè)未訪問(wèn)過(guò)的鏈接顯示為藍(lán)色字體并帶有下劃線(xiàn)。
訪問(wèn)過(guò)的鏈接顯示為紫色并帶有下劃線(xiàn)。
點(diǎn)擊鏈接時(shí)，鏈接顯示為紅色并帶有下劃線(xiàn)。
注意：如果為這些超鏈接設(shè)置了 CSS 樣式，展示樣式會(huì)根據(jù) CSS 的設(shè)定而顯示。
HTML 鏈接語(yǔ)法
鏈接的 HTML 代碼很簡(jiǎn)單。它類(lèi)似這樣：:
<a href="url">鏈接文本</a>
href 屬性描述了鏈接的目標(biāo)。.
實(shí)例
<a >訪問(wèn)菜鳥(niǎo)教程</a>
上面這行代碼顯示為：: 訪問(wèn)菜鳥(niǎo)教程
點(diǎn)擊這個(gè)超鏈接會(huì)把用戶(hù)帶到菜鳥(niǎo)教程的首頁(yè)。
提示: "鏈接文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為鏈接。
HTML 鏈接 - target 屬性
使用 target 屬性，你可以定義被鏈接的文檔在何處顯示。
下面的這行會(huì)在新窗口打開(kāi)文檔：
實(shí)例
<a>訪問(wèn)菜鳥(niǎo)教程!</a>
HTML 鏈接- id 屬性
id屬性可用于創(chuàng)建在一個(gè)HTML文檔書(shū)簽標(biāo)記。
提示: 書(shū)簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對(duì)于讀者來(lái)說(shuō)是隱藏的。
實(shí)例
在HTML文檔中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文檔中創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a href="#tips">訪問(wèn)有用的提示部分</a>
或者，從另一個(gè)頁(yè)面創(chuàng)建一個(gè)鏈接到"有用的提示部分(id="tips"）"：
<a >
訪問(wèn)有用的提示部分</a>
基本的注意事項(xiàng) - 有用的提示
注釋?zhuān)?/strong> 請(qǐng)始終將正斜杠添加到子文件夾。假如這樣書(shū)寫(xiě)鏈接：，就會(huì)向服務(wù)器產(chǎn)生兩次 HTTP 請(qǐng)求。這是因?yàn)榉?wù)器會(huì)添加正斜杠到這個(gè)地址，然后創(chuàng)建一個(gè)新的請(qǐng)求，就像這樣：。
圖片鏈接
如何使用圖片鏈接。
在當(dāng)前頁(yè)面鏈接到指定位置
如何使用書(shū)簽
跳出框架
本例演示如何跳出框架，假如你的頁(yè)面被固定在框架之內(nèi)。
創(chuàng)建電子郵件鏈接
本例演示如何如何鏈接到一個(gè)郵件。（本例在安裝郵件客戶(hù)端程序后才能工作。）
建電子郵件鏈接 2
本例演示更加復(fù)雜的郵件鏈接。
HTML 鏈接標(biāo)簽
| 標(biāo)簽 | 描述 |
|---|---|
| <a> | 定義一個(gè)超級(jí)鏈接 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
