一丢丢前端经常使用的小技能

猎取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.userAgentMicroMessenger能够来推断是不是为WeChat;

  • document.referrer: 猎取泉源的URL;

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

  • input.value: 猎取input的值; input.defaultValue: 猎取input的默许值;

  • selectEl.value: 假如<select><option>没有value属性则猎取的是文本内容,不然猎取value属性的值;(都是猎取选中的<option>)

  • selectEl.options: 猎取<select>中一切<option>标签,是一个类数组的鸠合;

  • selectEl.options.selectedIndex: 猎取选中<option>的索引;

  • selectEl.options[selectEl.options.selectedIndex].textContent: 猎取选中<option>的文本内容;

正则

  • *: 婚配0到屡次

  • +: 婚配1到屡次

  • ?: 婚配0或1次

  • g: 全局婚配,即不是搜到一个婚配就返回,而是搜出悉数婚配 平常返回是一个数组

  • i: 疏忽大小写

  • m: 多行婚配

HTML

  • <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">: 让IE浏览器以最新的引擎衬着, chrome=1能够激活chrome Frame;

  • <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  • <input autocapitalize="off">: 禁用IOS中键盘自动大写;

  • <input>假如有<form>包裹, 翻开软键盘后显现为’前去’; 不然显现为’换行’;

CSS

  • -webkit-appearance: none: 移除元素的默许款式, 特别IOS上的表单元素, 默许会运用体系款式;

  • -webkit-tap-highlight-color: rgba(0, 0, 0, 0): 禁用元素按下后的背景色彩, 默许在挪动装备上按下后会有一个灰色背景;

  • -webkit-touch-callout:none;: 禁用长按页面时的弹出菜单(iOS下有用) ,img和a标签都要加

  • background-size: 取值contain时, 宽高顺应内容, 会悉数显现; 假如取值cover则宽高完整掩盖背景, 能够会被裁切;

  • -webkit-overflow-scrolling: touch: 让IOS中滚动条更流通;

    原文作者:YuanWing
    原文地址: https://segmentfault.com/a/1190000004546217
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞