JavaScript筆記

2019-11-06 06:22:06

字體：大中小

來源：轉載

供稿：網友

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

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

下一篇：JavaScript 運算對象Math