HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = documentquerySelector('item');consolelog(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = documentquerySelectorAll('item');consolelog(items[0]);1234567
阻止默认行为
// 原生jsdocumentgetElementById('btn')addEventListener('click', function (event) { event = event || windowevent； if (eventpreventDefault){ // w3c方法 阻止默认行为
eventpreventDefault();
} else{ // ie 阻止默认行为
eventreturnValue = false;
}
}, false);// jQuery$('#btn')on('click', function (event) { eventpreventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocumentgetElementById('btn')addEventListener('click', function (event) { event = event || windowevent； if (eventstopPropagation){ // w3c方法 阻止冒泡
eventstopPropagation();
} else{ // ie 阻止冒泡
eventcancelBubble = true;
}
}, false);// jQuery$('#btn')on('click', function (event) { eventstopPropagation();
});1234567891011121314151617
鼠标滚轮事件
$('#content')on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (eventoriginalEventwheelDelta && (eventoriginalEventwheelDelta > 0 1 : -1)) || (eventoriginalEventdetail && (eventoriginalEventdetail > 0 -1 : 1));
if (delta > 0) {
// 向上滚动
consolelog('mousewheel top');
} else if (delta < 0) { // 向下滚动
consolelog('mousewheel bottom');
}
});123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = '>
js获取数组中的一部分元素，有2种方法：slice和filter函数，下面分别介绍。
sliceslice的定义和用法如下，用于截取数组的一段
执行
var arr = [1,2,3,4,5];
arrslice(1,4);
这2行代码，可以看到截取了1到4下标的代码
filterfilter则用于过滤数组中的一部分元素，剩下的元素就是需要的那部分元素。
现在尝试下面代码，可以将一个数字数组中的偶数过滤掉，只留下奇数。
var arr = [1,2,3,4,5];
arrfilter(e=>e%2==0)
1、拖动后记录x,y值
给div加上mousePosition事件
function mousePosition(evt){
evt = evt || windowevent;
return {
x : evtclientX + documentbodyscrollLeft - documentbodyclientLeft,
y : evtclientY + documentbodyscrollTop - documentbodyclientTop
}
}
2、打开页面div定位
$(“div”)attr("top",y)attr("left",x);
扩展资料
在用js获取元素的位置之前，元素在页面的位置的计算公式，如下：
元素在页面的位置=此元素相对浏览器视窗的位置+浏览器滚动条的值；
用getBoundingClientRect()方法来获得某个元素相对浏览器视窗的位置 ｛这个方法返回的是一个对象，即Object，该对象具有4个属性：top，left，right，bottom ｝。
<html >
<head>
<meta >
<title>Demo</title>
</head>
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px;
background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>
</body>
</html>
<script>
documentgetElementById('demo')onclick=function (){
if (documentdocumentElementgetBoundingClientRect) {
alert("left:"+thisgetBoundingClientRect()left)
alert("top:"+thisgetBoundingClientRect()top)
alert("right:"+thisgetBoundingClientRect()right)
alert("bottom:"+thisgetBoundingClientRect()bottom)
var X= thisgetBoundingClientRect()left+documentdocumentElementscrollLeft;
var Y = thisgetBoundingClientRect()top+documentdocumentElementscrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
有原生DOM获取以及用js库比如jquery
原生DOM的话首先获取标签对象，id或者name或其他
例：
1
<p id="targetp" >2333333</p>
<script>
var element = documentgetElementById("targetp");
var tagname = elementtagName;
alert(tagname);
</script>
jQuery获取
$("#content-header")get(0)tagName
如果已经获取到对象可以直接获取标记名
<p onclick="alert('您单击的是：'+thistagName);">中华人民共和国</p>
objclientWidth //获取元素的宽度
objclientHeight //元素的高度
objoffsetLeft //元素相对于父元素的left
objoffsetTop //元素相对于父元素的top
objoffsetWidth //元素的宽度
objoffsetHeight //元素的高度
区别：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
offset比client多了border的宽度
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=eoffsetTop;
if(eoffsetParent!=null) offset+=getTop(eoffsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=eoffsetLeft;
if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);
return offset;
}
//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=eoffsetTop;
if(eoffsetParent!=null) offset+=getTop(eoffsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=eoffsetLeft;
if(eoffsetParent!=null) offset+=getLeft(eoffsetParent);
return offset;
}
以上就是关于前端开发中常用到的js特效有哪些全部的内容，包括:前端开发中常用到的js特效有哪些、web前端开发工程师需要掌握哪些技术、JS中如何获取数组中的一部分元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）