![](https://img-blog.csdnimg.cn/c3a856dde28c474aa737e6943fb4bcbb.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript基础
文章平均质量分 64
主要以JavaScript基础的分栏。
大聪明码农徐
我很懒,还没有添加简介
展开
-
iframe的基本介绍与使用
一、iframe的基本介绍二、iframe的基本使用三、iframe的属性介绍四、iframe注意事项五、iframe的URL传参方法六、iframe的postMessage()传参方法原创 2023-03-31 10:18:49 · 41901 阅读 · 0 评论 -
js获取某一时间到现在的总时间以及svg图标统一管理方法的封装
封装一个函数用于获取某一时间到当前时间的大概时长。封装一个函数用于svg图标的统一管理。原创 2022-12-22 14:15:07 · 425 阅读 · 0 评论 -
JavaScript的继承语法(ES5与ES6)
概念所谓的面向对象的继承,就是为了优化代码程序,减少冗余代码,提高代码效率。有一个已经定义好的构造函数,新的构造函数给实例化对象的属性属性值从已经定义好的构造函数中继承,新的实例化对象可以访问调用的构造函数的函数方法从已经定义好的构造函数中继承。ES5的继承语法属性继承方法通过修改父类构造函数的this指向,让父类构造函数定义的属性属性值定义给子类实例化对象。函数继承方法子类实例化对象原则上只能调用子类构造函数中prototype中的方法,通过继承子类实例化对象,可以调.原创 2022-02-24 20:03:31 · 485 阅读 · 0 评论 -
前端解决跨域问题的三种方法
一、cors后端程序员提供的解决跨域访问的方法,和前端程序员没有关系,定义后端程序代码 让 所有的前端程序都可以访问后端的数据,后端程序告诉服务器这个后端程序的数据任何前端请求都可以访问,服务器就不再执行跨域访问拦截数据的操作。因为博主目前主攻前端对后端并不熟悉,因此这种方法暂不详细解答。二、服务器代理 proxy(1)修改 Nginx或者 Apache 服务器文件,目前博主使用的是Nginx代理(2)在配置文件中的 server{ }中,一般是在最先方定义服务器代理locatio原创 2022-02-16 19:50:27 · 14035 阅读 · 0 评论 -
回调地狱及解决回调地狱的终极目标
目录一、回调地狱的定义二、解决回调地狱的终极目标三、promise语法3.1 定义3.2 封装promise函数3.3 语法形式四、async 和 await语法4.1 定义4.2 封装async函数4.3 语法形式一、回调地狱的定义所谓的回调地狱 就是在 回调函数中 继续调用执行新的回调函数,本质就是回调函数的嵌套使用。如:myAjax( 地址 , 方式 , 参数 , function( response1 ){ ...原创 2022-02-12 19:26:47 · 1008 阅读 · 0 评论 -
http网络传输协议浅析
一、定义http是网络传输协议的一种,是客户端和服务器进行传输内容时,遵守的规则规范。http是非常复杂的计算机程序,我们所学习的前端不需要去研究http协议的源代码。只需要研究http协议的主要内容和使用方法,以便理解Ajax技术的执行原理二、主要内容2.1 三次握手2.1.1 三次握手的定义http协议的一部分 通过 TCP/IP 协议完成的,在客户端和服务器正式创建链接之前执行的程序内容,为了确保客户端和服务器都能正常工作。客户端需要确认:客户端可以正常 接收 发送原创 2022-02-12 15:40:00 · 1729 阅读 · 0 评论 -
JavaScript中原型原型链数据访问机制
目录一、定义二、prototype三、__proto__四、具体的访问机制五、实际运用六、代码演示及运行结果一、定义所谓原型原型链就是JavaScript程序定义的数据的调用访问机制。二、prototype是每一个函数天生就有的属性,本质是一个对象,有自己的内存地址,可以存储属性属性值和函数方法。是 每一个 函数 天生就有的属性,是 一个 公共存储空间 存储 数据数值 和 函数方法,每一个 函数 创建的对象 都可以 调用 这个 公共空间中存储的数据 和 ..原创 2022-02-12 11:32:56 · 704 阅读 · 0 评论 -
let和const与var的区别
目录一、定义二、let三、const四、代码演示四、循环中let和var声明的循环变量的区别4.1 事件的绑定4.2 循环变量存储的数据数值4.2.1 var声明的循环变量4.2.1 var声明的循环变量一、定义let和const是ES6新增的声明变量的关键词,之前声明变量的关键词是var。二、letvar定义的变量,可以预解析提前调用的结果是undefined,let定义的变量不能预解析,提前调用的结果是 报错。 var定义的变量,变量名称...原创 2022-02-12 10:23:15 · 44151 阅读 · 2 评论 -
JavaScript中ES6常见新增语法(this指向问题)
目录一、立即执行函数1.1 定义1.2 语法形式1.2.1 不带参数形式1.2.2 带有参数形式1.3 注意二、箭头函数2.1 定义2.2 关键作用2.3 语法形式三、this指向3.1 定义3.2 this指向的理解3.3 不同函数的具体的this指向3.3.1 普通函数3.3.2 声明式函数 赋值式函数 定时器 延时器 forEach ....3.2 箭头函数的this指向3.3 改变this指向3.3....原创 2022-02-11 22:08:55 · 1587 阅读 · 1 评论 -
DOM操作事件语法全解析(GIF动图,代码结合一看就会)
一、事件绑定三要素二、事件的删除 三、默认事件的阻止四、阻止事件的传播/阻止冒泡事件 五、 常见的事件类型5.1 window相关的事件类型5.2 鼠标相关的事件类型5.3 键盘的相关事件类型5.4 表单的相关事件类型5.5 移动端事件5.6 特殊事件六、事件点击中的坐标七、事件对象 event八、事件委托原创 2022-02-04 15:37:23 · 846 阅读 · 3 评论 -
DOM节点操作
var 变量 = document.createElement('标签名称');创建标签节点:标签对象.appendChild( 标签节点 );在 标签对象 的 末位 新增标签节点 ;标签对象.insertBefore( 写入节点 , 在谁之前 );在 标签对象中 指定的标签之前 写入var 变量 = 标签对象.cloneNode();只 克隆 标签对象本身var 变量 = 标签对象.cloneNode(true);克隆标签对象本身 以及 标签对象的内容 &l原创 2022-02-03 14:16:18 · 321 阅读 · 0 评论 -
DOM操作 视窗窗口监听事件
BOM操作 视窗窗口 宽度 高度情况1:包括滚动条宽度window.innerWidthwindow.innerHeight <style> body{ height: 5000px; } </style><body> <script> // 情况1:包括滚动条宽度 var width = window.innerWidth原创 2022-02-03 13:51:56 · 744 阅读 · 0 评论 -
BOM操作 三大弹窗
window.alert('内容') 警告框 <style> button{ width: 60px; height: 30px; background-color: red; font-size: 15px; } </style><body> <button>点击</button>原创 2022-02-03 13:01:05 · 250 阅读 · 0 评论 -
JavaScript中标签的占位
标准盒模型的占位应当是外边距(margin)+边框(border)+内边距(padding)+内容。内容 + padding + border标签对象.offsetWidth 宽标签对象.offsetHeight 高 <style> *{ margin: 0; padding: 0; } div { width: 100px; h原创 2022-02-03 12:29:17 · 947 阅读 · 0 评论 -
DOM操作CSS样式设定
标签对象.style.属性 = 属性值,只能获取行内样式注意:JavaScript中 - 只作为减号使用。css属性中带有 - 的属性 必须写成小驼峰命名法 font-size ---- fontSize margin-top ---- marginTop。如果需要单位 必须要 携带单位 不能光写数字需要区分css样式和属性。<style> *{ margin: 0; padding: 0; }原创 2022-02-01 13:49:30 · 1068 阅读 · 0 评论 -
DOM操作class属性的方法
新增标签对象.classList.add(新增属性值)删除 标签对象.classList.remove(删除属性值)替换标签对象.classList.replace(原始 , 新的)切换标签对象.classList.toggle(切换属性值)有执行删除,没有执行新增<body> <div class = "box box2 "></div> <script> // 获取标签对象 const oD原创 2022-02-01 13:17:46 · 1847 阅读 · 0 评论 -
JavaScript中DOM操作标签属性
标签支持的可以直接操作的属性每种标签都支持的可以直接操作的属性 id id属性 className class属性 title title属性操作语法 设定 标签对象.id = 属性值 ...原创 2022-02-01 13:07:14 · 408 阅读 · 0 评论 -
JavaScript中DOM 操作标签内容
标签对象.innerText获取和设定时 支持 解析标签获取:var 变量 = 标签对象.innerHTML ;设定:标签对象.innerHTML = 字符串 ;<body> <div>大聪明</div><script> // 获取标签对象 var oDiv = document.querySelector("div"); // 获取标签对象内容 var str = oDiv.innerHTML;..原创 2022-02-01 12:37:28 · 274 阅读 · 0 评论 -
JavaScript中DOM操作获取标签对象
var 变量 = document.querySelector('条件')获取整个HTML文档中第一个符合条件的标签对象,是一个独立的标签对象可以直接进行DOM操作,如果没有符合条件的对象执行结果是null<body> <div></div> <div></div> <div></div> <div></div> <script>原创 2022-02-01 11:35:00 · 483 阅读 · 1 评论 -
JavaScript的定时器延时器
定时器定义按照设定的时间间隔 循环往复执行程序也就是 按照设定的时间间隔 每间隔设定的时间 执行一次程序事件间隔的单位是 毫秒也就是 按照间隔时间 一直重复执行程序语法setInterval( 参数1 , 参数2 ) 参数1 执行的函数程序 参数2 时间间隔参数1的语法形式语法形式1 匿名函数语法形式2 函数名称参数1的语法形式 称为 回调函数 callback注意...原创 2022-01-30 11:25:40 · 13969 阅读 · 0 评论 -
JavaScript的时间对象
时间对象的创建var 变量 = new Date();没有参数默认创建当前时间的时间对象var 变量 = new Date(参数);设定参数创建指定时间的时间对象参数的语法形式1 字符串 '年-月-日 时:分:秒' '年 月 日 时:分:秒' '年/月/日 时:分:秒' '年,月,日 时:...原创 2022-01-30 10:57:34 · 209 阅读 · 0 评论 -
JavaScript的Math对象
Math对象 Math.PI 圆周率 Math.SQRT2 根号2 也就是 2的平方根 Math.random() 0 - 1 的随机小数 可以是 0 不会是 1 Math.min()返回最小值 Math.max()返回最大值 Math.floor()向下取整 舍弃取整 Math.ceil()向上取整 进一取整 Math.round()四舍五入取整 Math.pow( 底数 , 指数 )乘方运算 / 幂运算 Math.abs(......原创 2022-01-30 09:59:47 · 149 阅读 · 0 评论 -
JavaScript的字符串(string)操作
定义字符串又称 包装数据类型 支持[]取值语法,支持字符串.length 属性。 <script> var str = "你好我叫大聪明码农徐"; // 取值 console.log(str[3]); // 长度 console.log(str.length); </script>运行结果:字符串的循环for 循环for in 循环for of 循环.原创 2022-01-30 09:56:02 · 576 阅读 · 1 评论 -
JavaScript的对象(object)操作
创建构造函数var 变量 = Object();字面量var 变量 = {键名:键值 /属性:属性名} ; <script> // 字面量,在{}中定义对象存储的键名键值。 var obj = {name:"张三",sex:'男',age:18}; // 构造函数 var object = Object(); </script>删除delete( 对象.属性 ) dele.原创 2022-01-30 09:27:31 · 475 阅读 · 0 评论 -
JavaScript的数组 (array / arr)操作
数组的定义字面量语法形式var 变量 = [ 数据1 , 数据2 , 数据3 .... ];在[]中定义数组存储的数据单元,数据单元可以是一个可以是多个,多个数据单元之间用逗号隔开,数组中可以存储所有JavaScript支持的数据结构。构造函数定义形式var 变量 = new Array() ;代码展示: <script> // 字面量语法形式 var arr = ["你好",1,"北京","上海",{name:"张三"}]..原创 2022-01-29 13:09:11 · 3268 阅读 · 0 评论 -
JavaScript的函数(function)
目录函数的基本概念概念:理解:优点:函数的基本语法声明式:赋值式:调用:函数的参数一个参数时多个参数时函数的返回值函数的返回值return 简单的理解return 为什么要有returnreturn的作用函数的基本概念概念:实现功能效果的代码块理解:将需要的程序,封装定义在一个函数中,通过调用函数调用相对应的程序。优点:封装一次。多次调用,有更好的可操作性和可维护性。函数的基本语法声明式: ...原创 2022-01-28 15:09:07 · 6076 阅读 · 0 评论 -
JavaScript的数据类型转化
JavaScript是一种弱类型的计算机语言,对于数据标量存储的数据类型没有强制要求,但计算机程序执行时,需要指定的数据类型参与运算,需要将当前存储的数据类型转化为指定的数据类型。字符串类型字符串拼接时触发,其他数据类型自动转化为字符串,参与运算的两个单位一定有一个字符串,才会执行拼接操作。 变量. toString(进制)如果变量的储存范围是整数,可以转化的禁止范围是2- 36 string(变量/表达式)规则与自动转化规则相同 <script>原创 2022-01-28 14:07:12 · 452 阅读 · 0 评论 -
JavaScript中if/switch/while循环/for循环语句详解
if分支结构语句if的第一种表达式if (表达式){程序}表达式结果是true 执行反之没有程序执行 <script> // 表达式结果是true 执行,反之没有程序执行 if(1===2){ console.log("全等"); } </script>if (表达式){程序一}else{程序二}表达式结果是true执行1反之执行2·原创 2022-01-28 13:24:08 · 1336 阅读 · 0 评论 -
JavaScript运算符
赋值运算符= 赋值运算符,将右侧表达式的执行结果,赋值给左侧变量存储,如果对一个变量重复赋值,则执行覆盖效果。 += 累加运算符,在左侧数据存储数据的基础上,累加右侧表示的执行结果,再将最终的执行结果赋值给左测变量。 -=减等赋值运算,/ 累减运算符 *= 乘等于 / 累乘运算 /= 除等于 / 累除运算 %= 模等于运算 <script> // 赋值运输算 var num = 5; // 累加运算,num .原创 2022-01-28 12:07:54 · 613 阅读 · 0 评论 -
JavaScript的基本原理
JavaScript的预解释/预解析/预编译所谓的预解释/预解析/预编译是JavaScript程序的一种执行方式,var 声明的关键词不会报错,提前调用会显示undefined,function 声明的函数提前调用是可以正常执行的函数,因为在程序正常执行之前JavaScript会把所有文件预读一遍,对于var和function 关键字声明定义的函数和变量做特殊处理。JavaScript变量的作用域全局变量/ 全局作用域变量/共有变量;定义在函数之外的变量被称为全局变量。任意位置都可以调用。原创 2022-01-28 10:48:00 · 737 阅读 · 0 评论 -
JavaScript变量的作用域
全局变量/ 全局作用域变量/共有变量;定义在函数之外的变量被称为全局变量。任意位置都可以调用。局部变量/局部作用域变量/私有变量;定义在函数之内的变量 / 形参被称为局部变量,默认只能在函数内部使用。函数外部无法直接调用。 <script> // 全局定义str var str = "你好"; // 创建函数 function hello(){ // 局部变量num原创 2022-01-28 10:44:07 · 51 阅读 · 0 评论 -
JavaScript变量命名规则
变量命名规则 严格区分大小写。 只能使用英文,数字,下划线,$符号,但$符号不推荐使用。 不使用保留的关键字 建议遵守的,约定俗成的,推荐使用小驼峰命名法, 除第一个单词意外 其他单词首字符大写 username --- userName userpwd --- userPwd 注意: <script> var num = 1; var num = 2; // 正常情况下变量名一样时,执行覆盖操作num的值为2。原创 2022-01-28 10:30:56 · 645 阅读 · 0 评论 -
JavaScript的数据类型
数据类型 布尔类型(boolean) 只有两个数值true(真)和false(假)。 数值类型(number) 整数:不管什么进制的整数,输出都按照十进制数据输出,二进制:0b / 0B 八进制:0o / 0O 十六进制:0x / 0X 。 浮点数:浮点数的有效数值为17位,浮点数直接参与运算会造成精度丢失,因此浮点数参与运算和比较一定要做特殊处理。 NaN:Not a Number 表示当前数据类型是数值类型,但不是一个具体的数值。有nan参与运算,结果一定是..原创 2022-01-28 10:19:19 · 49 阅读 · 0 评论 -
JavaScript的三种引入方式
行内式在HTML标签中直接定义JavaScript程序代码,这种语法实际项目中禁止使用。(a标签如需执行JavaScript程序,href属性值必须定义JavaScript:;)内嵌式在script标签中定义JavaScript程序代码,教学使用。(一般写在html标签的最下方。)<body> <div></div> <!-- 注意script标签放在所有html结构之后 --> <script> .原创 2022-01-27 11:24:36 · 2907 阅读 · 0 评论