1. 程式人生 > >請簽收你的javascript乾貨

請簽收你的javascript乾貨

JavaScript中的資料型別

javascript中一共有六種資料型別。parseInt()強轉整數、parseFloat()強轉浮點數

[布林型| boolean]  -->[字串型| string]  -->[物件型|object]  -->[函式型|function]  -->[未定義|undefined] B -->[整數型|number]

獲取元素節點

通過ID獲取標籤節點
document.getElementById('元素ID');
通過name標籤
document.getElementsByName('元素名稱');
用標籤獲取指定標籤
document.getElementsByTagName('標籤名稱');
通過類名獲取元素
document.getElementsByClassName('類名');

改變標籤的值

var i = document.getElemenrById('bqid');
i.style.background = 'red';

在元素中插入內容

在元素中插入文字內容
var i = document.getElementById('span');
i.innerText += '一段文字';
在元素中插入HTML內容
var i = document.getElementById('span');
i.innerHTML += ‘<h1></h1>';

標籤生成及新增

//生成一個a標籤
var i = document.createElement('a');
document.createTextNode('一段文字');        //生成一個字串 i.href  = 'http://www.baidu.com'; var b = document.body; b.appendChild(i);   //將A標籤新增到Body中

判斷元素節點還是屬性節點

/**
  *如果是2 則為屬性節點
  *如果是1 則為元素節點
  *如果是3 則為文字節點
*/
var a = document.createElement('div');              //生成一個DIV的元素 var b = document.createElement('一段文字');       //生成一段文字內容 a.nodeType == 1;    //元素節點 a.nodeType == 3;    //文字節點

獲取及設定元素屬性

//注:火狐不支援以下方法
var i = document.getElementById('a');
var o =i.getAttribute('href');   //獲取元素屬性 i.setAttribute('href','http://www.qq.com');   //設定元素屬性 i.removeAttribute('href');      //移除I元素中的href屬性

獲取當前元素的上一個、下一個及父級

var i = document.getElementById('a');
i.nextElementSibling;       //上一個元素節點
i.previousElementSibling;   //下一個元素節點 var t = i.parentElement;            //父級元素節點 t.childNodes                    //t下所有子級的元素節點

滑鼠移入移出事件

//先獲取想要觸發事件的元素
var a = document.body;
//設定滑鼠移入的事件
a.onmousemove = function(ee){     alert('你的滑鼠壓到我了');     //同時也可以改變樣式     ee.target.style.background = 'red'; } //設定滑鼠移出的事件 a.onmouseout = function(eq){     //和滑鼠移入一樣設定     alert('你的滑鼠移走了');     eq.target.style.background = ''; }

事件合集

var div = document.getElementById('div');
div.onclick = function (e){...程式碼段} //e中的target代表了當前點選的這個元素。e.target div.onmousemove = function(e){...程式碼段}  //滑鼠在DIV上的移動事件 div.onmouseout = function(e){...程式碼段}    //滑鼠移出DIV的事件 div.onblur = function (e){...程式碼段}           //失去焦點事件 div.focus()                                         //使DIV獲取焦點 div.onkeydown = function(e){e.key}//在DIV元素中按下某鍵前的事件:e.key為按下的鍵值 div.onkeypress = function(e){...程式碼段}    //在DIV元素中某件鬆開前的事件