![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
koukou0419
这个作者很懒,什么都没留下…
展开
-
换肤
<!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 · 351 阅读 · 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 · 87 阅读 · 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 · 99 阅读 · 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 · 159 阅读 · 0 评论 -
Dom节点类型
//Dom学习document//获取节点类型//document.querySelector("按照css选择器选择");但是不是实时的//var div=document.querySelctorAll('div';)一.关系类节点选择,包括所有的关系,遍历节点树节点类型:1.元素节点--12.属性节点--23.文本节点--34.注释节点--85.document--...原创 2019-06-02 09:53:09 · 216 阅读 · 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 · 1569 阅读 · 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 · 97 阅读 · 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 · 2614 阅读 · 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 · 161 阅读 · 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 · 331 阅读 · 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 · 274 阅读 · 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 · 433 阅读 · 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 · 3188 阅读 · 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 · 63 阅读 · 0 评论 -
事件对象
//事件对象 //IE系统不会把事件对象传给e,而是传给 window.event div.onclick=function(e){ var event=e||window.event; console.log(event); }原创 2019-06-02 09:55:18 · 91 阅读 · 0 评论 -
事件冒泡,事件捕获
//事件处理模型// 1.事件冒泡 :结构上(非视觉上)存在父子关系嵌套关系元素,会把该事件冒泡向父元素,自子元素冒泡向父元素(自底向上),就算该子元素不绑定事件,也会出现冒泡。// 2.事件捕获:只有谷歌好使 ,点击子元素,事件会先从父元素开始捕获,直至到该子元素执行(自顶向下)//一个事件对象只能处理一个事件模型,不能同时冒泡和捕获//触发顺序,先捕获,后冒泡...原创 2019-06-02 09:55:07 · 89 阅读 · 0 评论 -
函数封装屏幕可视区窗口的坐标window.innerWidth(clientWidth)
//求可视区窗口的尺寸 window.innerWidth window.innerHeightwindow.innerWidth = width + padding + border + 纵向滚动条宽度window.innerHeight = height + padding + border + 横向滚动条高度 //IE8以下 ...原创 2019-06-02 09:55:26 · 218 阅读 · 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 · 488 阅读 · 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 · 511 阅读 · 0 评论 -
元素视觉上宽度和坐标elem.offset
//查看元素视觉上的宽度尺寸包括: border宽度,内边距宽度padding ,盒子宽度width dom.offsetWidth dom.offsetHeight //查看距离 对于没有定位父级的元素,返回相对文档的坐标,对于有定位父级,返回相对于父级元素的坐标 dom.offsetLeft dom.offsetTop ...原创 2019-06-02 09:55:46 · 194 阅读 · 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 · 180 阅读 · 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:19 · 137 阅读 · 0 评论