// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item')console.log(item)// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item')console.log(items[0])1234567
阻止默认行为
// 原生jsdocument.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()
})1234567891011121314151617
阻止冒泡
// 原生jsdocument.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()
})1234567891011121314151617
鼠标滚轮事件
$('#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')
}
})123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg' return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect
}
// 测试console.log(isSupportSVG())1234567
检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){return true
}else{return false
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas())12345678910
检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true
} else {
return false
}
}// 测试alert(isWeiXinClient())1234567891011
jQuery 获取鼠标在图片上的坐标
$('#myImage').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY)
//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top)
})1234567
验证码倒计时代码
<!-- dom --><input id="send" type="button" value="发送验证码">12
// 原生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)
}1234567891011121314151617181920
// 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)
})12345678910111213141516171819202122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^([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]/1234567891011121314151617181920
js时间戳、毫秒格式化
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(2016, 5, 13, 19, 18, 30, 20)
console.log(nowDate.getTime())// 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate))123456789101112131415
js限定字符数（注意：一个汉字算2个字符）
<input id="txt" type="text">//字符串截取function getByteVal(val, max) {
var returnValue = '' var byteValLen = 0 for (var i = 0i <val.lengthi++) {if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2else 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)
}
})12345678910111213141516171819
js判断是否移动端及浏览器内核
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('移动端')
}123456789101112131415161718192021
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 百度
GItHub仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了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.offsetTop123456
HTML5全屏
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)12345678910111213
这个确实比较多，常用的特效就是 淡入淡出啊、渐变啊、滑动、展开伸缩、移动、拖动、最常用。其实你看下jQuery ui的官网基本就了解了所有常用的特效了按类型可以分为下面几大类的特效集合：
Ui 类的：
背景
对话框
筛选及排序
反馈
弹出层
悬停
布局
图表
加载
圆边
滚动
标签
文本链接
工具提示
网络类型
输入类型的：
拾色器
定制和风格
日期和时间
拖和放
通用输入
自动完成
密码
投票率
搜索
选择框
快捷键
触摸
丰富的输入
上传
验证
媒体类型：
音频和视频
幻灯片和轮播图
图片展示
图像
地图
滑块和旋转
Tabs
导航：
水平导航
垂直导航
文件树
分页
手风琴菜单
其他
1.toggle():
toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态
2.fadeln()与fadeOut()
这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性
3.fadeToggle()
此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果
4.fadeTo()
fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值
5.slideDown()与 slideUp()
slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素
6.slideToggle()
slideToggle()方法跟slideDown()与 slideUp() 两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown()与 slideUp() 的效果， 这个方法是通过点击事情控制元素的隐藏和显示
7.animate()
这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。
8.stop()
停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。
