前端
关注
分享
扫一扫
koukou0419
这个作者很懒，什么都没留下…
展开
-
侧边栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 10:09:19 · 162 阅读 · 0 评论 -
事件冒泡，事件捕获
//事件处理模型// 1.事件冒泡 ：结构上（非视觉上）存在父子关系嵌套关系元素，会把该事件冒泡向父元素，自子元素冒泡向父元素（自底向上），就算该子元素不绑定事件，也会出现冒泡。// 2.事件捕获：只有谷歌好使 ，点击子元素，事件会先从父元素开始捕获，直至到该子元素执行（自顶向下）//一个事件对象只能处理一个事件模型，不能同时冒泡和捕获//触发顺序，先捕获，后冒泡...原创 2019-06-02 09:55:07 · 127 阅读 · 0 评论 -
事件对象
//事件对象 //IE系统不会把事件对象传给e，而是传给 window.event div.onclick=function(e){ var event=e||window.event; console.log(event); }原创 2019-06-02 09:55:18 · 117 阅读 · 0 评论 -
拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .wraper{ width:300px; height:200px; background-c...原创 2019-06-02 09:59:29 · 93 阅读 · 0 评论 -
input输入框的事件onblur/onchange
用户名：<input type="text" className="one" value="请输入用户名" style="color:#424242" onblur="if(this.value==''){this.value='请输入用户名';this.style.color='#424242'}" onfocus="if(this.value=='请输入用户名'){this.value...原创 2019-06-02 09:56:01 · 3264 阅读 · 0 评论 -
换肤
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="cs1.css" id="11"><!-- 给link添加id --&...原创 2019-06-02 09:56:20 · 412 阅读 · 0 评论 -
函数传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width: 10px; height: 100px; border:1px so...原创 2019-06-02 09:57:33 · 78 阅读 · 0 评论 -
邮箱复选框 全选 不选 反选判断 每个复选框的checked属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ width: 10px; height: 100px; border:1px so...原创 2019-06-02 09:56:30 · 188 阅读 · 0 评论 -
轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } li{ ...原创 2019-06-02 10:00:50 · 108 阅读 · 0 评论 -
点击button顺序生成li并把input里面的值变成li的内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 09:56:53 · 758 阅读 · 0 评论 -
removeChild()/a/parenNode
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 09:57:03 · 319 阅读 · 0 评论 -
获取表格属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 09:57:11 · 185 阅读 · 0 评论 -
隔行变色，鼠标移入变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .a...原创 2019-06-02 10:01:28 · 214 阅读 · 0 评论 -
鼠标事件 贪吃蛇原理
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...原创 2019-06-02 10:06:00 · 421 阅读 · 0 评论 -
缓冲运动 （基础重点）（速度取整不然跳动）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 10:06:08 · 220 阅读 · 0 评论 -
函数封装屏幕可视区窗口的坐标window.innerWidth（clientWidth）
//求可视区窗口的尺寸 window.innerWidth window.innerHeightwindow.innerWidth = width + padding + border + 纵向滚动条宽度window.innerHeight = height + padding + border + 横向滚动条高度 //IE8以下 ...原创 2019-06-02 09:55:26 · 257 阅读 · 0 评论 -
盒子移动
<div style="background-color: green;width:200px;height:100px;position:absolute;left:0;top:0"></div><script> //让盒子移动 //获取当前盒子的left和top值（getComputedStyele(elem,null).left），然后再这基础之...原创 2019-06-02 09:55:53 · 511 阅读 · 0 评论 -
悬浮框 滚动条的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 10:09:07 · 367 阅读 · 0 评论 -
CSS中定位浮动position float 总结
1.浮动有哪些现象？1.脱离标准文档流，不占页面位置,元素也不再具有自己本身的属性(如span不再具有行内元素特点) 2.文字环绕，设置浮动属性的初衷3."贴边"现象，设置浮动属性后，首选找有浮动盒子的边找到了就会贴到浮动盒子的边上，若找不到，则找父元素的边4.收缩现象，只显示内容的宽度，浮动带来的问题：不去计算浮动元素的高度，导致撑不起父盒子的高度2.清除浮动的方式？1...原创 2019-05-31 09:23:23 · 241 阅读 · 0 评论 -
BFC和（absolute/float）关系
1.BFC：Box Formatting Context定义：直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干分类：BOX盒子，页面的基本构成元素。分为 inline 、 block 和 inline-block三种类型的BOXFC: Formatt...原创 2019-05-30 16:01:05 · 358 阅读 · 0 评论 -
js执行三部曲
//js执行三部曲//语法分析，预编译，解释执行//预编译test();function test(){console.log('a');//a}//变量编译console.log(a);//undefinedvar a=123;//var a;//a=123//函数声明整体提升//变量 声明提升//函数名和变量名重复的时候function a(){}var a=...原创 2019-06-02 09:53:24 · 201 阅读 · 0 评论 -
判断对象类型的三种方法
//A instanceof B//判断A对象是不是B构造出来的//判断A对象的原型链上有木有B function Person(){} var person=new Person(); var obj={}; console.log(person instanceof Person);//true console.log(person instanceo...原创 2019-06-02 09:53:32 · 2669 阅读 · 0 评论 -
数组去重
var arr=[1,1,1,1,"1","2",2,3];//var boj={// 1:"abc";// 1:// "1":"abc"// 2:"abc"// 3:"abc"//}//构建一个去重完的数组Array.prototype.unique=function(){var tempObj={};var arr1=[];for(var i=0;i<th...原创 2019-06-02 09:53:40 · 117 阅读 · 0 评论 -
实现获取某个节点的所有子元素节点，不能使用children属性(nodeType)
//函数封装//实现获取某个节点的所有子元素节点，不能使用children属性var div=document.getElementsByTagName('div')[0];function retElementChild(node){var temp={length:0,push:Array.prototype.push,splice:Array.prototype.splic...原创 2019-06-02 09:53:16 · 1608 阅读 · 0 评论 -
Dom节点类型
//Dom学习document//获取节点类型//document.querySelector("按照css选择器选择");但是不是实时的//var div=document.querySelctorAll('div';)一.关系类节点选择，包括所有的关系，遍历节点树节点类型：1.元素节点--12.属性节点--23.文本节点--34.注释节点--85.document--...原创 2019-06-02 09:53:09 · 265 阅读 · 0 评论 -
查找第n层的父节点
function retParentElementNode(n,node){ var parent; while(n&&node){//父节点不能为空且n不能为0 node=node.parentElement; n--; } return node;...原创 2019-06-02 09:53:52 · 201 阅读 · 0 评论 -
myChild 原型链找孩子节点
//封装mychildren函数，在原型连上编程，实现浏览器兼容Element.prototype.myChilden=function(){var arr=[];var child=this.childNodes;var len=child.length; for(var i=0;i<len;i++){if(child[i].nodeType===1)arr.p...原创 2019-06-02 09:51:48 · 129 阅读 · 0 评论 -
insertAfter
var span=document.getElementsByTagName('span')[0]; var div=document.getElementsByTagName('div')[0];var strong=document.createElement('strong');var em=document.getElementsByTagName('em')[0];...原创 2019-06-02 09:54:35 · 113 阅读 · 0 评论 -
计时器setInterval()
时间分：<input type="text" value="00">秒：<input type="text" value="00"><script> var minNode=document.getElementsByTagName('input')[0]; var secNode=document.getElementsByTagName('...原创 2019-06-02 09:53:02 · 330 阅读 · 0 评论 -
函数获取css样式 windowgetComputedStyle(elem,null)/window.currentStyle[prop]
一. dom.style.prop//可读可写，但是说只获取和改变行间的样式，外部的都获取不到 //复合属性需要写成小驼峰式 div.style.backgrondColor="red";//JS给某元素修改样式1.div.style.width="100px";修改行间样（优化差）2.div.className="demo";//动态添加切换cl...原创 2019-06-02 09:54:43 · 470 阅读 · 0 评论 -
让滚动条滚动window.scoll(x,y)
//让滚动条滚动到到x,y的距离 //window.scoll(x,y) //window.scollTo(x,y) //window.scollBy(x,y)在之前的数据基础上累加数据滚动原创 2019-06-02 09:54:50 · 216 阅读 · 0 评论 -
元素视觉上宽度和坐标elem.offset
//查看元素视觉上的宽度尺寸包括: border宽度，内边距宽度padding ,盒子宽度width dom.offsetWidth dom.offsetHeight //查看距离 对于没有定位父级的元素，返回相对文档的坐标，对于有定位父级，返回相对于父级元素的坐标 dom.offsetLeft dom.offsetTop ...原创 2019-06-02 09:55:46 · 256 阅读 · 0 评论 -
获取滚动条坐标位置window.pageXOffset/document.body.scollLeft
<!-- //window.pageXOffset//滚动条的滚动距离 IE9以下不兼容//document.body.scollLeft/scollTop //IE8/5/4 //document.documentElement.scollLeft/scollTop //IE7/6//document.body.scollLeft+document.documentEleme...原创 2019-06-02 09:55:38 · 548 阅读 · 0 评论 -
表格的增加删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 10:03:16 · 132 阅读 · 0 评论 -
表格忽略大小写 模糊查找 多关键字 筛选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 09:59:41 · 255 阅读 · 0 评论 -
表格排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0px; padding:0; } .active...原创 2019-06-02 10:03:24 · 92 阅读 · 0 评论 -
ajax.html初始剖析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-05-10 09:39:53 · 131 阅读 · 0 评论 -
ajax.html 原理简介
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-05-10 09:30:49 · 289 阅读 · 0 评论 -
深度拷贝
//深度拷贝//考虑引用值var obj={name:"abc",age:123,sex:"F"card:['visa','[1,2]']}var obj1={}//遍历对象function deepClone(target, origin) { var target=target||{}; //容错处理以防如果外部没有传入...原创 2019-05-10 09:55:24 · 129 阅读 · 0 评论 -
类数组
function test(){console.log(arguments);arguments.push(7);}test(1,2,3,4,5,6);//类数组//属性要为索引（数字）属性，，必须要有length属性，最好加上pushvar obj={"0":'a',"1":'b',"2":'c',"length":3,"push":Array.prot...原创 2019-05-10 10:05:55 · 148 阅读 · 0 评论