javascript乾貨

JS的時間機制

1. 單雙擊時間
   單擊：onclick 當鼠標單擊時觸發
   雙擊：ondblclick 當鼠標雙擊時觸發
2. 鼠標事件
   onmouseover當鼠標懸停在HTML元素時觸發
   onmousemove當鼠標在HTML上移動時觸發
   onmouseout當鼠標從某個HTML移出時觸發
3. 鍵盤事件
   onkeyup當鍵盤在某個HTML元素上彈起時觸發
   onkeydown當鍵盤在某個HTML元素上下壓時觸發
4. 焦點事件
   onfocus當某個HTML元素獲取焦點時觸發
   onblur當某個HTML元素失去焦點時觸發
5. 頁面加載事件
   onload當頁面加載成功後觸發

需要注意的地方：

• 一個HTML可以添加多個不同的時間
• 在HTML上直接 使用事件屬性進行添加，屬性值爲所監聽執行的函數，JS的事件是在當前HTML元素上有效
• 一個事件可以監聽觸發多個函數的執行，不同函數要使用分號間隔
  約定成俗的事件添加規則：
  onchange------select下拉框
  onload------body標籤
  單雙擊--------用戶會進行點擊動作的HTML元素
  鼠標事件------用戶會進行鼠標移動的HTML元素
  鍵盤事件-------用戶會進行鍵盤操作的HTML元素
• 當事件的觸發條件包含相同部分的時候，會產生事件之間的衝突。
• 當事件所監聽的函數的返回值返回給事件時:
  false阻斷當前事件所在HTML標籤的功能
  true繼續執行當前事件所在HTML標籤的功能
• 超鏈接調用js函數
  調用JS函數功能

windows對象

方法
windows對象不用new，直接進行使用即可，關鍵字可以省略不寫。

• 框體方法：
  alert(內容)
  此方法提示一個警告信息，沒有返回
  confirm（內容）
  此方法是一個確認框，提示用戶選擇一項（確認/取消）
  prompt（提示內容，默認值）
  提示框，提示用某個信息的錄入
  點擊確定 返回當前錄入的字符串，默認返回空字符串
  點擊取消 返回NULL
• 定時和間隔方法
  setTimeout指定的時間後執行指定的函數
  參數1：函數對象
  參數2：時間單位（毫秒）
  返回值：返回當前定時器的id
  setInterval每間隔指點的時間執行指定的函數
  參數1：函數對象
  參數2：時間單位（毫秒）
  返回值：返回當前間隔器的id
  clearTimeout用來停止指定的定時器
  參數：定時器的id
  clearInterval用來停止指定的間隔器
  參數：間隔器的id
• 子窗口的方法
  window.open(‘子頁面的資源（相對路徑）’，‘打開方式’,‘配置’)；
  window.close ();關閉頁面
  window.opener父頁面的函數，該函數可以調用父頁面的相關函數
• windows對象的常用屬性
  地址欄屬性：location
  window.location.href=“新的資源路徑(相對路徑/URL)”
  window.location.reload()重新加載頁面資源
  **注意：**與window.open不同的是open打開的是新窗口，而location是打開新網頁覆蓋本頁面
  歷史記錄屬性：
  window.history.forward()頁面資源前進，歷史紀錄的前進
  window.hisory.back()頁面資源後退，歷史記錄後退
  window.hisory.go(index)，跳轉到指定的歷史記錄資源//window.history.go相當於刷新
  屏幕屬性：
  window.srceen.width;獲取屏幕的寬度分辨率
  window.srceen.height;獲取屏幕的高度分辨率
  document獲取html元素
• 直接獲取方式：
  通過id：document.getElementById(“id的值”)；該方法返回單個元素，因爲html中id只能是唯一的
  通過name屬性值：document.getElementsByName(“name屬性值”)；該方法返回一個元素對象集合
  通過標籤名：document.getElementsByTagName(“標籤名稱”);該方法返回一個元素對象集合
  通過class屬性值:document.getElementsByClassName(“class屬性值”);該方法返回一個元素集合
• 間接獲取方式：
  父子關係：父級元素對象.childNodes;該方法獲返回該父元素所有的子元素對象數組
  子父關係：子元素對象.parentNode;該方法返回子元素的父對象
  兄弟關係：元素.previousSibling;該方法獲取同級的上一個元素對象 元素.nextSibling;該方法獲取同級的下一個元素對象
  document操作HTML元素對象：
• 操作元素的屬性
  獲取：
  元素對象名.屬性名//返回當前屬性的屬性值。----固有
  元素對象名.getAttribute(“屬性名”);//返回自定義屬性的值-----自定義
  修改:
  元素對象名.屬性名=屬性值
  元素對象名.setAttribute(“屬性名”,“屬性值”);//修改自定義屬性的值----自定義
  注意：
  儘量的不要去修改元素的id值和name屬性值。
  使用自定義方式獲取固有屬性內容，value的值獲取的是默認值，不能夠獲取到實時的用戶數據

操作HTML元素對象

操作HTML元素的內容：
獲取元素對象
獲取
元素對象名.innerHTML//返回當前元素對象的所有內容，包括HTML標籤
元素對象名.innerText//返回當前元素對象的文本內容，不包括HTML標籤
修改
元素對象名.innerHTML=“新的值”//會將原有內容覆蓋，並HTML標籤會被解析
元素對象名.innerHTML=元素對象名.innerHTML+“新的值”//追加效果
元素對象名.innerText=“新的值”//會將原有內容覆蓋，但HTML標籤不會被解析，會作爲普通文本顯示。

操作HTML元素的樣式

獲取元素對象
通過style屬性
元素對象名.style.樣式名=“樣式值”//添加或者修改
元素對象名.style.樣式名=""//刪除樣式
注意:
以上操作，操作的是HTML的style屬性聲明中的樣式。而不是其他css代碼域中的樣式。
通過className
元素對象名.className=“新的值”//添加類選擇器樣式或者修改類選擇器樣式
元素對象名.className=""//刪除類樣式。
操作HTML文檔結構：
增加節點、刪除節點
第一種方式：使用innerHTML
div.innerHTML=div.innerHTML+“內容”//增加節點
div.innerHTML=""//刪除所有子節點
父節點.removeChild(子節點對象)//刪除指定的子節點。
第二種方式：使用元素對象
var obj=document.createElement(“標籤名”);
元素對象名.appendChild(obj);

From表單驗證

• 姓名驗證

  function validate(){
  //加入姓名驗證
  var username=document.getElementById(“username”).value；
  if(username.trim()==""){
  alert(“用戶名不能爲空！”);
  }
  }

• 選擇性驗證

  var hobby=document.getElementById(“hobby”);
  var isHobby=false；
  for (var i=0,i<hobby.length;i++){
  if(hobby[i].checked){
  isHobby=true;
  }
  }
  if(!hobby){
  alert(“愛好至少選擇一項！”);
  }

• 畢業院校驗證
  畢業院校是一個下拉框，我們不能讓用戶選擇“–請選擇–”這個選項！

  var school=document.getElementById(“school”).value;
  if(school=="–請選擇–"){
  alert("請選擇畢業院校!);
  }

• 個人簡歷的驗證

  var introduce = document.getElementById(“school”).value;
  if(introduce.trim==""){
  alert(“個人簡歷不能爲空”);
  }

• 避免驗證失敗後仍然提交
  將提交按鈕改成普通按鈕，通過js來進行提交

  <input type="button"value=“提交” οnclick=“sub();”/>

sub()方法中對錶單項實現提交功能，前提是驗證通過！

function sub(){
	if(validate()){
	document.getElmetById("yy").submit();
	}
}

這裏的validate()函數就是我們的校驗函數，如果校驗成功返回true進行提交，反之則不提交
validate()函數的具體實現如下

function validate(){
	//加入姓名驗證
	var username= document.getElementById("username").value;
	if(username.trim==""){
	alert("用戶名不能爲空！");
	return false;
	}
}

//加入愛好驗證

var hobby=document.getElementById("hobby");
    var isHobby=false；
    for (var i=0,i<hobby.length;i++){
    	if(hobby[i].checked){
    	isHobby=true;
    	}
    }
    if(!hobby){
    	alert("愛好至少選擇一項！");
    	return false；
        }
//加入畢業院校驗證
  var school=document.getElementById("school").value;
    if(school=="--請選擇--"){
    alert("請選擇畢業院校!);
    return false；
    }
//加入個人簡歷驗證
var introduce = document.getElementById("school").value;
    if(introduce.trim==""){
    alert("個人簡歷不能爲空");
    }
    return true;

實現驗證人性化：
通過衆多實驗表明，每當驗證失敗的時候頁面都會彈出一個警告框告知我們，實際這種方式非常不人性化。通常的做法是在表單項右側以文本的方式進行提示。
將每個表單項的代碼後追加span標籤，如用戶名標籤追加span標籤如下：

用戶名：<input type ="text" name="username" id = "username" value=""/ ><span id="usernameSpan"></span><br/>

對用戶名進行校驗改進：

var username = document.getElementById("username").value
var usernameSpan = documnet.getElementById("usernameSpan").value

if(username.trim() == ""){
	usernameSpan.innerText = "用戶名不能爲空";
	usernameSpan.style.color = "red";
	return false;
}else{
	usernameSpan.innerText = "用戶名輸入正確";
	usernameSpan.style.color = "green";
}

這樣的話，校驗更加人性化，避免彈窗！
剩餘的校驗以此類推
總結：內容很實在，全是乾貨，實實在在的內容，敲一遍加深記憶。