w3school容易忽略的東西

時間  2020-01-04
標籤 w3school school 容易 忽略 東西 简体版
原文   原文鏈接

JS

JS DOM

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie。javascript

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的全部部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。html

找到您但願刪除的子元素，而後使用其 parentNode 屬性來找到父元素：java

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

JS 對象

JavaScript for...in 語句循環遍歷對象的屬性。
for...in 循環中的代碼塊將針對每一個屬性執行一次。node

for (對象中的變量)
  {
  要執行的代碼
  }

極大或極小的數字可經過科學（指數）計數法來寫：web

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123

若是邏輯對象無初始值或者其值爲 0、-0、null、""、false、undefined 或者 NaN，那麼對象的值爲 false。不然，其值爲 true（即便當自變量爲字符串 "false" 時）！數組

使用了 Math 對象的 floor() 方法和 random() 來返回一個介於 0 和 10 之間的隨機數：瀏覽器

document.write(Math.floor(Math.random()*11))

RegExp 對象的方法

test() 方法檢索字符串中的指定值。返回值是 true 或 false。cookie

exec() 方法檢索字符串中的指定值。返回值是被找到的值。若是沒有發現匹配，則返回 null。app

//找到第一個 "e"，並存儲其位置,
//若是再次運行 exec()，則從存儲的位置開始檢索，並找到下一個 "e"，並存儲其位置
var patt1=new RegExp("e","g");
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)

compile() 既能夠改變檢索模式，也能夠添加或刪除第二個參數。框架

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); //true
patt1.compile("d");
document.write(patt1.test("The best things in life are free")); //false

JS Window

Window 尺寸

有三種方法可以肯定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

  • 對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

    window.innerHeight - 瀏覽器窗口的內部高度
window.innerWidth - 瀏覽器窗口的內部寬度

  • 對於 Internet Explorer 八、七、六、5：

    document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

  • 實用的 JavaScript 方案（涵蓋全部瀏覽器）：

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

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

Window Screen

(返回訪問者屏幕的寬度，以像素計，減去界面特性，好比窗口任務欄)

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

Window Location

location.href 屬性返回當前頁面的 URL。
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）
location.assign("http://www.w3school.com.cn") 方法加載新的文檔。

window.history

history.back() - 與在瀏覽器點擊後退按鈕相同(加載歷史列表中的前一個 URL)
history.forward() - 與在瀏覽器中點擊按鈕向前相同(加載歷史列表中的下一個 URL)

window.navigator

(navigator 數據可被瀏覽器使用者更改,瀏覽器沒法報告晚於瀏覽器發佈的新操做系統)

特性檢測
因爲 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不一樣的瀏覽器。
因爲不一樣的瀏覽器支持不一樣的對象，您可使用對象來檢測瀏覽器。例如，因爲只有 Opera 支持屬性 "window.opera"，您能夠據此識別出 Opera。

window.PopupAlert

alert("文本")
confirm("文本")
prompt("文本","默認值")

JS Timing

setTimeout("javascript語句",毫秒) 將來的某時執行代碼
setTimeout() 方法會返回某個值。在上面的語句中，值被儲存在名爲 t 的變量中。假如你但願取消這個 setTimeout()，你可使用這個變量名來指定它。
clearTimeout() 取消setTimeout()

JS Cookies

<html>
<head>
<script type="text/javascript">
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 ""
}

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())
}

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)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

HTML DOM

在 HTML DOM 中，全部事物都是節點。DOM 是被視爲節點樹的 HTML。

整個文檔是一個文檔節點
每一個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每一個 HTML 屬性是屬性節點
註釋是註釋節點

clipboard.png

document.documentElement - 所有文檔
document.body - 文檔的主體

clipboard.png
DOM 處理中的常見錯誤是但願元素節點包含文本
可經過節點的 innerHTML 屬性來訪問文本節點的值

一些經常使用的 HTML DOM 方法：
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標籤名稱的全部元素的節點列表（集合/節點數組）。
getElementsByClassName() 返回包含帶有指定類名的全部元素的節點列表。
appendChild() 將新元素做爲父元素的最後一個子元素進行添加。
removeChild() 刪除子節點child.parentNode.removeChild(child)。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 建立屬性節點。
createElement() 建立元素節點。
createTextNode() 建立文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改成指定的值。
一些經常使用的 HTML DOM 屬性：
innerHTML - 節點（元素）的文本值
parentNode - 節點（元素）的父節點
childNodes - 節點（元素）的子節點
attributes - 節點（元素）的屬性節點

nodeName 屬性
nodeName 屬性規定節點的名稱。
nodeName 是隻讀的
元素節點的 nodeName 與標籤名相同
屬性節點的 nodeName 與屬性名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
註釋：nodeName 始終包含 HTML 元素的大寫字母標籤名。

nodeValue 屬性
nodeValue 屬性規定節點的值。
元素節點的 nodeValue 是 undefined 或 null
文本節點的 nodeValue 是文本自己
屬性節點的 nodeValue 是屬性值

nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 是隻讀的。
比較重要的節點類型有：
元素類型 NodeType
元素 1
屬性 2
文本 3
註釋 8
文檔 9

如需向 HTML DOM 添加新元素，您首先必須建立該元素（元素節點），而後把它追加到已有的元素上。

除了 innerHTML 屬性，您也可使用 childNodes 和 nodeValue 屬性來獲取元素的內容。
document.getElementById("intro").childNodes[0].nodeValue

向超連接添加快捷鍵
幾乎全部瀏覽器均 accesskey 屬性，除了 Opera。
如下元素支持 accesskey 屬性：
< a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea>。

<a href="http://www.w3school.com.cn/html/" accesskey="h">HTML</a>

document.referrer
若是當前文檔不是經過超級連接訪問的，則爲 null。這個屬性容許客戶端 JavaScript 訪問 HTTP 引用頭部。

打開一個新的文檔，添加一些文本，而後關閉它。

<html>
<head>
<script type="text/javascript">
function createNewDoc()
  {
  var newDoc=document.open("text/html","replace");
  var txt="<html><body>學習 DOM 很是有趣！</body></html>";
  newDoc.write(txt);
  newDoc.close();
  }
</script>
</head>

<body>
<input type="button" value="打開並寫入一個新文檔" onclick="createNewDoc()">
</body>
</html>

document 文檔

文檔中錨的數目

document.anchors.length

文檔中的圖像數目

document.images.length

文檔中表單的名字

document.forms[0].name
document.getElementById("myForm").reset()//重置

驗證表單

<html>
<head>
<script type="text/javascript">
function validate()
{
var at=document.getElementById("email").value.indexOf("@")
var age=document.getElementById("age").value
var fname=document.getElementById("fname").value
submitOK="true"
if (fname.length>10)
 {
 alert("名字必須小於 10 個字符。")
 submitOK="false"
 }
if (isNaN(age)||age<1||age>100)
 {
 alert("年齡必須是 1 與 100 之間的數字。")
 submitOK="false"
 }
if (at==-1) 
 {
 alert("不是有效的電子郵件地址。")
 submitOK="false"
 }
if (submitOK=="false")
 {
 return false
 }
}
</script>
</head>
<body>
<form action="/example/hdom/hdom_submitpage.html" onsubmit="return validate()">
名字（最多 10 個字符）：<input type="text" id="fname" size="20"><br />
年齡（從 1 到 100）：<input type="text" id="age" size="20"><br />
電子郵件：<input type="text" id="email" size="20"><br />
<br />
<input type="submit" value="提交"> 
</form>
</body>
</html>

選取文本域中的內容
document.getElementById("myText").select()

表單中的下拉列表

document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text
option=no.options[no.selectedIndex].text

當達到文本域的最大字符數時跳至下一個域

<html>
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
    {
    var next=x.tabIndex
    if (next<document.getElementById("myForm").length)
        {
        document.getElementById("myForm").elements[next].focus()
        }
    }
}
</script>
</head>
<body>
<p>這段腳本在達到文本框的最大長度時跳到下一個文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
</html>

Event 對象

Frame、Frameset 以及 IFrame 對象

可調整大小和不可調整大小的框架

<html>
<frameset cols="50%,50%">
  <frame id="leftFrame" src="/example/hdom/frame_noresize.html">
  <frame id="rightFrame" src="/example/hdom/frame_a.html">
</frameset>
</html>

跳出框架

<html>
<head>
<script type="text/javascript">
function breakout()
  {
  if (window.top!=window.self) 
    {
    window.top.location="/example/hdom/tryjs_breakout.htm"
    }
  }
</script>
</head>
<body>

<input type="button" onclick="breakout()" value="跳出框架！">
</body>
</html>

更改下拉列表中的可見行數
select id="mySelect"
document.getElementById("mySelect").size=3
選擇下拉列表中的多個選項
document.getElementById("mySelect").multiple=true
下拉列表 禁用
document.getElementById("mySelect").disabled=true
更改被選選項
document.getElementById("orange").selected=true;
從下拉列表中刪除選項
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)

打印該頁
window.print()

Q&A

HTML5 中再也不支持下面哪一個元素？
<acronym>

在 HTML5 中再也不支持 <script> 元素的哪一個屬性？
type

由 SVG 定義的圖形是什麼格式的？
XML

哪一個 HTML5 內建對象用於在畫布上繪製？
getContext

哪一種輸入類型用於定義周和年控件（無時區）？
week

哪一個 HTML5 元素用於顯示已知範圍內的標量測量？
<meter>

外部腳本必須包含 <script> 標籤嗎？
否

在 JavaScript 中，有多少種不一樣類型的循環？
兩種。for 循環和 while 循環。

打開名爲 "window2" 的新窗口的 JavaScript 語法是？
window.open("http://www.w3school.com.cn","window2")

如何在瀏覽器的狀態欄放入一條消息？window.status = "put your message here"

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程