龙空技术网

前端JS工具函数好学吗 怎么入门Web前端行业

千锋郑州 80

前言:

现在看官们对“js好学吗”大致比较关怀,咱们都想要分析一些“js好学吗”的相关内容。那么小编也在网络上汇集了一些关于“js好学吗””的相关知识,希望小伙伴们能喜欢,姐妹们一起来学习一下吧!

前端JS工具函数好学吗?怎么入门Web前端行业?JS是前端三要素之一,很多企业招聘过程中都会重点考察求职者对JS的掌握程度,掌握好JS就意味着你拥有更多获得高薪的机会。下面就给大家分享一下常用的JS工具函数以及使用方法。

选取DOM元素的方法

(注意:原生JS选取DOM元素比使用jQuery类库选取要快很多)

通过ID选取元素:document.getElementById('myid');

通过CLASS选取元素:document.getElementsByClassName('myclass')[0];

通过标签选取元素: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会优于使用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';

数组去重的方法

Array.prototype.unique = function(){

var tem = {}, //新建一个空对象,给数组中没出现过的数添加一个属性

arr = [], //去重后的数组

len = this.length; //要进行去重数组的长度

for(var i=0;i

if(!temp[this[i]]){ // 判断数组中的数作为属性名在temp里有没有属性值

temp[this[i]]="abc";//如果没有属性值,则说明没出现过给他一个属性值

arr.push(this[i]);//同时把这个数添加到去重后的数组里

}

}

return arr; //最后返回这个数组,这是hash算法

}

删除数组中存在重复的元素

function getUnique(someArray) {

tempArray = someArray.slice(0); //复制数组到临时数组

for (var i = 0; i < tempArray.length; i++) {

for (var j = i + 1; j < tempArray.length;) {

if (tempArray[j] == tempArray[i])

//后面的元素若和待比较的相同,则删除并计数;

//删除后,后面的元素会自动提前,所以指针j不移动

{

tempArray.splice(j, 1);

}

else {

j++;

}

//不同,则指针移动

}

}

return tempArray;

}

判断某个值是否在数组中

Array.prototype.in_array = function (e) {

for (i = 0; i < this.length; i++) {

if (this[i] == e)

return true;

}

return false;

}

判断某个值在数组中的位置

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前端工程师,一定要基础扎实,具有良好的规范开发习惯。如果你想从事Web前端行业,可以选择专业的学习方式,让自己更快入门这个行业​。

标签: #js好学吗