- ####html5 DOM 选择器
- // querySelector() 返回匹配到的第一个元素
- var item = document.querySelector('.item');
- console.log(item);
- // querySelectorAll() 返回匹配到的所有元素, 是一个 nodeList 集合
- var items = document.querySelectorAll('.item');
- console.log(items[0]);
阻止默认行为 [/color][color=#ff0000]
- // 原生 js
- document.getElementById('btn').addEventListener('click', function (event) {
- event = event || window.event;
- if (event.preventDefault){
- // w3c 方法 阻止默认行为
- event.preventDefault();
- } else{
- // ie 阻止默认行为
- event.returnValue = false;
- }
- }, false);
- // jQuery
- $('#btn').on('click', function (event) {
- event.preventDefault();
- });
阻止冒泡 [/color]
- // 原生 js
- document.getElementById('btn').addEventListener('click', function (event) {
- event = event || window.event;
- if (event.stopPropagation){
- // w3c 方法 阻止冒泡
- event.stopPropagation();
- } else{
- // ie 阻止冒泡
- event.cancelBubble = true;
- }
- }, false);
- // jQuery
- $('#btn').on('click', function (event) {
- event.stopPropagation();
- });
鼠标滚轮事件 [color=#ff0000]
- $('#content').on("mousewheel DOMMouseScroll", function (event) {
- // chrome & ie || // firefox
- var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta> 0 ? 1 : -1)) ||
- (event.originalEvent.detail && (event.originalEvent.detail> 0 ? -1 : 1));
- if (delta> 0) {
- // 向上滚动
- console.log('mousewheel top');
- } else if (delta <0) {
- // 向下滚动
- console.log('mousewheel bottom');
- }
- });
检测浏览器是否支持 svg[/color]
- function isSupportSVG() {
- var SVG_NS = 'http://www.w3.org/2000/svg';
- return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
- }
- // 测试
- console.log(isSupportSVG());
检测浏览器是否支持 canvas[color=#ff0000]
- function isSupportCanvas() {
- if(document.createElement('canvas').getContext){
- return true;
- }else{
- return false;
- }
- }
- // 测试, 打开谷歌浏览器控制台查看结果
- console.log(isSupportCanvas());
检测是否是微信浏览器 [/color]
- function isWeiXinClient() {
- var ua = navigator.userAgent.toLowerCase();
- if (ua.match(/MicroMessenger/i)=="micromessenger") {
- return true;
- } else {
- return false;
- }
- }
- // 测试
- alert(isWeiXinClient());
jQuery 获取鼠标在元素上的坐标 [color=#ff0000]
- $('#ele').click(function(event){
- // 获取鼠标在图片上的坐标
- console.log('X:' + event.offsetX+'\n Y:' + event.offsetY);
- // 获取元素相对于页面的坐标
- console.log('X:'+$(this).offset().left+'\n Y:'+$(this).offset().top);
- });
验证码倒计时代码 [/color]
- <!-- dom -->
- <input id="send" value="发送验证码" type="button">
- // 原生 js 版本
- var times = 60, // 临时设为 60 秒
- timer = null;
- document.getElementById('send').onclick = function () {
- // 计时开始
- timer = setInterval(function () {
- times--;
- if (times <= 0) {
- send.value = '发送验证码';
- clearInterval(timer);
- send.disabled = false;
- times = 60;
- } else {
- send.value = times + '秒后重试';
- send.disabled = true;
- }
- }, 1000);
- }
- // jQuery 版本
- var times = 60,
- timer = null;
- $('#send').on('click', function () {
- var $this = $(this);
- // 计时开始
- timer = setInterval(function () {
- times--;
- if (times <= 0) {
- $this.val('发送验证码');
- clearInterval(timer);
- $this.attr('disabled', false);
- times = 60;
- } else {
- $this.val(times + '秒后重试');
- $this.attr('disabled', true);
- }
- }, 1000);
- });
常用的一些正则表达式 [color=#ff0000]
- // 匹配字母, 数字, 中文字符
- /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
- // 验证邮箱
- /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
- // 验证手机号
- /^1[3|5|8|7]\d{9}$/
- // 验证 URL
- /^http:\/\/.+./
- // 验证身份证号码
- /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
- // 匹配中文字符的正则表达式
- /[\u4e00-\u9fa5]/
- // 匹配双字节字符 (包括汉字在内)
- /[^\x00-\xff]/
js 时间戳, 毫秒格式化 [/color]
- function formatDate(now) {
- var y = now.getFullYear();
- var m = now.getMonth() + 1; // 注意 js 里的月要加 1
- var d = now.getDate();
- var h = now.getHours();
- var m = now.getMinutes();
- var s = now.getSeconds();
- return y + "-" + m + "-" + d + "" + h +":"+ m +":" + s;
- }
- var nowDate = new Date(1442978789184);
- alert(formatDate(nowDate));
js 限定字符数 (注意: 一个汉字算 2 个字符)[color=#ff0000]
- <input id="txt" type="text">
- // 字符串截取
- function getByteVal(val, max) {
- var returnValue = '';
- var byteValLen = 0;
- for (var i = 0; i <val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen> max) break;
- returnValue += val[i];
- }
- return returnValue;
- }
- $('#txt').on('keyup', function () {
- var val = this.value;
- if (val.replace(/[^\x00-\xff]/g, "**").length> 14) {
- this.value = getByteVal(val, 14);
- }
- });
js 判断是否移动端及浏览器内核 [/color]
- var browser = {
- versions: function() {
- var u = navigator.userAgent;
- return {
- trident: u.indexOf('Trident')> -1, //IE 内核
- presto: u.indexOf('Presto')> -1, //opera 内核
- webKit: u.indexOf('AppleWebKit')> -1, // 苹果, 谷歌内核
- gecko: u.indexOf('Firefox')> -1, // 火狐内核 Gecko
- mobile: !!u.match(/AppleWebKit.Mobile./), // 是否为移动终端
- ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
- android: u.indexOf('Android')> -1 || u.indexOf('Linux')> -1, //android
- iPhone: u.indexOf('iPhone')> -1 , //iPhone
- iPad: u.indexOf('iPad')> -1, //iPad
- webApp: u.indexOf('Safari')> -1 //Safari
- };
- }
- }
- if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
- alert('移动端');
- }
之前我用过一个检测客户端的库 觉得挺好用的, 也推荐给大家 叫 device.js, 大家可以 Googel 或 百度
GItHub 仓库地址: https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置 [color=#ff0000]
- // 它返回一个对象, 其中包含了 left,right,top,bottom 四个属性
- var myDiv = document.getElementById('myDiv');
- var x = myDiv.getBoundingClientRect().left;
- var y = myDiv.getBoundingClientRect().top;
- // 相当于 jquery 的: $(this).offset().left,$(this).offset().top // js 的: this.offsetLeft,this.offsetTop
HTML5 全屏 [color=#ff0000][/color]
- function fullscreen(element) {
- if (element.requestFullscreen) {
- element.requestFullscreen();
- } else if (element.mozRequestFullScreen) {
- element.mozRequestFullScreen();
- } else if (element.webkitRequestFullscreen) {
- element.webkitRequestFullscreen();
- } else if (element.msRequestFullscreen) {
- element.msRequestFullscreen();
- }
- }
- fullscreen(document.documentElement);
本文由 前端先生 编辑整理
来源: http://www.qdfuns.com/article/44328/8df12158e345b11535b43286db392dd7.html