前端常用技巧

获取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: 如果<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中滚动条更流畅;

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 2,188评论 0 43
  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、节...
    LuckyS007阅读 386评论 0 0
  • 百战程序员_ Java1573题 QQ群:561832648489034603 掌握80%年薪20万掌握50%年薪...
    Albert陈凯阅读 13,262评论 3 33
  • 郭相麟 对人有了要求 就会容易心生不满 与其要求别人 不如要求自己 要求自己 修正自己 有劳而谦卑 心灵不再雾霾 ...
    郭相麟阅读 24评论 0 0
  • 文/新鲜 今天看到一篇文章说最好的感情状态是透过爱你我更爱自己和生活。而读书会给我的感受就是这样,我越来越喜欢和...
    新鲜wendy阅读 26评论 0 0