鄭州Web前端培訓(xùn)怎么樣?前端JS工具函數(shù)好學(xué)嗎?JS是前端三要素之一,很多企業(yè)招聘過程中都會重點考察求職者對JS的掌握程度,掌握好JS就意味著你擁有更多獲得高薪的機(jī)會。在接下來的鄭州Web前端學(xué)習(xí)中,小編就給大家分享一下常用的JS工具函數(shù)以及使用方法。
選取DOM元素的方法
(注意:原生JS選取DOM元素比使用jQuery類庫選取要快很多)
通過ID選取元素:document.getElementById('myid');
通過CLASS選取元素:document.getElementsByClassName('myclass')[0];
通過標(biāo)簽選取元素:document.getElementsByTagName('mydiv')[0];
通過NAME屬性選取元素(常用于表單):document.getElementsByName('myname')[0];
JS修改CSS樣式
document.getElementById('myid').style.display = 'none';
JS修改CLASS屬性
document.getElementById('myid').className = 'active';
如果有多個CLASS屬性,即用空格隔開////////
document.getElementById('myid').className = 'active div-1';
移除該元素上的所有CLASS
document.getElementById('myid').className = ''
注意:使用classList會優(yōu)于使用className
document.getElementById('myid').classList.item(0);//item為類名的索引
document.getElementById('myid').classList.length;//只讀屬性
document.getElementById('myid').classList.add('newClass');//添加class
document.getElementById('myid').classList.remove('newClass');//移除class
document.getElementById('myid').classList.toggle('newClass');//切換,有則移除,沒有則添加
document.getElementById('myid').classList.contains('newClass');//判斷是否存在該class
JS修改文本
document.getElementById('myid').innerHTML = '123';
數(shù)組去重的方法
Array.prototype.unique = function(){
var tem = {}, //新建一個空對象,給數(shù)組中沒出現(xiàn)過的數(shù)添加一個屬性
arr = [], //去重后的數(shù)組
len = this.length; //要進(jìn)行去重數(shù)組的長度
for(var i=0;i
if(!temp[this[i]]){ // 判斷數(shù)組中的數(shù)作為屬性名在temp里有沒有屬性值
temp[this[i]]= abc ;//如果沒有屬性值,則說明沒出現(xiàn)過給他一個屬性值
arr.push(this[i]);//同時把這個數(shù)添加到去重后的數(shù)組里
}
}
return arr; //**返回這個數(shù)組,這是hash算法
}
刪除數(shù)組中存在重復(fù)的元素
function getUnique(someArray) {
tempArray = someArray.slice(0); //復(fù)制數(shù)組到臨時數(shù)組
for (var i = 0; i < tempArray.length; i++) {
for (var j = i + 1; j < tempArray.length;) {
if (tempArray[j] == tempArray[i])
//后面的元素若和待比較的相同,則刪除并計數(shù);
//刪除后,后面的元素會自動提前,所以指針j不移動
{
tempArray.splice(j, 1);
}
else {
j++;
}
//不同,則指針移動
}
}
return tempArray;
}
判斷某個值是否在數(shù)組中
Array.prototype.in_array = function (e) {
for (i = 0; i < this.length; i++) {
if (this[i] == e)
return true;
}
return false;
}
判斷某個值在數(shù)組中的位置
Array.prototype.indexOf = function (e) {
for (i = 0; i < this.length; i++) {
if (this[i] == e)
return i;
}
return -1;
}
跨瀏覽器綁定事件
function addEventSamp(obj, evt, fn) {
if (!oTarget) { return; }
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + evt, fn);
} else {
oTarget[ on + sEvtType] = fn;
}
}
跨瀏覽器刪除事件
function delEvt(obj, evt, fn) {
if (!obj) { return; }
if (obj.addEventListener) {
obj.addEventListener(evt, fn, false);
} else if (oTarget.attachEvent) {
obj.attachEvent( on + evt, fn);
} else {
obj[ on + evt] = fn;
}
}
說的再多不如動手練一遍,如果你想了解更多鄭州Web前端學(xué)習(xí)教程資料,可以來千鋒鄭州申請兩周免費試聽,親身感受講師的教學(xué)水平。 |