lordly

，所以作为前端开发的人员，学好javascript，基本上你在以后的前端开发工作中会事半功倍，所以我在这里分享一下我的前端开发心得和开发前端工作应该作重点学习前端技术的部分。 如果你是刚入行的全前端开发者：我想对你说，你应该首先学习好前端开发中的“三剑客”，即html，css， js，其中你刚学html和css的时候你会感觉很简单，的确如此，可能你在学习js的时候你就会感觉很痛苦， 当时我初学前端的时候，在学习到javascript(即js)中的dom的时候也很痛苦，所以在学习js中的dom操作 的时候，首先应该学习dom操作的一些属性或者方法，然后在写代码之前应该想一想实现这个功能的思 路，第一步应该写什么，然后写什么，最后写什么，只有这样分步骤的实现和执行，你才可能写的出来， 这是做为刚入前端开发的时候，这样效果挺好，随着你写的越来越多的时候，这些都会很快就能写出来。 所以我在这里向刚学习前端的人员介绍一下学习前端的路线： html- css-js(重点dom)-jquery-ajax-vue/react(框架)。

1. 例如： html部分： <div class="box"> </div> css部分： .box{ background-color: pink; width:200px; height:200px; border-radius: 50%; position: absolute; top:20px; left:100px; } js部分： var box = document.getElementsByClassName('box')[0]; function drag (ele){ ele.onmousedown = function(e){ var e = e || window.event; //此处是为了兼容IE，因为IE中事件对象是作为全局对象( window.event )存在的； var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //获取鼠标相对盒子的位置； var boxX = pageX - box.offsetLeft; var boxY = pageY - box.offsetTop; document.onmousemove = function(e){ var e = e || window.event; var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft; var pageY = e.pageY || e.clientY + document.documentElement.scrollTop; //将鼠标当前的坐标值减去鼠标相对盒子的位置，得到盒子当时的位置并将其赋值给盒子，实现移动效果 box.style.left = pageX - boxX +'px'; box.style.top = pageY - boxY + 'px'; } }; document.onmouseup = function () { //清除盒子的移动事件; document.onmousemove = null; }; } ; drag(box)