一丢丢前端常用的小技巧

missonce 发布于2019-08-21 13:32 / 2870人阅读

摘要：获取节点只能运用到上返回找到的元素节点速度是最快的能运用到所有元素节点上返回一个类数组的集合同上能运用到所有元素节点上返回第一个匹配的元素参数是标准的选择器能运用到所有元素节点上返回一个类数组的集合参数是标准的选择器操作获取或设置元素的返回

获取DOM节点:

document.getElementById(): 只能运用到document上, 返回找到的元素节点, 速度是最快的;

dom.getElementsByTagName(): 能运用到所有元素节点上, 返回一个类数组的集合;

dom.getElementsByClassName(): 同上;

dom.querySelector(): 能运用到所有元素节点上, 返回第一个匹配的元素, 参数是标准的css选择器;

dom.querySelectorAll(): 能运用到所有元素节点上, 返回一个类数组的集合, 参数是标准的css选择器;

操作class

dom.className: 获取或设置元素的class;

dom.classList: 返回元素的所有class的一个集合;

dom.classList.add(): 追加指定的类名;

dom.classList.remove(): 移除指定的类名; 不传参数是不会做移除的哟;

dom.classList.toggle(): 同时兼具移除和添加功能, 如果存在批定的类名则移除, 如果不存在则添加;

dom.classList.contains(): 返回一个布尔值, 判断节点是否包含指定的类名;

其他

navigator.userAgent中MicroMessenger可以来判断是否为WeChat;

document.referrer: 获取来源的URL;

Array.prototype.slice.call(list): 将一个类数组的集合转换成一个真实的数组;

input.value: 获取input的值; input.defaultValue: 获取input的默认值;

selectEl.value: 如果中所有标签，是一个类数组的集合;

selectEl.options.selectedIndex: 获取选中的索引;

selectEl.options[selectEl.options.selectedIndex].textContent: 获取选中的文本内容;

正则

*: 匹配0到多次

+: 匹配1到多次

?: 匹配0或1次

g: 全局匹配，即不是搜到一个匹配就返回，而是搜出全部匹配一般返回是一个数组

i: 忽略大小写

m: 多行匹配

HTML

: 让IE浏览器以最新的引擎渲染, chrome=1可以激活chrome Frame;

: 禁用IOS中键盘自动大写;

如果有

私有云 GPU服务器前端技巧前端开发技巧一丢丢我的小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87718.html

前端工程师的 2018 年总结

摘要：前言时间过得很快，年已经接近尾声了。离开大学校园已经一年半，正式工作也一年半了。年，我的本命年，今年岁，离而立之年岁，又近了一步。前端对于的相关技术栈，虽然之前也有在用，但今年是技术上达到熟练的一年，做过公众号端管理后台应用。 showImg(https://segmentfault.com/img/remote/1460000017441966); 1. 前言时间过得很快，2018...

DevYK 2019-06-26 17:55 评论0 收藏0
前端工程师的 2018 年总结

摘要：前言时间过得很快，年已经接近尾声了。离开大学校园已经一年半，正式工作也一年半了。年，我的本命年，今年岁，离而立之年岁，又近了一步。前端对于的相关技术栈，虽然之前也有在用，但今年是技术上达到熟练的一年，做过公众号端管理后台应用。 showImg(https://segmentfault.com/img/remote/1460000017441966); 1. 前言时间过得很快，2018...

chengtao1633 2019-08-23 14:10 评论0 收藏0
前端非常有意思的小技巧

摘要：这是我在工作和学习中总结的一些平时不怎么常用但是很实用的方法技巧部分盒子实际大小设置超过两行就出现省略号强制换行文字溢出隐藏鼠标设置为移动效果鼠标设置为小手效果段落中的文本不换行平面转立体移动端取消点击效果用绘制三角形使用来控这是我在工作和学习中总结的一些平时不怎么常用但是很实用的方法技巧: CSS部分: 　　1.盒子实际大小设置　　　　2.超过两行就出现省略号　　　　3.强...

hiyang 2019-04-23 11:43 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

LittleLiByte 2019-08-30 15:55 评论0 收藏0
「前端早读君006」移动开发必备：那些玩转H5的小技巧

摘要：今日励志语录有志者自有千计万计，无志者只感千难万难。三动画技术越来越不陌生，使用门槛也渐渐降低，而且动画还可以使用控制。扫一扫查看效果打开微扫一扫关注早读君，每天早晨为你推送前端知识，度过挤地铁坐公交的时光今日励志语录有志者自有千计万计，无志者只感千难万难。文章原出处：腾讯ISUX 开始阅读之前你可以先扫一扫体验demoshowImg(https://segmentfault.co...

liuyix 2019-08-23 14:23 评论0 收藏0