逛社区时看到的文章,我修改调整了内容,如果大家觉得也有帮助 可以收藏下~
HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素,是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);阻止默认行为
// 原生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();});阻止冒泡
// 原生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();});鼠标滚轮事件
$('#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
function isSupportSVG() { var SVG_NS = 'http:///matthewhudson/device.jsgetBoundingClientRect() 获取元素位置
//它返回一个对象,其中包含了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.offsetTopHTML5全屏
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);