JavaScript筆記

2019-11-06 06:22:06

字體：大中小

供稿：網(wǎng)友

插入JS:<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html"; charset=gb18030"><title>插入JS代碼</title><script type="text/javascript">document.write("開(kāi)啟JS之旅！")；</script></head></html>可以把html文件和js代碼分開(kāi)，單獨(dú)創(chuàng)建一個(gè)js文件保存js代碼。引用js代碼： <script src="one.js"></script>例：one.js文件：alert("JS代碼");js文件不能直接運(yùn)行，需要嵌入到html文件中執(zhí)行。我們可以將Javascript代碼放在html文件的任何位置，但一般放在head或者body部分；放在<head>部分：瀏覽器解析head部分就會(huì)執(zhí)行這個(gè)代碼，然后才解析頁(yè)面其余元素放在<body>部分：JavaScript代碼在網(wǎng)頁(yè)讀取到該語(yǔ)句的時(shí)候就會(huì)執(zhí)行注意：進(jìn)行頁(yè)面顯示初始化的js必須放在head里，因?yàn)槌跏蓟家筇崆斑M(jìn)行。如果是通過(guò)實(shí)踐調(diào)用執(zhí)行function那么對(duì)位置沒(méi)有要求。一行的結(jié)束就被認(rèn)定為語(yǔ)句的結(jié)束，通常在后面加上分號(hào)。單行注釋?zhuān)?在內(nèi)容前加//多行注釋?zhuān)?以/* 開(kāi)始，以*/結(jié)束定義變量使用關(guān)鍵字var，變量必須以字母，下劃線(xiàn)或美元符號(hào)開(kāi)始。變量要先聲明再賦值。定義函數(shù)： function 函數(shù)名(){函數(shù)代碼；}函數(shù)的調(diào)用：直接寫(xiě)函數(shù)名即可。JavaScript輸出內(nèi)容：document.write("內(nèi)容"+變量名);輸出多項(xiàng)內(nèi)容，內(nèi)容之間可用+號(hào)連接。JavaScript警告：（alter消息會(huì)話(huà)框）alter（字符串或變量） JavaScript確認(rèn)（confirm消息對(duì)話(huà)框）：語(yǔ)法：confirm(str);參數(shù)說(shuō) str:在消息會(huì)話(huà)框中要顯示的文本返回值：Boolean值,當(dāng)點(diǎn)擊確定時(shí)返回true，當(dāng)點(diǎn)擊取消時(shí)返回false.例：<script type="text/javascript">var mymessage=connfirm("你喜歡JavaScript嗎?");if(mymessage==true){document.write("很好，加油！");}else{document.write("js功能強(qiáng)大，要學(xué)習(xí)！");}</script>javascript提問(wèn)（PRompt消息對(duì)話(huà)框）prompt彈出消息對(duì)話(huà)框通常用于詢(xún)問(wèn)一些需要與用戶(hù)交互的信息。語(yǔ)法：prompt(str1,str2);str1表要顯示在消息對(duì)話(huà)框中的文本，不可修改str2表文本框中的內(nèi)容，可修改javascript打開(kāi)新窗口（window.open）語(yǔ)法：window.open([URL],[窗口名稱(chēng)],[參數(shù)字符串])；JavaScript關(guān)閉窗口（window.close）語(yǔ)法：window.close();//關(guān)閉本窗口或窗口對(duì)象.close();//關(guān)閉指定窗口文檔對(duì)象模型DOM(document object model)定義訪(fǎng)問(wèn)和處理html文檔的標(biāo)準(zhǔn)方法。DOM將html文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）通過(guò)ID獲取元素： document.getElementById("id");innerHTML：該屬性用于獲取或替換HTML元素的內(nèi)容語(yǔ)法：Object,.innerHTML改變HTML樣式：語(yǔ)法 Object.style.property=new style;屬性property：backgroundColor、height、width、color、font、fontsize等。Object為獲取的元素對(duì)象顯示和隱藏（display屬性)： Object.sytle.display=value;value取值：none 隱藏block 顯示控制類(lèi)名（className屬性)：設(shè)置或返回元素的class屬性語(yǔ)法：object.className=className;創(chuàng)建數(shù)組： var myarr=new Array();//創(chuàng)建一個(gè)空的數(shù)組或 var myarr=[10,0,50,60];或var myarr=new Array(50,40,20);//創(chuàng)建數(shù)組并賦值數(shù)組屬性：length 語(yǔ)法：myarr.length;//獲取數(shù)組的長(zhǎng)度二維數(shù)組：var myarr=new Array(); for(var i=0;i<2;i++){myarr[i]=new Array();//先聲明一維，再聲明二維for(var j=0;j<3;j++){myarr[i][j]=i+j;//賦值}Switch語(yǔ)句：switch（表達(dá)式){case值1：執(zhí)行代碼塊1break；case值2：執(zhí)行代碼塊2break；。。。。。default：不同時(shí)執(zhí)行的代碼 }繼續(xù)循環(huán)（continue）：continue的作用是僅僅跳過(guò)本次循環(huán)，而整個(gè)循環(huán)體繼續(xù)執(zhí)行語(yǔ)句結(jié)構(gòu)： for(.....){if(特殊情況){continue;}循環(huán)代碼；}JavaScript事件：onclick 鼠標(biāo)單擊事件onmouSEOver 鼠標(biāo)經(jīng)過(guò)事件onmouserout 鼠標(biāo)移開(kāi)事件onchange 文本框內(nèi)容改變事件onselect 文本框內(nèi)容被選中事件onfocus 光標(biāo)聚集onblur 光標(biāo)離開(kāi)onload 網(wǎng)頁(yè)導(dǎo)入onunload 關(guān)閉網(wǎng)頁(yè)什么是對(duì)象：JavaScript中所有事物都是對(duì)象，如字符串、數(shù)組、數(shù)值、函數(shù)等，每個(gè)對(duì)象都帶有屬性和方法。對(duì)象的屬性：反映該對(duì)象某些特定的性質(zhì)的，如字符串長(zhǎng)度，圖像的長(zhǎng)度等。對(duì)象的方法：能夠在對(duì)象上執(zhí)行的動(dòng)作，如表單的提交submit、時(shí)間的獲取getYear等var objectName=new Array();//使用new關(guān)鍵字定義對(duì)象或者 var objectName=[];訪(fǎng)問(wèn)對(duì)象屬性的語(yǔ)法：objectName.propertyName;訪(fǎng)問(wèn)對(duì)象的方法：objectName.methodName();Date日期對(duì)象：定義一個(gè)時(shí)間對(duì)象：var udate=nw Date();//當(dāng)前電腦系統(tǒng)時(shí)間var d=new Date(2012,10,1);//2012年10月1日或var d=new Date('Oct 1,2012')；訪(fǎng)問(wèn)方法：日期對(duì)象.方法名；Date對(duì)象中處理時(shí)間和日期的常用方法：get/setDate()//返回/設(shè)置日期get/setFullYear() //返回/設(shè)置年份get/setMonth()get/setHours()get/setMinutes()get/setSeconds()get/setTime()例：var mydate=new Date();document.write(mydate+"<br>");//輸出當(dāng)前時(shí)間document.write(mydate.getFullYear()+"<br>");//輸出當(dāng)前年份mydate.setFullYear(1981);//設(shè)置年份返回星期方法：getDay(),返回的是0-6的數(shù)字，0表示星期日。var mydate=new Date();var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var mynum=mydate.getDay();document.write(mydate.getDate());//輸出getDate()獲取值document.write("今天是"+weekday[mynum]);//輸出星期幾String字符串對(duì)象：var mystr="i love javascript";訪(fǎng)問(wèn)字符串對(duì)象的屬性length: stringObject.length;//返回字符串的長(zhǎng)度將小寫(xiě)轉(zhuǎn)換成大寫(xiě)： stringObjectName.toUpperCase();返回指定位置的字符：charAt();語(yǔ)法：stringObjectName.charAt(index);返回指定字符串首次出現(xiàn)的位置： stringObjectName.indexOf(substring,startpos);參數(shù)：substring:規(guī)定需檢索的字符串值startpos:規(guī)定字符串中開(kāi)始檢索的位置字符串分割：split(); 語(yǔ)法：stringObject.split(separator,limit);參數(shù)：separator：從該參數(shù)指定的地方分割limit:分割的次數(shù)提取字符串substirng();語(yǔ)法：stringObject.substring(startpos,stoppos);參數(shù)：starpos:開(kāi)始位置 stoppos:結(jié)束位置提取指定數(shù)目的字符substr()語(yǔ)法：stringObject.substr(startpos,length);參數(shù)：startpos:提取的字符串起始位置length：提取字符串的長(zhǎng)度Math對(duì)象：Math對(duì)象屬性： E //返回算術(shù)常量e(約等于2.718) LN2 //返回2的自然對(duì)數(shù)（約等于0.693） LN10 //返回10的自然對(duì)數(shù)（約等于2.302） PI //圓周率（3.14159） Math對(duì)象方法： abs(x) //返回?cái)?shù)的絕對(duì)值acos(x) //返回?cái)?shù)的反余弦值exp(x) //返回e的指數(shù)floor(x) //對(duì)數(shù)進(jìn)行向下取整max(x,y) //取最大round(x) //四舍五入pow(x,y) //返回x的y次冪sqrt(x) //平方根random() //0-1之間的隨機(jī)數(shù)ceil(x) //向上取整數(shù)組連接concat():用于連接兩個(gè)或多個(gè)數(shù)組指定分隔符連接數(shù)組元素join(): arrayObject.join(分隔符)；顛倒數(shù)組元素順序reverse()選定元素slice() ; arrayObject.slice(start,end);數(shù)組排序：sort()window對(duì)象：window對(duì)象是BOM的核心，window對(duì)象指當(dāng)前的瀏覽器窗口window對(duì)象方法：alert() 顯示警告框prompt（）顯示可提示輸入對(duì)話(huà)框confirm() 確認(rèn)對(duì)話(huà)框open（）打開(kāi)一個(gè)新的窗口close（）關(guān)閉瀏覽器窗口print（）打印當(dāng)前窗口內(nèi)容。。。JavaScript計(jì)時(shí)器：計(jì)時(shí)器方法；setTimeout() //指定的延遲時(shí)間之后來(lái)執(zhí)行的代碼claerTimeout() //取消setTimeout設(shè)置setInterval() //每隔指定時(shí)間執(zhí)行代碼clearInterval() //取消setInterval設(shè)置例：設(shè)置一個(gè)計(jì)時(shí)器，每隔100秒調(diào)用clock()函數(shù)；<script type="text/javascript">var int=setInterval(clock,100);function clock(){var time=new Date();document.getElementById("clock").value=time;}</script><form><input type="text" id="clock" size="50" /></form>History對(duì)象：history對(duì)象記錄了用戶(hù)曾經(jīng)瀏覽過(guò)的頁(yè)面URL，并可以實(shí)現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。語(yǔ)法： window.history.[屬性|方法]history對(duì)象屬性： length 返回瀏覽器歷史列表中的URL數(shù)量history對(duì)象方法: back() 加載history列表中的前一個(gè)URLforward() 加載history列表中的下一個(gè)URLgo() 加載history列表中的某個(gè)集體的頁(yè)面 Location對(duì)象：location對(duì)象用于獲取或設(shè)置窗體的URL，并且可以用于解析URL語(yǔ)法：location.[屬性|方法]location對(duì)象屬性：hash 設(shè)置或返回從井號(hào)#開(kāi)始的URL host 設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號(hào) hostname 設(shè)置或返回當(dāng)前URL的主機(jī)名 href 設(shè)置或返回完整的URL port 設(shè)置或返回當(dāng)前URL的端口號(hào) location對(duì)象的方法；assign() 加載新的文檔reload（）重新加載當(dāng)前文檔replace（）用新的文檔替換當(dāng)前文檔Navigator對(duì)象：Navigator對(duì)象包含有關(guān)瀏覽器的信息，通常用于檢測(cè)瀏覽器與操作系統(tǒng)的版本。對(duì)象屬性：appCodeName 瀏覽器膽碼名的字符串表示 appName 返回瀏覽器的名 appVersion 返回瀏覽器的平臺(tái)和版本信息 platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái) userAgent 返回由客戶(hù)機(jī)發(fā)送服務(wù)器的user-agent頭部的值 screen對(duì)象：screen對(duì)象用于獲取用戶(hù)的屏幕信息語(yǔ)法：window.screen.屬性對(duì)象屬性：availHeight 窗口可使用的屏幕高度 availWidth 窗口可使用的寬度 colorDepth 顏色位數(shù) height 屏幕高度 whdth 屏幕寬度獲取屏幕的可用高度和寬度：<script type="text/javascript">document.write("可用寬度"+screen.availWidth);document.write("可用高度"+screen.availHeight);/</script>DOM對(duì)象，控制HTML元素：文檔對(duì)象模型DOM(document Object Model)定義訪(fǎng)問(wèn)和處理HTML的標(biāo)準(zhǔn)方法。DOM將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹(shù)結(jié)構(gòu)（節(jié)點(diǎn)樹(shù)）。<!DOCTYPE HTML><html><head><meta http-equiv="content-Type" content="text/html;charset=utf-8"/></head><body><h2><a href="http://www.baidu.com">javascript DOM</a></h2><p>對(duì)HTML元素進(jìn)行操作，可添加，改變或移除CSS樣式等</p><ul><li>JavaScript</li><li>DOM</li><li>CSS</li></ul></body></html>HTML文檔可以說(shuō)是由節(jié)點(diǎn)構(gòu)成的集合，DOM節(jié)點(diǎn)有：1.元素節(jié)點(diǎn)：上述<html> <body> <p>等都是元素節(jié)點(diǎn)，即標(biāo)簽。2.文本節(jié)點(diǎn)：向用戶(hù)展示的內(nèi)容，如<li> 中的JavaScript，DOM,CSS等文本3.屬性節(jié)點(diǎn)：元素的屬性，如<a>標(biāo)簽的鏈接屬性href。節(jié)點(diǎn)屬性：方法說(shuō)明nodeName 返回一個(gè)字符串，其內(nèi)容是給定節(jié)點(diǎn)的名字nodeType 返回一個(gè)整數(shù)，這個(gè)數(shù)值代表給定節(jié)點(diǎn)的類(lèi)型nodeValue 返回給定節(jié)點(diǎn)的當(dāng)前值遍歷節(jié)點(diǎn)樹(shù)：方法說(shuō)明childNode 返回一個(gè)數(shù)組，這個(gè)數(shù)組有給定的元素節(jié)點(diǎn)的子節(jié)點(diǎn)構(gòu)成、firstChild 返回第一個(gè)節(jié)點(diǎn)lastChild 返回最后一個(gè)子節(jié)點(diǎn)parentNode 返回一個(gè)給定節(jié)點(diǎn)的父節(jié)點(diǎn)nextSibling 返回給定節(jié)點(diǎn)的下一個(gè)子節(jié)點(diǎn)preiousSibling 返回給定節(jié)點(diǎn)的上一個(gè)子節(jié)點(diǎn)DOM操作：方法說(shuō)明createElement(element)創(chuàng)建一個(gè)新的元素節(jié)點(diǎn)createTextNode()創(chuàng)建一個(gè)包含給定文本的新文本節(jié)點(diǎn)appendChild() 指定節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)列表之后添加一個(gè)新的子節(jié)點(diǎn) insertBefore() 將一個(gè)給定節(jié)點(diǎn)插入到一個(gè)給定元素的給定子節(jié)點(diǎn)的前面removeChild() 從一個(gè)給定元素中刪除一個(gè)子節(jié)點(diǎn)replaceChild()把一個(gè)給定父元素里的一個(gè)子節(jié)點(diǎn)替換為另一個(gè)節(jié)點(diǎn)getElementByName()方法：返回帶有指定名稱(chēng)的節(jié)點(diǎn)對(duì)象的集合document.getElementByName(name)該方法返回的是元素的數(shù)組，而不是一個(gè)元素，有l(wèi)ength屬性。<script type="text/javascript">function getElements(){var x=document.getElementByName("alink");alert(x.length);}<body><a name="alink" href="#">我是鏈接一</a><br/><a name="alink" href="#">我是鏈接二</a><br/><a name="alink" href="#">我是鏈接三</a><br/><a name="alink" href="#">我是鏈接四</a><br/><input type="button" onclick="getElements()" value="幾個(gè)鏈接"/></body>getElementByTagName()方法：返回帶有指定標(biāo)簽的節(jié)點(diǎn)對(duì)象的集合。getElementByTagName(TagName);getAttribute()方法：通過(guò)元素節(jié)點(diǎn)的屬性名稱(chēng)獲取屬性的值。elementNode.getAttribute(name);1.elementNode:使用getElementById(),getElementByTagName()等方法獲取到的元素的節(jié)點(diǎn)。2.name:想要查詢(xún)得元素節(jié)點(diǎn)的屬性名稱(chēng)。setAttribute()方法：增加一個(gè)指定名稱(chēng)和值的新屬性，或者把一個(gè)現(xiàn)有的屬性設(shè)定為指定的值。elementNode.setAttribute(name,value);1.name:要設(shè)置的屬性名2.value：要設(shè)置的屬性值節(jié)點(diǎn)屬性：在文檔對(duì)象模型（DOM)中，每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象。DOM節(jié)點(diǎn)有三個(gè)重要的屬性：1.nodeName:節(jié)點(diǎn)的名稱(chēng)2.nodeValue:節(jié)點(diǎn)的值3.nodeType:節(jié)點(diǎn)的類(lèi)型一、nodeName屬性：節(jié)點(diǎn)的名稱(chēng)，就是只讀的。1.元素節(jié)點(diǎn)的nodeName與標(biāo)簽名相同2.屬性節(jié)點(diǎn)的nodeName是屬性的名稱(chēng)3.文本節(jié)點(diǎn)的nodeName永遠(yuǎn)是#text4.文檔節(jié)點(diǎn)的nodeName永遠(yuǎn)是#document二、nodeValue屬性：節(jié)點(diǎn)的值1.元素節(jié)點(diǎn)的nodeValue是undifined或null2.文本節(jié)點(diǎn)的nodeValue是文本自身3.屬性節(jié)點(diǎn)的nodeValue是屬性的值三、nodeType屬性：節(jié)點(diǎn)的類(lèi)型，是只讀的。一下常用的集中節(jié)點(diǎn)類(lèi)型：元素類(lèi)型節(jié)點(diǎn)類(lèi)型元素 1屬性 2文本 3注釋 8文檔 9

上一篇：【js】javascript中的原型prototype

下一篇：JavaScript 運(yùn)算對(duì)象Math