DOM
关注
分享
扫一扫
文章平均质量分 61
李天下xue
努力有时候真的无法胜过天赋，但努力可以让有天赋的人看的起你
展开
-
前端系统复习之事件委托
1.概念事件委托也叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 用一个形象的例子说明： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会...原创 2018-06-24 19:16:46 · 249 阅读 · 0 评论 -
15.轮播图
和选项卡的一样，都是选中某个按钮，对应的图片改变 so，1234切换的就做完了，那么左边的上一张图和下一张图切换该咋做呢，怎么知道当前显示的是第几张图呢，只有知道当前图的索引，加1就知道下一张图咧 没有优化过的轮播图代码如下（重复代码没封装成函数）<!DOCTYPE html><html lang="en&quo原创 2018-05-21 20:24:45 · 222 阅读 · 0 评论 -
14.右键菜单
var oUl1 = document.getElementById("ul1"); document.oncontextmenu = function(){ oUl1.style.display = "block"; }当鼠标右键时菜单被显示出来“` var oUl1 = document原创 2018-05-21 20:26:46 · 310 阅读 · 0 评论 -
13.选项卡
当点击按钮时，选中的选项按钮颜色改变，并且底下的页面也随之改变，只有被选中的那个对应界面才显示，其余的都隐藏 要知道，上面点哪个，下面对应的就要改变，所以，有什么方法能知道当前点击的是哪个索引呢，用 aLi[i].index = i;这句存放当前点击页面的索引，当点击li时，就会找到下面对应的Div了 下面是选项卡的全部代码<!DOCTYPE html...原创 2018-05-21 20:28:21 · 1705 阅读 · 0 评论 -
12.DOM节点
一、获取DOM节点以前学过获取DOM元素的4种方法 获取的得到的数组，可以通过下标来得到单个对象 现在呢，介绍两个新的方法（1）querySelector（html5语法）返回DOM元素，如果有多个，返回第一个（2）querySelectorAll 返回数组二、节点类型常见节点类型和属性 * 元素节点（标签）节点类型是1 * 属性节点，...原创 2018-05-23 13:31:55 · 318 阅读 · 0 评论 -
11.无缝滚动
so，全部代码如下<!DOCTYPE html><html lang="en"><head> &am原创 2018-05-26 14:48:38 · 177 阅读 · 0 评论 -
10.原生动画效果（用定时器做）
想让一个块级元素的宽逐渐变大的动画效果，不用css3,用原生JS做的话，就要用定时器用offsetWidth能取到元素宽度offsetWidth是啥呢？内容宽度+padding+border <!DOCTYPE html><html lang="en"&原创 2018-05-26 14:54:35 · 1092 阅读 · 0 评论 -
9. this 指向问题
1.在函数里this指向window更改this指向的三个方法 2.定时器里的this指向window 3.在事件中，this指向当前对象（是对当前对象的引用） 所以啊，要记住，当你点击子元素时，虽然他会由于事件冒泡而发生父元素的事件，但是this却是指向触发事件的对象4.在对象里，this指向当前对象....原创 2018-05-26 15:59:49 · 214 阅读 · 0 评论 -
8.回到顶部
你需要知道两个知识点1滚动条距上面的距离 2滚动条移动到指定位置的函数在标准浏览器下var iScrollTop = document.documentElement.scrollTop;在IE浏览器中，这样写document.body.scrollTop那用哪个呢，得先判断下当前浏览器支不支持 if(document.documentEl...原创 2018-05-26 17:00:15 · 147 阅读 · 0 评论 -
7.事件
一、绑定事件正常你给一个对象绑定两个相同的事件，下面的会覆盖上面的2.如果你用addEventListener的话就解决了用addEventListener可以同时给一个对象绑定两个相同的事件，且都能输出来addEventListener有三个参数，最后那个可不写但是这个函数呢，有兼容性，他只在标准浏览器下可以，在IE下不行，但是呢，有一个方...原创 2018-05-26 21:21:47 · 152 阅读 · 0 评论 -
6.事件冒泡and 捕获
一、冒泡如图，点击div3（蓝色）时，三个div的事件都被触发了 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&原创 2018-05-26 21:48:41 · 162 阅读 · 0 评论 -
5.放大镜
要实现这样的效果，当鼠标在左边的区域滑动时，有一个小遮罩层跟着鼠标移动，且右边的区域显示左边区域的放大效果 用一张小图和一张大图做，这样不会失真<!DOCTYPE html><html lang="en"><head> <met原创 2018-05-27 10:17:50 · 198 阅读 · 0 评论 -
4. 拖拽
拖拽，顾名思义，就是小滑块跟着你鼠标走，呈现一种拖拽的赶脚呗，那怎么实现呢（当鼠标在小滑块上面任意地方着落，小滑块即跟着鼠标的移动而移动，鼠标点哪是未知的，当鼠标松开时，小滑块定那不动）固定语法鼠标距离左面的距离是e.clientX 在鼠标没点小滑块之前，小滑块距离左面的距离是offsetLeft这样，不论鼠标点哪，你都能知道，鼠标距离小滑块左边的距离disX= e.client...原创 2018-05-27 12:23:08 · 213 阅读 · 0 评论 -
3.垂直折叠导航菜单
要实现以下效果的导航当点击水果时，弹出水果列表，当再次点击时，菜单合上需要掌握的知识点####DOM节点相关知识，元素节点节点类型1，文本节点3####找下一个兄弟节点的方法（封装函数） function next(elem){ do{ elem = elem.nextSibling; ...原创 2018-05-28 19:27:12 · 3578 阅读 · 0 评论 -
2.事件委托
委托，顾名思义，就是一个人不想干啥事就把他交给另一个人办了呗你需要掌握点DOM节点的知识#####创建元素节点createElement #####把一个元素xx追加到对象yy上 yy.appendChild( xx);现在生成一个li节点，然后，把他追加给父元素ul，这样，ul里的孩子节点就有仨了现在我们想，当点击每个li的时候，都能弹出对应li里面的内容...原创 2018-05-29 11:04:40 · 237 阅读 · 0 评论 -
this指向及改变this指向的方法
原先总结过this指向问题，但看了大佬们写的之后，觉得自己遗漏了很多点，所以，结合大佬们的，重写一遍一、函数的调用方式决定了 this 的指向不同：普通函数调用，此时 this 指向 window function fn() { console.log(this); // window } fn(); // window.fn...原创 2018-06-28 11:57:02 · 55111 阅读 · 8 评论