JavaScript学习总结
关注
分享
扫一扫
Amanda&Rachel
这个作者很懒，什么都没留下…
展开
-
常见bug1：Uncaught TypeError: (intermediate value)(...) is not a function
大家在写代码的时候一定会遇到很多bug吧，今天遇到一个很常见的bug，分享给大家，把遇到的bug分析整理一下，下次遇到就不会麻爪了吧，不过bug可是消灭不完的哦，哈哈Uncaught TypeError: (intermediate value)(…) is not a function翻译为：未捕获的错误类型（JavaScript错误代码）：(中间值)(…)不是一个函数出现这个bug的原因很常见，就是你忘记加 ；（分号） 啦！！！在编写代码中，如果同时定义了变量、匿名函数或者闭包函数，并且该变原创 2021-02-01 11:34:02 · 3049 阅读 · 0 评论 -
手把手教你实现tab选项卡效果的简单方式
原生js实现tab选项卡切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2021-01-18 19:52:27 · 261 阅读 · 2 评论 -
原生js实现图片懒加载
首先，先讲讲什么叫图片懒加载吧，当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。然后，为什么要实现图片懒加载呢？因为减少或延迟请求数，缓解浏览器的压力，增强用户体验。第一步，获取所有图片第二步， 获取 页面 可视区域高度第三步， 获取 滚动 高度<body> <img src="./img/loading.gif" lazyload-src="./img/1.jpg" alt=""> <img src=".原创 2021-01-18 19:42:59 · 170 阅读 · 0 评论 -
重要！node.js前端模块化及 commonJs && ES6 模块化
node.js运行在服务端的js基于谷歌v8引擎-解析js事件驱动 I/O 服务单线程node 学习内容I/O 服务I ==input输入/请求 o==output输出/响应请求： 请求地址:http://www.baidu.com:80/a.php?page=1&limit=20#zzhttpprotocol协议www.baidu.comhostname主机名:80Port端口www.baidu.com:80Hos原创 2021-01-18 19:07:14 · 175 阅读 · 0 评论 -
2021-01-16 JavaScript实例：jQuery实现京东等购物网站 放大镜
话不多说，直接上图相信大家在浏览大多数网站，尤其是购物网站一定经常见到这种放大镜效果，接下来代码奉上HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docume原创 2021-01-16 19:50:46 · 411 阅读 · 0 评论 -
2021-01-12 创建对象的6种方式
创建对象的6种方式对象：无序的属性的集合，key 字符串(不重复)，value 任何数据类型 表现方式：{ “key”:value,“key2”:value2,“key3”:function(){ } } : 映射 = 赋值1）new Object()var x="age";var obj=new Object(); obj.name="gao"; obj.x=18; // .字符串 obj[x]=16; // [变量]console.log(obj);原创 2021-01-12 21:28:26 · 121 阅读 · 2 评论 -
2021-01-09 JavaScript前端分页案例
嘿嘿嘿，鸽鸽鸽了好几天了，之前想着要挑战每天写一篇博文分享的，结果虽然一天不落，但也从一开始的分享变成应付了事的，发了好多都是面试题纯概念什么的所以，以后只会多多给大家分享有价值的文章，不再水文章了。。。正文开始今天依然是一个小案例，前端分页...原创 2021-01-09 21:18:11 · 206 阅读 · 1 评论 -
2021-01-04 JavaScript基础笔试题及答案笔记
题目1、null，undefined，”string"，20，true和false的共同点是（ ）A、都是对象B、都有相同的实例属性C、都是原始值D、都是函数2、下列哪个正确的引入了myScript.js（ ）A、3、下列哪个符号不是逻辑运算符（ ）A、%B、||C、 &&D、 !4、以下（）为JavaScript声明变量的语句。A、dim x;B、int x;C、var x;D、x;5、如下代码输出的结果是（ ）console.log(1原创 2021-01-04 19:06:51 · 3917 阅读 · 0 评论 -
2021-01-03JavaScript基础笔试题笔记
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style> </head> <body> </body> <script type="text/javascript"> /原创 2021-01-03 20:45:35 · 224 阅读 · 1 评论 -
2021-01-02JavaScript实例及解释：发送验证码，查找，搜索，隔行变色，修改
发送验证码 function setYzm(){ var yzmCode = String(Math.random()).slice(2,8) //生成6位随机数0.1213232323 console.log(yzmCode) yzm.value = yzmCode //把随机数赋给输入框 //注意：闭合标签 innerHTML form表单（input textarea select checkbox radio）操作.value setYzmBt原创 2021-01-02 21:02:53 · 163 阅读 · 0 评论 -
2021-01-01 JavaScript面试题6：get和post区别，JSONP原理，缓存，XSS和CSRF区别，HTTP与HTTPS的区别
24.get和post区别请求方式GETPOST参数位置参数拼接到url的后面参数在请求体中参数大小受限于浏览器url大小，一般不超过32K1G服务器数据接收接收1次根据数据大小，可分多次接收适用场景从服务器端获取数据向服务器提交数据安全性参数携带在url中，安全性低相对于GET请求，安全性更高25.JSONP原理由于浏览器的同源策略限制，不允许跨域请求；但是页面中的 script、img、iframe标签是例外，不受同源策略限制。原创 2021-01-01 23:01:02 · 198 阅读 · 0 评论 -
2020-12-31 JavaScript基本概念总结7：图片懒加载，图片预加载，cookie，localStorage，sessionStorage，JSON 数据格式
1.图片懒加载1.默认图片的真实地址放在自定义属性中 src放的是loading图片2.一开始没有滚动的时候，出现在视窗中的图片也会加载，当页面开始滚动的时候，遍历图片，如果图片出现在视窗中，就加载图片3.当图片距顶部的高度>= 可视区域 + 屏幕的高度时真实图片显示判断图片是否出现在视窗的函数，offset().top 是当前元素 图片 局顶部的距离4. data-isLoading=‘1’ 为开关，打开状态 后面自定义的图片地址赋值给前面的src实现效果加载图片的函数，就是把自定义原创 2020-12-31 20:59:01 · 111 阅读 · 0 评论 -
2020-12-30 JavaScript基本概念总结6：查找节点 6个方法，操作行内style属性，非行内样式，节点遍历，元素遍历，节点操作，点击按钮创建li，窗口位置，增删项目步骤
1.查找节点 6个方法document.getElmentById()document.getElementsByTagName()document.getElementsByClassName()document.getElementsByName()document.querySelector()document.querySelectorAll()2.操作行内style属性节点对象.style.属性 = ‘属性值’3.非行内样式非ie浏览器取行外样式 所有样式window.getC原创 2020-12-30 21:54:27 · 307 阅读 · 0 评论 -
2020-12-29 JavaScript基本概念:阻止默认事件,事件处理程序
阻止默认事件默认事件的类型举例w3c阻止默认事件ie低版本阻止默认事件方法阻止默认事件 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)，比如阻止表单提交，阻止链接跳转。 W3C的方法是event.preventDefault() IE的方法是event.returnValue=false; 兼容性写法 if(event.preventDefault){ event.preventDefault(); }els原创 2020-12-29 20:58:39 · 151 阅读 · 0 评论 -
2020-12-28 JavaScript基本概念 事件
11.1 事件事件概述事情发生并得到处理的操作，叫做事件，通俗的讲就是：事情来了，然后处理。 比如：手机铃声响了（事情来了）--------接电话（处理） 当用户点击按钮的时候，我们会说触发了按钮的onclick事件11.2 各种类型的事件11.2.1 窗口事件window onload 当页面加载完成（页面结构、图片、css文件） 触发 onscroll 当滚动条 滚动时 触发 onerror 当出现错误（img、input、 script、styl原创 2020-12-28 20:02:53 · 126 阅读 · 0 评论 -
2020-12-27 JavaScript实例：简单增删项目2--加入本地存储
完整代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; font-size: 16px; } .container{ padding:原创 2020-12-27 19:39:35 · 126 阅读 · 0 评论 -
2020-12-26 JavaScript基本概念5：cookie,sessionStorage和localStorage，0.1+0.2!=0.3怎么处理，数组的常用方法，new一个对象的过程，继承
19.谈谈cookie,sessionStorage和localStoragecookie用来保存登录信息，大小限制为4KB左右localStorage是Html5新增的，用于本地数据存储，保存的数据没有过期时间，一般浏览器大小限制在5MBsessionStorage接口方法和localStorage类似，但保存的数据的只会在当前会话中保存下来，页面关闭后会被清空。| **名称** | **生命期** | **大小** | **与服务器通信**原创 2020-12-26 18:52:29 · 139 阅读 · 0 评论 -
2020-12-25 JavaScript基本概念4：null和undefined区别，JS作用域的理解，call,apply和bind区别，深拷贝和浅拷贝，防抖和节流
14.null和undefined区别Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。用法：变量被声明了，但没有赋值时，就等于undefined。调用函数时，应该提供的参数没有提供，该参数等于undefined。对象没有赋值的属性，该属性的值为undefined。函数没有返回值时，默认返回undefined。Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。用法作为原创 2020-12-25 19:57:53 · 171 阅读 · 0 评论 -
2020-12-24 JavaScript实例：简单增删项目
css样式<style> .container{ /*整个页面div盒子*/ width: 40%; /*宽度占页面的40%，内容居中显示*/ margin: 0 auto;/*div居中*/ padding: 20px;/*内边距20px*/ } .myinput{ /*两个input输入框样式*/ width: 400px;/*宽高*/原创 2020-12-24 19:27:14 · 178 阅读 · 1 评论 -
2020-12-23 JavaScript基本概念3：Date()，计时器，BOM核心对象，BOM节点属性
1.Date()获取当前时间日期对象；获取日期对象方法；时间戳 永远不会出现重复 唯一1秒=1000毫秒；日期对象转换方法；随机整数函数的封装 函数的封装意思就是写个函数工具类，让你写个函数 ，让你写个工具 ， 让你写个封装 ，让你写个功能2.间歇调用，计时器setInterval(函数，时间毫秒)无限次调用；第一个参数是回调函数，第二个参数是毫秒，多少毫秒执行一次回调函数，使用计时器必须清除函数；setTimeout(函数，时间毫秒)：第一个参数是回调函数，第二个参数是毫秒值，意原创 2020-12-23 18:35:56 · 131 阅读 · 4 评论 -
2020-12-22 JavaScript面试题3：清除浮动，三栏布局，浏览器渲染机制，重绘和回流，JS数据类型，JS判断数据类型的方法
8.你怎么清除浮动1、在浮动元素后面添加 clear:both 的空 div 元素<div class="container"><div class="left"></div><div class="right"></div><div style="clear:both"></div></div>2、给父元素添加 overflow:hidden 或者 auto 样式，触发BFC。<div c原创 2020-12-22 19:16:46 · 194 阅读 · 2 评论 -
2020-12-21 JavaScript基本概念2：数组去重步骤，.数组排序，伪数组，string方法，.将url地址解析成对象形式（笔试题），.Object使用方法，Math
1.数组去重步骤1.创建一个空数组，放最后返回的数组2.遍历数组可以使用for map forEach等方法3.在循环中判断查找元素是否在数组中存在 indexof() includes() find()等方法4.如果元素在数组中不存在，则插入到新数组push() unshift()等方法5.直接使用 newArr = […new Set(arr)]或newArr = Array.from(new Set(arr))也可以实现数组去重2.数组排序1.sort()方法这个方法值只能排序第一位数原创 2020-12-21 18:47:23 · 136 阅读 · 0 评论 -
2020-12-20 JavaScript基本概念1：基本数据类型和引用数据类型，函数，立即执行函数，返回值，变量名和函数名同名，递归，数组方法，for in
1.基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址，如果两个变量保存的是同一个对象地址，当一个修改属性时，另一个也会受到影响如果函数内部完全替换，不影响外面的值，如函数内部修改某个值，会影响外面的值2.函数是一段可以反复调用的代码块。函数还能接受输入的参数，不同的参数会返回不同的值。3.立即执行函数函数定义完，立即被调用，这种函数叫做立即执行函数原创 2020-12-20 22:45:24 · 151 阅读 · 0 评论 -
2020-12-19 JavaScript面试题2：BFC，定位，flex布局
5.说说BFCBFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 BFC应用防止margin重叠清除内部浮动自适应两（多）栏布局防止字体环绕触发BFC条件根元素float的值不为noneoverflow的值不为visibledisplay的值为inline-block、table-cell、table-captionposition的值为absolute、fixedB原创 2020-12-19 16:59:35 · 176 阅读 · 1 评论 -
2020-12-18 JavaScript面试题1：浏览器的内核，盒模型，CSS3的新特性，CSS选择器及其优先级
js面试题1.你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:基于webkit只要能分清浏览器使用什么内核就得满分（safari和chrome使用webkit内核，Firefox使用gecko内核）2.你简述盒模型box-sizing:content-box（W3C盒模型，又名标准盒原创 2020-12-18 16:41:29 · 180 阅读 · 8 评论 -
2020-12-15 JavaScript表达式
表达式1.原始表达式 原始表达式是最简单的表达式了，主要包含常量，直接量、变量和关键字 常量、直接量 （3.14,“test”）; 关键字 (null,this,true,var)； 变量（i,k,j）； 都属于原始表达式。 原始表达式和原始表达式可以复合成复合表达式，比如10*20;2.数组、对象的初始化表达式：(重要) 数组、对象的初始化表达式 比如[1,2] 相当于new Array(1,2); [1,4] 相当于[1,undefined,un原创 2020-12-15 18:50:02 · 127 阅读 · 0 评论 -
2020-12-13网页基本布局 flex 自适应
左右布局：左侧固定，右侧自适应<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2020-12-13 22:37:02 · 139 阅读 · 2 评论 -
2020-12-12 JavaScript简介-思维导图
原创 2020-12-13 20:37:34 · 104 阅读 · 0 评论 -
2020-12-11 JavaScript实例：本地增删改查
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-12-11 18:38:29 · 236 阅读 · 1 评论 -
2020-12-10 JavaScript 选项卡实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-12-10 18:51:42 · 89 阅读 · 0 评论 -
2020-12-09 HTML5+CSS新增特性
HTML5新增表单新增datalist 元素datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：<input type="text" list="search" /><datalist id="search"><option value="111" /><option value="222"原创 2020-12-09 18:45:15 · 137 阅读 · 2 评论 -
2020-12-08 JavaScript基础：获取表单的值案例
<form > <!-- 文本 --> <input type="text" id="user"> <br/> <!-- 单选 --> 男:<input type="radio" name="sex" value="男"> 女:<input type="radio" name="sex" value="女" checked> <br/&.原创 2020-12-08 16:48:32 · 89 阅读 · 0 评论 -
2020-12-07 JavaScript知识点总结1：基本数据类型与引用数据类型,数组方法,字符串方法,数组去重,获取元素的6种方式,JSON 转换,定时器,判断数据类型,操作元素属性,清除浮动
一．基本数据类型与引用数据类型1.number:数字2.string:字符串3.boolean:布尔4.undefined:未定义5. null:空对像6.object:对象 [ ]数组，{ }二．数组方法剪切链接合并序，判断反转删除是，开头结尾各两个1、剪切 slice从数组中返回指定的变量2、链接 join将数组中的元素以分隔符链接，返回一个字符串默认的分隔符为逗号3、合并 concat合并数组，返回新数组，不会改变原数组4、序 sort 会改变原数组将数组按原创 2020-12-07 17:03:04 · 156 阅读 · 0 评论 -
2020-12-06 学习总结自身难点2：localStorage，padStart()和padEnd()方法
localStorage方法：localStorage.getItem(key):获取指定key本地存储的值localStorage.setItem(key,value)：将value存储到key字段localStorage.removeItem(key):删除指定key本地存储的值 // 获取一下 有没有本地存储。有 转为 JSON 对象。没有 { "arr":[] } var str=localStorage.getItem("kaoshi");原创 2020-12-06 22:50:39 · 92 阅读 · 0 评论 -
2020-12-05 学习总结自身难点：CSS 子元素选择器，for遍历，for...in遍历，forEach遍历，js伪数组转数组，js查找元素获取子元素再进行遍历
通过这几天的综合练习总结一下自己不会的知识点CSS 子元素选择器选择子元素如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。for遍历for (var i = 0; i < 9; i++) { console.log(i); // more statements}详细：https://d原创 2020-12-05 17:02:42 · 701 阅读 · 0 评论 -
2020-12-04 JavaScript基础：事件基础
事件窗口事件window onload 当页面加载完成（页面结构、图片、css文件） 触发 onscroll 当滚动条 滚动时 触发 onerror 当出现错误（img、input、 script、style、资源加载失败）时触发 onresize 当浏览器窗口改变大小时触发键盘事件 onkeydown 当键盘被按下 （不区分大小写。所有功能键都可以） onkeypress 当键盘被按下并松开 (区分大小写。部分功能键 )原创 2020-12-04 19:08:24 · 103 阅读 · 0 评论 -
2020-12-03JavaScript综合练习：管理系统
布局部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2020-12-03 19:58:52 · 79 阅读 · 0 评论 -
2020-12-02 JavaScript基础：数据存储
数据存储cookie 客户端存储数据。存储用户登陆信息。自动的发送给服务器。存储大小 2kbsetTime() 方法以毫秒设置 Date 对象。toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。document.cookie="属性=属性值&属性2=属性2值;expires=格林威治时间"cookie 如何设置过期时间expires=格林威治时间localStorage 本地持久化存储。不主动删除，一直存在。原创 2020-12-02 17:04:18 · 99 阅读 · 0 评论 -
2020-12-01 Dom基础2：标签节点的操作方法，宽高位置，滚动条
标签节点的操作方法document.createElement(标签名)（最常用） 创建元素节点document.createTextNode() 创建文本节点节点操作方法 添加、删除、替换、克隆appendChild(节点对象) 在内部 末尾添加一个元素append(节点对象,节点对象) 在内部 末尾添加 多个元素insertBefore(新元素，目标元素) 在内部 目标元素前面添加removeChild(子元素对象) 删除子元素remove()原创 2020-12-01 18:52:40 · 126 阅读 · 0 评论 -
2020-11-30 Dom基础 节点属性，查找元素的6种方法，获取或设置html内容，节点属性操作，节点遍历，元素遍历
节点属性1、nodeName 节点名称元素--- 标签名属性--- 属性名文本--- #text文档--- #document2、nodeValue元素--- null 或 undefined属性--- 属性值文本--- 自身3、nodeType验证节点类型 nodeType元素 1属性 2文本 3注释 8文档 9<div id="x">啊啊</div> 呵呵<!-- 这是注释 --> var bodyDom原创 2020-11-30 17:05:52 · 478 阅读 · 1 评论