javascript
前端程序员路易
目标web前端工程师,月薪过万
展开
-
前端面试题:原生js数组去重的方法
今天区面试碰上这道题,分享两个方法:1.Set去重<script type="text/javascript"> arr=[1,5,22,1,2,2,4,7,9,55,11,22,44] let res = new Set(arr) console.log(res)</script>效果:2.for循环嵌套,利用splice去重:<script type="text/javascript"> function newArr(arr){ for(原创 2022-01-05 21:38:52 · 185 阅读 · 0 评论 -
JavaScript定时器案例2
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-co原创 2021-12-20 23:20:22 · 175 阅读 · 0 评论 -
Javascript定时器案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #box1{ width:100px; height:100px; background-color:red;原创 2021-12-20 22:38:13 · 98 阅读 · 0 评论 -
Javascript定时器案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* 使图片可以自动切换 */ //获取img标签 var img1 = document.get原创 2021-12-18 15:58:49 · 256 阅读 · 0 评论 -
Javascript定时调用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取count var count = document.getElementById("count"); //原创 2021-12-16 23:11:59 · 781 阅读 · 0 评论 -
Javascript键盘移动div案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width:100px; height:100px; background-color:red; position:absolute; } </style>原创 2021-12-14 22:34:44 · 984 阅读 · 0 评论 -
JavaScript键盘事件例子
键盘事件:onkeydown- 按键被按下- 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发- 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他的会非常的快这种设计是为了防止误操作的发生。onkeyup- 按键被松开键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下除了keyCode,事件对象中还提供了几个属性altKeyctrlKeyshiftKe原创 2021-12-13 23:04:06 · 145 阅读 · 0 评论 -
JavaScript滚轮事件例子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; } </style> <scri原创 2021-12-13 23:00:56 · 203 阅读 · 0 评论 -
JavaScript拖拽
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; }原创 2021-12-12 22:14:03 · 225 阅读 · 0 评论 -
javascript事件的传播
事件的传播-关于事件的传播网景公司和微软公司有不同的理解-微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。-网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素- W3C综合了两个公司的方案,将事件传播分成了三个阶段1.捕获阶段- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件2.原创 2021-12-12 19:12:33 · 100 阅读 · 0 评论 -
JavaScript事件的绑定
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ /* * 点击按钮以后弹出一个内容 */ //获取按钮对象 var btn01 = do原创 2021-12-12 13:56:37 · 149 阅读 · 0 评论 -
JavaScript事件的委派
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> window.onload = function(){ var ul = document.getElementById("ul"); //点击按钮以后添加超链接 var原创 2021-12-12 13:09:09 · 274 阅读 · 0 评论 -
JavaScript冒泡
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width:200px; height:200px; background-color:yellowgreen; } #s1{ background-col原创 2021-12-12 13:07:45 · 399 阅读 · 0 评论 -
JavaScript绑定鼠标
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; /* * 开启box1的绝对定位 */ po原创 2021-12-09 23:36:44 · 248 阅读 · 0 评论 -
Javascript读取元素的样式
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>05_读取元素的样式</title> <style type="text/css"> #box1{ width:300px; height:200px; background-color:yellow; } </style> <原创 2021-12-09 21:28:06 · 98 阅读 · 0 评论 -
Javascript其他样式操作的属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>06_其他样式操作的属性</title> <style type="text/css"> #box1{ width:100px; height:100px; background-color:red; padding:10px; border: 1原创 2021-12-09 21:26:39 · 67 阅读 · 0 评论 -
Javascript的innerHTML
innerHTML使用该属性可以获取或设置元素内部的HTML代码。示例代码:<!doctype html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <p id="haikou">海南欢迎您</p></body>原创 2021-11-28 22:27:14 · 322 阅读 · 0 评论 -
Javascript dom增删改
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/css.css"/> <script type="text/javascript"> window.onload = function(){原创 2021-11-25 22:21:24 · 392 阅读 · 0 评论 -
Javascript查询的其他方法
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function(){ //获取body标签 //var body = document.getElementsByTagName("bod转载 2021-11-25 19:54:52 · 186 阅读 · 0 评论 -
Javascript全选练习
代码:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>全选练习</title><script原创 2021-11-24 22:30:15 · 108 阅读 · 0 评论 -
Javascript-DOM查询
获取元素节点通过documen对象调用1. getElementById()-通过id属性获取一个元素节点对象2. getElementsByTagName()-通过标签名获取一组元素节点对象3. getElementsByName()-通过name属性获取-组元素节点对象获取元素节点的子节点通过具体的元素节点调用1. getElementsBy TagName()方法,返回当前节点的指定标签名后代节点2. childNodes-属性,表示当前节点的所有子节点3. firstCh原创 2021-11-22 22:07:21 · 247 阅读 · 0 评论 -
JS字符串的相关方法
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>07_字符串的相关方法</title> <script type="text/javascript"> //‘创建-个字符串 var str = "are you going to scarborough fair"; //在底层字符串是以字符数组的形式保存的原创 2021-11-19 20:04:52 · 52 阅读 · 0 评论 -
js的for循环
循环代码块一定的次数<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var Beyond = ["黄家驹","黄家强","黄贯中","叶世荣"]; for(var i=0;i<Beyond.length;i++){ document原创 2021-11-17 21:13:16 · 177 阅读 · 0 评论 -
js的unshift()的使用
将一个或多个元素添加到数组的开头,并返回该数组的新长度。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>unshift()将元素添加到数组的开头</title> <script type="text/javascript"> var arr = ["康熙","雍正","乾隆","嘉庆"]; arr.unshift("爱新觉罗家原创 2021-11-17 21:02:03 · 1161 阅读 · 0 评论 -
.splice() 方法使用
有删除、替换、添加的作用。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> //删除 // var arr = ["康熙","雍正","乾隆","嘉庆"]; // arr.splice(1,2); // console.log(arr);原创 2021-11-17 20:55:06 · 137 阅读 · 0 评论 -
JS数组 slice() 方法
从一个数组中选择元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr = ["康熙","雍正","乾隆","嘉庆"]; document.write(arr.slice(1)) </script> </hea原创 2021-11-17 20:40:12 · 170 阅读 · 0 评论 -
js数组shift()方法
删除数组的第一个元素:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var arr = ["康熙","雍正"]; var a = arr.shift(); console.log(arr); </script> <原创 2021-11-17 20:32:21 · 484 阅读 · 0 评论 -
JS的push()使用
向数组添加新元素的最佳方法是使用 push() 方法:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>数组的末尾添加新的元素</title> <script type="text/javascript"> var arr = new Array(2) arr[0] = "康熙" arr[1] = "雍正"原创 2021-11-17 20:22:57 · 267 阅读 · 0 评论 -
split()分割字符串数组
用于把一个字符串分割成字符串数组。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>split()分割字符串数组</title> <script type="text/javascript"> var str = "Are you going to Scarborough Fair?"; document.write(str.s原创 2021-11-17 19:53:36 · 370 阅读 · 0 评论 -
js的pop()方法使用
删除数组的最后一个元素 -.pop()var a = ["黄家强", "叶世荣", "黄贯中","黄家驹"];document.write(a + "<br>");a.pop();document.write(a);原创 2021-11-17 19:39:15 · 1441 阅读 · 0 评论 -
.concat() 合并数组
1.把 concat() 中的参数连接到数组 a 中var a = [9,8,7,6];document.write( a.concat(5,4));效果:2.连接2个数组 var arr = new Array(3) arr[0] = "AA" arr[1] = "BB" arr[2] = "CC" var arr2 = new Array(3) arr2[0] = "dd" arr2[1] = "ee" arr2[2] = "ff" documen原创 2021-11-17 19:18:50 · 499 阅读 · 0 评论 -
JavaScript的原型对象
关系图:原型prototype 我们所创建的每一个函数, 解析器都会向函数中添加一个属性prototype 这个属性对应着一个对象,这个对象就是我们所谓的原型对象 如果函数作为普通函数调用prototype没有任何作用 当函数以构造函数的形式调用时,它所创建的对象中都会有一个隐含的属性, 指向该构造函数的原型对象,我们可以通过___ proto__ 来访问该 属性 原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象 我们可原创 2021-11-07 23:53:28 · 74 阅读 · 0 评论 -
debugger在js中是什么
debugger 语句调用任何可用的调试功能,例如设置断点。 如果没有调试功能可用,则此语句不起作用。语法:debugger;例如:当 debugger 被调用时, 执行暂停在 debugger 语句的位置。原创 2021-11-05 11:21:12 · 1325 阅读 · 0 评论 -
js中的this
在标准函数中,thise引用的是把函数当成方法调用的上下文对象,这时候通常称其为this值(在网页的全局上下文中调用函数时,this指向windows )。定义在全局上下文中的函数sayColor()引用了this对象。函数被调用时才能确定。如果在全局上下文中调用sayColor(),这结果会输出"red",因为this指向window,而this . color相当于window .color 。而在把sayColor()赋值给o之后再调用o.sayColor(), this会指向o,即this.col原创 2021-11-01 21:16:09 · 116 阅读 · 0 评论 -
js给图片设置鼠标滑过去的变化
<style type="text/css"> #show{ border:5px solid red; }</style><script type="text/javascript"> function showcolor(which,color,width){ if(document.all||document.getElementById){ which.style.borderColor=color; which.style.原创 2021-10-31 00:43:45 · 283 阅读 · 0 评论 -
js鼠标经过切换图片
<script type="text/javascript"> function showimg(src){ document.getElementById("bigimg").src=src; }</script><body> <img src="./Images/1.jpg" id="bigimg" style="width:470px;height:350px;"> <hr > <img src="./Image原创 2021-10-31 00:16:21 · 932 阅读 · 0 评论 -
js的arguments对象
<script type="text/javascript"> function pay(){ if(arguments.length == 0){ console.log(`一`); } if(arguments.length == 1){ console.log(`二,${arguments[0]}`); } if(arguments.length == 2){ console.log(`三,${arguments[0]}-${arguments[1]原创 2021-10-29 22:36:41 · 68 阅读 · 0 评论 -
js函数的本质
<script type="text/javascript"> //1.赋值 var fun = function(){ console.log(450448); } var fun2 = fun; fun(); fun2(); //2.传参(回调函数) function 阿明(狗子) { console.log("阿明"); console.log("饭赞"); 狗子(); } var fun1 = func原创 2021-10-29 22:18:42 · 182 阅读 · 0 评论 -
js函数的调用计算两个任意值的和
<script type="text/javascript"> function add(a,b){ return a + b; } var c = add(5,5); var d = add(c,540); var e = add(d,80); console.log(c,d,e);</script>原创 2021-10-29 21:55:04 · 414 阅读 · 0 评论 -
reg.exec()在正则表达式中
reg.exec() 的作用是专门在正则中查找字符串中所有敏感词的内容和位置的函数。找到一个敏感词,就会返回一个数组: 数组:[ 0: "敏感词的内容", index: 敏感词的下标位置i ][\u4e00-\u9fa5]匹配中文字符,代表一个汉字。<script type="text/javascript"> var str = "小明:我滴是日本人。小校:我是美国人。小台:我是泰国人" var reg = /国[\u4e00-\u9fa5]/; var arr = reg.e原创 2021-10-29 21:35:55 · 3596 阅读 · 0 评论