常用正则
“^\d+$” //非负整数(正整数 + 0)
“^[0-9]_[1-9][0-9]_$“ //正整数
“^((-\d+)|(0+))$” //非正整数(负整数 + 0)
“^-[0-9]_[1-9][0-9]_$“ //负整数
“^-?\d+$“ //整数
“^\d+(.\d+)?$“ //非负数(正整数+正浮点数 + 0)
“^(([0-9]+.[0-9][1-9][0-9])|([0-9][1-9][0-9].[0-9]+)|([0-9][1-9][0-9]))$“//正数
“^((-\d+(.\d+)?)|(0+(.0+)?))$“ //非正数(负数 + 0)
“^(-(([0-9]+.[0-9][1-9][0-9])|([0-9]_[1-9][0-9].[0-9]+)|([0-9]*[1-9]0-9])))$”//负数
“^(-?\d+)(.\d+)?$” //实数
“^[A-Za-z]+$” //由 26 个英文字母组成的字符串
“^[A-Z]+$” //由 26 个英文字母的大写组成的字符串
“^[a-z]+$” //由 26 个英文字母的小 ...
addEventListener兼容
冒泡捕获
IE采用冒泡型事件 Netscape使用捕获型事件 DOM使用先捕获后冒泡型事件,冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型: body->div->button (Netscape事件流)
DOM事件模型: body->div->button->button->div->body (先捕获后冒泡),在IE8及以下的事件处理中,事件含有on,如onclick等。
兼容代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354<button id="btn">11</button> <script> var EventUtil = { addHandler: function(element, type, handler) ...
class操作方法
classList 操作方法123456789101112131415161718var CL = { addClass: function(ele, cls) { ele.classList.add(cls); }, removeClass: function(ele, cls) { ele.classList.remove(cls); }, hasClass: function(ele, cls) { return ele.classList.contains(cls); }, toggleClass: function(ele, cls) { return ele.classList.toggle(cls); } };
class自定义操作方法ele.className.replace(/\s+/,&qu ...
HTMLCollection
类数组对象HTMLCollection:常见的可以返回HTMLColection的方式:elem.getElementsByTagName();document.scripts;//返回页面里所有的script元素的集合。document.links;//返回全部a元素。document.images;//返回所有图片元素document.forms;//返回所有form元素。tr.cells;//返回所有tr内的所有td子元素的集合。select.options;//返回select的全部选项。
getElementsByClassName ie8兼容
js代码1234567891011121314151617181920212223242526272829303132var getElementsByClassName = function(opts) { var searchClass = opts.searchClass; // 存储要查找的类名 var node = opts.node || document; // 存储要出查找的范围 var tag = opts.tag || '*'; // 存储一定范围内要查找的标签 var result = []; // 判断浏览器支不支持getElementsByClassName方法 if (document.getElementsByClassName) { // 如果浏览器支持 var nodes = node.getElementsByClassName(searchClass ...
domReady.js
domReady.js是一个被封装的方法,类似于jQuery中的ready123456789101112131415161718192021222324252627282930313233343536373839404142434445function myReady(fn){ //对于现代浏览器,对DOMContentLoaded事件的处理采用标准的事件绑定方式 if ( document.addEventListener ) { document.addEventListener("DOMContentLoaded", fn, false); } else { IEContentLoaded(fn); } //IE模拟DOMContentLoaded function IEContentLoaded (fn) { var d = window.document; ...
innerText兼容textContent
12345678910111213var content = document.getElementById("content"); function getInnerText(element){ return typeof (element.textContent == "string") ? element.textContent : element.innerText; } function setInnerText(element, text){ if (typeof element.textContent == "string"){ element.textContent = text; } else { element.innerText = text; } ...
登录框-使用惰性生成
登录框-使用惰性生成如果先创建,等需要的时候弹出是浪费资源的。
如果等点登录按钮创建,关闭再删除,再点击创建,关闭删除,非常耗费内存。
这样就可以用到前面的单例模式,进行判断,如果没有就创建,有了就直接用。
按需创建的单例模式1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale= ...
html5shiv
所有现代浏览器都支持 HTML5。
此外,所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。
正因如此,您可以帮助老式浏览器处理”未知的” HTML 元素。
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> ...
nodeType
nodeType
定义:nodeType属性返回节点的类型
语法:node.nodeType
支持:目前所有主流游览器均支持nodeType属性
常用的节点类型返回值如下
节点类型
描述
返回值
Element
代表元素
1
Attr
代表属性
2
Text
达标元素或属性值的文本内容
3
Comment
代表注释
8
Document
代表整个文档(DOM树的根节点)
9
案例1234567891011121314151617<div id="wrap"><!--div下的ul-->我是div <ul> <li>第一个</li> <li>第二个</li> <li>第三个</li> </ul></div><script> var wrap=document.get ...