获取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中滚动条更流畅;
网友评论