javascript學習筆記

時間 2019-11-10

原文原文鏈接

輸出：javascript

document.write("Hello World!")

DOM中添加標籤：html

document.write("<h1>Hello World!</h1>")

alert("彈窗提示 '\n' ")java

確認彈窗：node

var r=confirm("Press a button!");

if (r==true)

  {

  alert("You pressed OK!");

  }

else

  {

  alert("You pressed Cancel!");

  }

}

輸入框：web

var name=prompt("請輸入您的名字","this is hint");

循環遍歷數組：數組

var x

var mycars = new Array()

mycars[0] = "寶馬"

mycars[1] = "奔馳"

mycars[2] = "賓利"

 

for (x in mycars)

{

document.write(mycars[x] + "<br />")

}

異常處理：瀏覽器

try

   {

   adddlert("Welcome guest!")

   }

catch(err)

   {

   txt="本頁中存在錯誤。\n\n"

   txt+="錯誤描述：" + err.description + "\n\n"

   txt+="點擊「肯定」繼續。\n\n"

   alert(txt)

   }

Throw 聲明：cookie

try

{

if(x>10)

  throw "Err1"

else if(x<0)

  throw "Err2"

else if(isNaN(x))

  throw "Err3"

}

catch(er)

{

if(er=="Err1")

  alert("錯誤！該值太大！")

if(er == "Err2")

  alert("錯誤！該值過小！")

if(er == "Err3")

  alert("錯誤！該值不是數字！")

}

腳本錯誤事件：app

function handleErr(msg,url,l)

{

txt="本頁中存在錯誤。\n\n"

txt+="錯誤：" + msg + "\n"

txt+="URL: " + url + "\n"

txt+="行：" + l + "\n\n"

txt+="點擊「肯定」繼續。\n\n"

alert(txt)

return true

}

檢測瀏覽器信息：框架

var x = navigator;

document.write("CodeName=" + x.appCodeName);

document.write("<br />");

document.write("MinorVersion=" + x.appMinorVersion);

document.write("<br />");

document.write("Name=" + x.appName);

document.write("<br />");

document.write("Version=" + x.appVersion);

document.write("<br />");

document.write("CookieEnabled=" + x.cookieEnabled);

document.write("<br />");

document.write("CPUClass=" + x.cpuClass);

document.write("<br />");

document.write("OnLine=" + x.onLine);

document.write("<br />");

document.write("Platform=" + x.platform);

document.write("<br />");

document.write("UA=" + x.userAgent);

document.write("<br />");

document.write("BrowserLanguage=" + x.browserLanguage);

document.write("<br />");

document.write("SystemLanguage=" + x.systemLanguage);

document.write("<br />");

document.write("UserLanguage=" + x.userLanguage);

建立對象：

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname

this.lastname=lastname

this.age=age

this.eyecolor=eyecolor

}

查找特定字符串的位置indexOf()：

var str="Hello world!"

document.write(str.indexOf("Hello") + "<br />")

查找特定的字符串，若是存在則輸出obj.match（)：

var str="Hello world!"

document.write(str.match("world") + "<br />")

替換字符串中的字符：

var str="Visit Microsoft!"

document.write(str.replace(/Microsoft/,"W3School"))

JS Date對象實例：

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

Var day=today.getDay() //獲取的是星期幾

合併字符串：

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

 

document.write(arr.concat(arr2))

分割字符串：

var str = "2,2,3,4,5";

var strs = new Array();

 

strs = str.split(",");  //將str分割後放到strs[i]中

將數組轉換爲字符串：

var arr = new Array(3);

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

document.write(arr.join());

 

document.write("<br />");

 

document.write(arr.join(".")); //數組元素之間的間隔符號

排序：

arr.sort();  //對文字數組排序，a-z；

//對數字排序

function sortNumber(a, b)

{

return a - b; //從小到大的順序

}

document.write(arr.sort(sortNumber))

Math對象：

Math.round(x); //四捨五入

Math.random(); //取0-1之間的隨機數

node節點對象：

在文檔對象模型 (DOM) 中，每一個節點都是一個對象。DOM 節點有三個重要的屬性：

1. nodeName : 節點的名稱

2. nodeValue ：節點的值

3. nodeType ：節點的類型

1、nodeName 屬性: 節點的名稱，是隻讀的。

1. 元素節點的 nodeName 與標籤名相同

2. 屬性節點的 nodeName 是屬性的名稱

3. 文本節點的 nodeName 永遠是 #text

4. 文檔節點的 nodeName 永遠是 #document

2、nodeValue 屬性：節點的值

1. 元素節點的 nodeValue 是 undefined 或 null

2. 文本節點的 nodeValue 是文本自身

3. 屬性節點的 nodeValue 是屬性的值

3、nodeType 屬性: 節點的類型，是隻讀的。如下經常使用的幾種結點類型:

元素類型節點類型

元素 1

屬性 2

文本 3

註釋 8

文檔 9

插入節點：

插入節點appendChild()

在指定節點的最後一個子節點列表以後添加一個新的子節點。

語法:

appendChild(newnode)

參數:

newnode：指定追加的節點。

替換節點：

var newNode  = document.createElement("newNode");

var newNodeText = document.createElement("節點內容");

newNode.appendChild(newNodeText); //將內容添加到節點,obj.innerHTML

var oldNode = document.getElementById("oldNode");

oldNode.parentNode.replaceChild(newNode,oldNode);

計時器：

var t=setTimeout("javascript語句",毫秒)

 

clearTimeout(setTimeout_variable)

DOM對象屬性：

body	提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
cookie	設置或返回與當前文檔有關的全部 cookie。
domain	返回當前文檔的域名。
lastModified	返回文檔被最後修改的日期和時間。
referrer	返回載入當前文檔的文檔的 URL。
title	返回當前文檔的標題。
URL	返回當前文檔的 URL。

DOM對象方法：

close()	關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。
getElementById()	返回對擁有指定 id 的第一個對象的引用。
getElementsByName()	返回帶有指定名稱的對象集合。
getElementsByTagName()	返回帶有指定標籤名的對象集合。
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。
write()	向文檔寫 HTML 表達式或 JavaScript 代碼。
writeln()	等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。

Element對象屬性和方法：

內容有點多，沒看完，

getAttribute(須要獲取的值的屬性名);

innetHTML ;

previousSibling;

nextSibling;

nodeType;

nodeName;

nodeValue;

parentNode;

removeAttribute(屬性名);

setAttribute(屬性名，屬性值);

removeChild();

replaceChild(newNode,oldNode);

element.accessKey	設置或返回元素的快捷鍵。
element.appendChild()	向元素添加新的子節點，做爲最後一個子節點。
element.attributes	返回元素屬性的 NamedNodeMap。
element.childNodes	返回元素子節點的 NodeList。
element.className	設置或返回元素的 class 屬性。
element.clientHeight	返回元素的可見高度。
element.clientWidth	返回元素的可見寬度。
element.cloneNode()	克隆元素。
element.compareDocumentPosition()	比較兩個元素的文檔位置。
element.contentEditable	設置或返回元素的文本方向。
element.dir	設置或返回元素的文本方向。
element.firstChild	返回元素的首個子。
element.getAttribute()	返回元素節點的指定屬性值。
element.getAttributeNode()	返回指定的屬性節點。
element.getElementsByTagName()	返回擁有指定標籤名的全部子元素的集合。
element.getFeature()	返回實現了指定特性的 API 的某個對象。
element.getUserData()	返回關聯元素上鍵的對象。
element.hasAttribute()	若是元素擁有指定屬性，則返回true，不然返回 false。
element.hasAttributes()	若是元素擁有屬性，則返回 true，不然返回 false。
element.hasChildNodes()	若是元素擁有子節點，則返回 true，不然 false。
element.id	設置或返回元素的 id。
element.innerHTML	設置或返回元素的內容。
element.insertBefore()	在指定的已有的子節點以前插入新節點。
element.isContentEditable	設置或返回元素的內容。
element.isDefaultNamespace()	若是指定的 namespaceURI 是默認的，則返回 true，不然返回 false。
element.isEqualNode()	檢查兩個元素是否相等。
element.isSameNode()	檢查兩個元素是不是相同的節點。
element.isSupported()	若是元素支持指定特性，則返回 true。
element.lang	設置或返回元素的語言代碼。
element.lastChild	返回元素的最後一個子元素。
element.namespaceURI	返回元素的 namespace URI。
element.nextSibling	返回位於相同節點樹層級的下一個節點。
element.nodeName	返回元素的名稱。
element.nodeType	返回元素的節點類型。
element.nodeValue	設置或返回元素值。
element.normalize()	合併元素中相鄰的文本節點，並移除空的文本節點。
element.offsetHeight	返回元素的高度。
element.offsetWidth	返回元素的寬度。
element.offsetLeft	返回元素的水平偏移位置。
element.offsetParent	返回元素的偏移容器。
element.offsetTop	返回元素的垂直偏移位置。
element.ownerDocument	返回元素的根元素（文檔對象）。
element.parentNode	返回元素的父節點。
element.previousSibling	返回位於相同節點樹層級的前一個元素。
element.removeAttribute()	從元素中移除指定屬性。
element.removeAttributeNode()	移除指定的屬性節點，並返回被移除的節點。
element.removeChild()	從元素中移除子節點。
element.replaceChild()	替換元素中的子節點。
element.scrollHeight	返回元素的總體高度。
element.scrollLeft	返回元素左邊緣與視圖之間的距離。
element.scrollTop	返回元素上邊緣與視圖之間的距離。
element.scrollWidth	返回元素的總體寬度。
element.setAttribute()	把指定屬性設置或更改成指定值。
element.setAttributeNode()	設置或更改指定屬性節點。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData()	把對象關聯到元素上的鍵。
element.style	設置或返回元素的 style 屬性。
element.tabIndex	設置或返回元素的 tab 鍵控制次序。
element.tagName	返回元素的標籤名。
element.textContent	設置或返回節點及其後代的文本內容。
element.title	設置或返回元素的 title 屬性。
element.toString()	把元素轉換爲字符串。
nodelist.item()	返回 NodeList 中位於指定下標的節點。
nodelist.length	返回 NodeList 中的節點數。

來自 <http://www.w3school.com.cn/jsref/dom_obj_all.asp>

js與瀏覽器交互：

獲取window尺寸

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口（80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊按鈕向前相同

Cookie相關：

設置cookie，存放name和date

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

檢查是否存在cookie

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}

獲取cookie值

function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

事件句柄handler:

onabort	圖像的加載被中斷。
onblur	元素失去焦點。
onchange	域的內容被改變。
onclick	當用戶點擊某個對象時調用的事件句柄。
ondblclick	當用戶雙擊某個對象時調用的事件句柄。
onerror	在加載文檔或圖像時發生錯誤。
onfocus	元素得到焦點。
onkeydown	某個鍵盤按鍵被按下。
onkeypress	某個鍵盤按鍵被按下並鬆開。
onkeyup	某個鍵盤按鍵被鬆開。
onload	一張頁面或一幅圖像完成加載。
onmousedown	鼠標按鈕被按下。
onmousemove	鼠標被移動。
onmouseout	鼠標從某元素移開。
onmouseover	鼠標移到某元素之上。
onmouseup	鼠標按鍵被鬆開。
onreset	重置按鈕被點擊。
onresize	窗口或框架被從新調整大小。
onselect	文本被選中。
onsubmit	確認按鈕被點擊。
onunload	用戶退出頁面。

鼠標/鍵盤屬性：

altKey	返回當事件被觸發時，"ALT" 是否被按下。
button	返回當事件被觸發時，哪一個鼠標按鈕被點擊。
clientX	返回當事件被觸發時，鼠標指針的水平座標。
clientY	返回當事件被觸發時，鼠標指針的垂直座標。
ctrlKey	返回當事件被觸發時，"CTRL" 鍵是否被按下。
metaKey	返回當事件被觸發時，"meta" 鍵是否被按下。
relatedTarget	返回與事件的目標節點相關的節點。
screenX	返回當某個事件被觸發時，鼠標指針的水平座標。
screenY	返回當某個事件被觸發時，鼠標指針的垂直座標。
shiftKey	返回當事件被觸發時，"SHIFT" 鍵是否被按下。

IE屬性：

cancelBubble	若是事件句柄想阻止事件傳播到包容對象，必須把該屬性設爲 true。
attachEvent	用來添加事件，attachEvent(事件類型，函數);
detachEvent	用來移除事件，detachEvent(事件類型，函數);
fromElement	對於 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
keyCode	對於 keypress 事件，該屬性聲明瞭被敲擊的鍵生成的 Unicode 字符碼。對於 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的佈局相關。
offsetX,offsetY	發生事件的地點在事件源元素的座標系統中的 x 座標和 y 座標。
returnValue	若是設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置爲 fasle，能夠取消發生事件的源元素的默認動做。
srcElement	對於生成事件的 Window 對象、Document 對象或 Element 對象的引用。
toElement	對於 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。
x,y	事件發生的位置的 x 座標和 y 座標，它們相對於用CSS動態定位的最內層包容元素。

標準Event屬性和方法（DOM2級）：

addEventListener	添加監聽器（事件），addEventListener(type事件類型,handler函數,false);
removeEventListener	移除監聽器
bubbles	返回布爾值，指示事件是不是起泡事件類型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認動做。
currentTarget	返回其事件監聽器觸發該事件的元素。
eventPhase	返回事件傳播的當前階段。
target	返回觸發此事件的元素（事件的目標節點）。
timeStamp	返回事件生成的日期和時間。
type	返回當前 Event 對象表示的事件的名稱。

注:ie不支持下列方法

initEvent()	初始化新建立的 Event 對象的屬性。
preventDefault()	通知瀏覽器不要執行與事件關聯的默認動做。
stopPropagation()	再也不派發事件。

不一樣瀏覽器添加刪除句柄示例：

//添加句柄
addHandler:function(element,type,handler){

 if(element.addEventListener){

                 element.addEventListener(type,handler,false);

 }else if(element.attachEvent){

                 element.attachEvent('on'+type, handler);

  }else{

                 element['on'+type]=handler;

  }

},

// 刪除句柄

removeHandler: function(element,type,handler){

if(element.removeEventListener){

 

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

     element.detachEvent('on'+type,handler);

}else{

 

element['on'+type]=null;

}

},

//爲login_btn添加click事件,自定義事件爲函數showLogin

addEvent(login_btn,'click',showLogin);

addEvent(close,'click',hideLogin);}

javsscript修改指定id的屬性：

<script> 
document.getElementById(btnZzk).style.backgroundColor = "#169fe6";
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。