23-纯js实现拖拽的对话框 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;...
22-纯js-图片跟着鼠标飞的效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ ...
20-js-动画函数的封装 一、匀速动画函数的封装 //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //先清理定时器，这样无论怎么点击按钮都不会变快 //定时器的id值存储到对象的一个属性中 element.timeId = setInte...
19-js-关于定时器setInterval、 一、第一种定时器 setInterval(函数，事件)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器</title> <script> //BOM中有两个定时器---计时器 //定时...
18-js-关于userAgent、history、location <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--=============================================BOM============...
17-js轮播图 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; ...
16-js百度搜索框 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...
15事件冒泡，事件委托，事件捕获· 事件委托：就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，大大的减少与dom的交互次数，提高性能事件冒泡：就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div事件捕获：从父级...
14-js 为元素绑定多个事件兼容处理 为元素绑定事件(DOM):一种,但是不兼容,有两种1 、对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持为按钮绑定点击事件：参数1:事件的类型—事件的名字,没有on参数2:事件处理函数—函数(命名函数,匿名函数)参数3:布尔类型,目前就写falsemy$("btn").addEventListener("c...
13动态创建列表 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } ul { ...
12点击按钮创建一个列表 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 400px; ba...
12-元素创建 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /* * * 元素创建-----为了提高用户的体验 ...
11-全选和全不选 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
10-隔行变色（节点） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="变色" id="btn"&g...
09-关于节点 一、节点基础内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点知识</title></head><body> <div id="dv"> <s...
08-tab切换案例实现 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { ...
07-自定义属性 一、自定义属性的映入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style-type: none; cursor: poi...
关注
