js
js
该睡觉觉了
这个作者很懒,什么都没留下…
展开
-
iterator 迭代器
可迭代的内置类型包括:Array,String,Set和Map等,对象不可迭代原创 2022-12-04 19:57:13 · 162 阅读 · 0 评论 -
获取时间戳和封装日期
获取时间戳和封装日期。原创 2022-11-27 20:56:23 · 138 阅读 · 0 评论 -
NaN类型
NaN类型(not a number) console.log(Number('huandk')); //NaN console.log(1 / 'jfhdkd'); //NaN console.log(NaN == NaN); //false console.log(Number.isNaN(1 / 'jfhdkd')); //true console.log(Object.is(1 / 'jfhdkd',NaN)); /原创 2022-11-20 15:28:54 · 162 阅读 · 0 评论 -
键盘事件
键盘事件onkeydown:按键按下onkeyup:按键抬起onkeypress:按键按下属性值:keycode:获取按键编码document.onkeydown = function(ev){ var ev = window.event || ev; console.log(ev.key); //获取到具体的按键信息,ie获取不到undefined console.log(ev.keyCode);//按键编码不区分大小写,都是大写编码 “0”--48 “A”--65原创 2020-12-27 20:49:53 · 119 阅读 · 0 评论 -
事件代理(委托)
事件代理(委托)例:给100000个li添加点击事件,大量的循环会卡顿,性能不好事件代理原理:把事件添加给父元素(事件冒泡,子元素能触发父元素的事件),当事件发生的时候,通过ev.target找到具体触发事件的子元素去处理事件特点:提高性能,事件可以发生在未来实现://将事件添加给父元素oUl.onclick = function(ev){ var ev = window.event || ev; //当事件发生的时候,可以通过target获取到具体触发事件的子元素 v原创 2020-12-27 20:49:24 · 70 阅读 · 0 评论 -
DOM事件流
DOM事件流标签.addEventListener(“click”,fun,是否捕获);是否捕获:默认是false false:冒泡 true:捕获DOM事件流:两个机制事件捕获机制:事件发生的时候,事件从window开始,根据结构一层一层往里查找,一直到目标元素位置(不处理事件)事件冒泡机制:由目标元素开始处理事件,处理完成以后将事件根据结构依次传递给父元素,一直到window window–document–body–标签var oDiv = docum原创 2020-12-27 20:48:49 · 63 阅读 · 0 评论 -
事件绑定与取消
1.2 事件绑定与取消1.2.1 事件绑定标准浏览器:标签.addEventListener(事件类型[不加on],事件处理函数,是否捕获)ie浏览器:标签.attachEvent(事件类型[加on],事件处理函数)区别:标准浏览器不加on,ie加on标准浏览器有捕获,ie没有捕获标准浏览器按添加顺序执行,ie低版本倒序执行标准浏览器this指触发事件的对象,ie this指window//1.标准浏览器绑定:标签.addEventListener(事件类型[不加on],事原创 2020-12-27 20:48:11 · 347 阅读 · 0 评论 -
事件高级--事件对象
1.事件高级1.1 事件对象事件处理函数:事件发生的时候调用的函数,事件处理函数事件对象:window.event 在事件处理函数中使用的一个特殊对象,当事件发生的时候,浏览器会将所有和当前事件相关的信息存储在事件对象event(事件类型,鼠标位置,事件目标。。。。)chrome/ie:window.eventff:通过事件处理函数的第一个参数传入兼容:var ev = window.event||evdocument.onclick = function(ev){ conso原创 2020-12-27 20:47:08 · 68 阅读 · 0 评论 -
表单
1.表单1.1 快速获取表单元素//1.DOM快速获取表单元素 表单.name名称console.log(oForm.user); //输入框 用户名console.log(oForm.password); //输入框 密 码console.log(oForm.sex); //[input, input, value: "女"]console.log(oForm.sex.value);1.2 表单事件方法表单事件oForm.onsubmit : 表单提交事件原创 2020-12-27 20:46:16 · 185 阅读 · 0 评论 -
懒加载
懒加载//获取标签var oImgs = document.getElementsByTagName("img");// oImgs[0].src = oImgs[0].getAttribute("_src");//2.默认显示第一屏图片 如果图片在屏幕的可视高度范围内就可以显示var clientH = document.documentElement.clientHeight;for (var i = 0; i < oImgs.length; i++) { if (oIm原创 2020-12-27 20:45:28 · 57 阅读 · 0 评论 -
BOM三大系列--scroll
2 BOM三大系列 (掌握)2.3 scroll系列滚动事件:onscroll窗口缩放事件:onresize页面的滚动距离document.documentElement.scrollTop || document.body.scrollTop/* scroll系列 元素.scrollWidth/Height : 获取元素的实际内容宽 元素.scrollTop: 元素被卷去的高 元素.scrollLeft: 元素被卷去的宽 获取页面的滚动距离原创 2020-12-26 18:39:47 · 172 阅读 · 0 评论 -
BOM三大系列--offset
2 BOM三大系列 (掌握)2.2 offset系列元素占位宽高元素.offsetWidth: 元素占位宽 content+padding+border元素.offsetHeight: 元素占位高 content+padding+border元素位置元素.offsetTop元素.offsetLeft/* offset系列(元素的占位宽高) 标签.offsetWidth:元素的占位宽 content+padding+border 标签.offsetHeigh原创 2020-12-26 18:38:57 · 230 阅读 · 0 评论 -
BOM三大系列--client
2 BOM三大系列 (掌握)2.1 client系列元素可视宽高元素.clientWidth:元素可视宽 content+padding元素.clientHeight:元素可视高 content+padding屏幕的可视宽高document.documentElement.clientWidth;/* client系列(元素可视宽高) 元素.clientWidth: 可视宽 content+padding 元素.clientHeight: 可视高 c原创 2020-12-26 18:37:58 · 110 阅读 · 0 评论 -
BOM--window提供的系统方法(了解)
1.BOMBOM:Browser Object Model 浏览器对象模型console.log(window); //窗口 js中最大的一个对象//document和window//window--窗口 js中最大的一个对象//document--文档,html文档//所有的全局函数和全局变量都属于window,一般会省略window 1.1 window提供的系统方法(了解)1.1.1 系统提供的对话框//警告框alert("今天周末,考试吗?");//带确认对原创 2020-12-26 18:37:09 · 105 阅读 · 0 评论 -
操作属性节点
1.5 操作属性节点操作属性获取:var 变量 = 标签.属性名设置:标签.属性名 = 属性值DOM操作属性节点获取:标签.getAttribute(“属性名”)设置:标签.setAttribute(“属性名”,“属性值”)删除:标签.removeAttribute(“属性名”)//1.获取idconsole.log(oDiv.getAttribute("id"));;console.log(oDiv.getAttribute("class"));//2.设置oDi原创 2020-12-26 18:35:34 · 103 阅读 · 0 评论 -
复制与替换
1.4 复制与替换替换:父节点.replaceNode(newChild,refChild)//替换:父节点.replaceChild(newChild,refChild)var cDiv = document.createElement("div");cDiv.innerHTML = "我是一个小可爱";document.body.replaceChild(cDiv,oDiv)复制:被复制的节点.cloneNode(true)//复制节点:被复制的节点.cloneNode(boo原创 2020-12-26 18:35:00 · 596 阅读 · 0 评论 -
删除节点
1.3删除节点删除自身:标签.remove() ie不兼容删除子节点:标签.removeChild(子节点) var oUl = document.getElementsByTagName("ul")[0];//1.删除标签本身 标签.remove(); 不建议使用,ie不兼容//oUl.remove(); //2.删除子元素: 父元素.removeChild(子节点)oUl.removeChild(oUl.children[2]);...原创 2020-12-26 18:34:29 · 266 阅读 · 0 评论 -
添加节点
1.2 添加节点1.2.1 创建节点创建标签节点:document.createElement(“标签名”);创建文本节点:document.createTextNode(“文本内容”)//2.创建节点: document.createElement("标签名")var cLi = document.createElement("li");//cLi.innerHTML = "完成一个项目";//3.创建文本节点:document.createTextNode("文本内容")var原创 2020-12-26 18:33:52 · 1553 阅读 · 0 评论 -
DOM获取元素
1.DOMDOM:Document Object Model 文档对象模型节点:nodeDOM主要是针对标签的一些操作:获取,添加,修改,删除,替换1.1 获取1.1.1 DOM获取元素通过id名:document.getElementById(“id名”):具体的实际的标签,获取的时候有就是有,没有就是没有通过TagName:document.getElementsByTagName(“标签名”):整个文档中,获取的是元素集合,使用一定要加下标,动态获取,可以获取到后期添加的标原创 2020-12-26 18:33:21 · 109 阅读 · 0 评论 -
数组迭代方法
数组迭代方法every:针对数组做些判断,如果结果都为ture,最后才为true//1.every:针对数组做些判断,如果结果都为ture,最后才为truevar arr = [89,98,96,100,88];//如果所有的成绩都在80以上,拉出去打一顿var n = 0;var isD = arr.every(function(value,index,array){ //value:数组项,index下标 array:当前操作的数组 return value>80原创 2020-12-26 18:32:23 · 87 阅读 · 0 评论 -
排序方法
排序方法//1.默认情况下,按字符串排序var arr = [6, 3, 9, 21, 7, 4, 8, 5, 11];arr.sort();console.log(arr); //[11, 21, 3, 4, 5, 6, 7, 8, 9]按number排序//2.按number排序arr.sort(function(a,b){//a,b是两个相邻的数组元素 //return a-b; //a-b>0换位置 从小到大 return b-a; //从大到小});原创 2020-12-24 22:27:16 · 67 阅读 · 0 评论 -
数组排序算法
数组排序算法1 选择排序//1.选择排序 ,拿第一个和后面所有的进行比较,如果前面比较大,交换位置var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];for (var i = 0; i < arr.length; i++) { //和后面所有的元素进行比较 for (var j = i + 1; j < arr.length; j++) { if (arr[i] > arr[j]) { //如果前面的比较大,交换位置原创 2020-12-24 22:25:10 · 71 阅读 · 0 评论 -
数组方法
数组方法indexOf():找一个元素在数组首次出现的位置,出现返回对应的下标,不出现返回-1splice(start,deleteCount,items):删除数组中的一组元素,使用items进行替换,返回被删除元素组成的数组参数start:开始删除的下标,默认为0deleteCount:可选的,默认删除到最后items:可选,用于替换的元素//1.删除var arr = [1,2,3,4,5];var delArr = arr.splice(2); //从下标为2的位置开始原创 2020-12-24 22:23:32 · 104 阅读 · 0 评论 -
前瞻后顾
前瞻后顾 //1.(?=) : 前瞻 正向肯定预查 要检测的字符的后面必须是什么var str = "qew3re4@ewr5rwe";var reg = /\d(?=@)/;//检测数字,@前面的数字console.log(reg.exec(str)); //4//2.(?!):负前瞻 正向否定预查 要检测的字符的后面不能是什么var reg = /\d(?![a-z])/;//检测数字,后面不能是字母console.log(reg.exec(str)); //4//3.验证用户原创 2021-01-02 20:04:51 · 125 阅读 · 0 评论 -
正则元字符
2.3 正则元字符单个字符串“.”:匹配除换行符以外的任意一位字符// . : 匹配除换行符以外的任意字符 \nvar str = "\nnihaoma\nimok";var reg = /./;console.log(reg.exec(str)); //[n index:1]var str = "webtt1116";//web??1116var reg = /web..1116/;console.log(reg.exec(str));//["webtt1116"][原创 2020-12-30 22:53:41 · 152 阅读 · 0 评论 -
正则的修饰符和索引方法
2.2 修饰符g: global 执行一个全局的匹配i: ignore case 执行一个不区分大小写的匹配//g: global 执行一个全局的匹配var str = "今天学习明天学习后天学习";var reg1 = /学习/;var reg2 = /学习/g;console.log(str.replace(reg1,"放假")); //今天放假明天学习后天学习console.log(str.replace(reg2,"放假")); //今天放假明天放假后天放假//i: ign原创 2020-12-30 22:53:09 · 155 阅读 · 0 评论 -
正则的概念和创建
2.7动态混合创建3.实例1.构造函数标签作为对象的属性添加一个入口方法 init 在这个方法中进行循环事件操作事件里面的操作,会放到一个方法里面2.实例化对象 function TabSwitch(){ //1.添加属性 this.menus = document.getElementsByTagName("button"); this.items = document.getElementsByTagName("div"); console.lo原创 2020-12-30 22:51:55 · 88 阅读 · 0 评论 -
创建对象的实例
实例1.构造函数标签作为对象的属性添加一个入口方法 init 在这个方法中进行循环事件操作事件里面的操作,会放到一个方法里面2.实例化对象 function TabSwitch(){ //1.添加属性 this.menus = document.getElementsByTagName("button"); this.items = document.getElementsByTagName("div"); console.log(this); //T原创 2020-12-30 22:50:18 · 200 阅读 · 0 评论 -
数组栈方法(头部、末尾添加删除元素)
数组栈方法(头部、末尾添加删除元素)//数组的方法基本上都在原数组的进行操作//1.push,pop在数组的末尾添加或删除元素var arr = [1,2,3];//push(items):在数组的末尾添加一个或多个元素,返回当前数组的长度arr.push(4,5);console.log(arr); // [1, 2, 3, 4,5]//pop():在数组末尾删除一个元素,返回被删除的元素var del = arr.pop();console.log(arr);//[1, 2, 3,原创 2020-12-24 22:23:01 · 607 阅读 · 0 评论 -
创建数组
1.数组对象1.1 创建数组 //1.字面量创建var arr1 = [1,2,3,4,5];//2.关键字new创建var arr2 = new Array("A","b","C","d","e");console.log(arr1,arr2);//3.如果创建的时候参数只有一个并且是number类型,创建长度为n的空数组var arr3 = new Array(5);console.log(arr3,arr3[0]); //undefined//4.length 获取数组的长原创 2020-12-24 10:35:46 · 1433 阅读 · 0 评论 -
String
1.String对象1.1 创建字符串对象//string:包装类对象,字面量创建的 字符串不能说是一个真正的字符串对象,//调用字符串方法的时候,会暂时包装成String对象//1.字面量var str1 = "web1116";console.log(str1); console.log(typeof str1);console.log(str1.charAt(1)); //e//2.关键字new 创建var str2 = new String("web1116");consol原创 2020-12-23 20:41:33 · 5490 阅读 · 0 评论 -
Date
1.Date对象1.1 创建时间对象//1.创建时间对象(获取到当前这一秒的时间)var oDate = new Date();console.log(oDate);1.2 获取固定格式时间对象//2.获取固定格式的时间console.log(oDate.toDateString()); //Tue Dec 22 2020console.log(oDate.toLocaleDateString()); //2020/12/22console.log(oDate.toTimeString原创 2020-12-23 09:48:50 · 150 阅读 · 0 评论 -
Math
1.Math对象对象的分类内置对象:Number,String,Boolean,Object,Array,Function,Date,Math,RegExp,Error宿主对象:window,document DOM,BOM全局对象:global1.1 数学对象Math1.1.1 取整//1.取整(掌握)console.log(parseInt(3.9999999)); //3 舍弃小数部分console.log(Math.floor(3.9999)); //3 向下取整 舍弃原创 2020-12-23 09:46:04 · 61 阅读 · 0 评论 -
定时器
定时器定时器的分类setTimeout:延迟定时器使用场景:广告弹窗语法:setTimeout(函数,时间ms) 延迟某个时间执行函数一次setInterval:间歇执行定时器使用场景:轮播图,倒计时,抽奖语法:setInterval(函数,时间) 间隔某个时间就执行函数一次1.2 定时器使用setTimeout<div>广告</div><script> var oDiv = document.getElement原创 2020-12-22 22:19:51 · 93 阅读 · 0 评论 -
函数返回值和封装
1.5 函数返回值1.5.1 return需要用到函数内部的变量或者是函数的时候需要使用return 进行数据返回函数返回值:return 可以将函数内部的变量或函数返回到函数外面去使用 语法:return 需要返回的内容 特点:return 一次只能返回一个,写多个最后只会返回最后一个 函数中只要遇到return函数就结束了//return 一次只能返回一个,写多个最后只会返回最后一个function sum(a,b){原创 2020-12-18 21:47:44 · 623 阅读 · 1 评论 -
作用域和预解析
1.4 作用域和预解析1.4.1 作用域作用域:变量或函数的有效使用范围(全局作用和局部作用域)全局变量/函数全局变量/函数: 在函数外声明的变量/函数,叫全局变量/函数,可以在当前页面内任意地方使用和修改,会一直存储在内存,知道页面关闭 //全局变量var x = 10;console.log(x); //10;x = 30;console.log(x); //30function fun(){ console.log(x);//30 x = 100;}f原创 2020-12-18 21:45:31 · 103 阅读 · 2 评论 -
函数注意点
1.3 函数注意点形参个数与实参个数不一致的时候,一一对应,没有被赋值的就是undefined,多了的不管function sum(a,b){//var a,b; console.log(a+b);}sum(10); //NaN 实参给形参赋值的时候是一一对应 a=10,b=undefined : NaNsum(10,20);//30 a = 10,b=20sum(10,20,30);//30 a = 10,b=20//同名会覆盖(函数和函数,函数和变量),后原创 2020-12-18 21:43:05 · 151 阅读 · 1 评论 -
函数的参数
1.2 函数参数1.2.1 参数如果函数中出现不确定的值,就可以作为参数形参(形式参数): function 函数名(参数1,参数2)实参(实际参数): 函数名(10)//单个参数function sum(n){//var n; var s = 0; for(var i = 1;i<=n;i++){ s += i; } console.log(s);}//调用sum(100);sum(200);//多个参数,多个参数之间用,隔开原创 2020-12-18 21:41:35 · 237 阅读 · 1 评论 -
函数的声明和使用
1.函数函数的概念:函数是由事件驱动的或当他被调用时可重复使用的代码块使用场景:作为事件处理函数 标签.事件 = function(){}函数封装代码复用1.1函数的声明和使用普通声明方式声明:function 函数名(){代码块}调用:函数名()表达式声明声明:var 变量 = function (){ 代码块}调用:变量名() //1.普通函数声明方式function study(){ console.log("沉迷学习,日渐消瘦");}/原创 2020-12-18 21:40:11 · 199 阅读 · 1 评论 -
this
1.thisthis:这个this:特殊对象,指向当前当用函数的对象(this没有一个固定的指向,所处的位置不同,代表的值不一样,取决于当前调用函数的对象)在事件函数中this指向触发事件的对象(点谁就是谁)var oBtns = document.getElementsByTagName("button"); //循环给button添加点击事件for(var i = 0;i<oBtns.length;i++){ oBtns[i].onclick = functi原创 2020-12-18 21:39:11 · 1886 阅读 · 1 评论