JS
JavaScript
_enzo
这个作者很懒,什么都没留下…
展开
-
使用URLSearchParams和原生js获取url各部分的值
以获取url中的token值为例,展示以下二种方式的用法。原创 2022-09-11 16:42:35 · 220 阅读 · 0 评论 -
Ajax中发送get、post请求以及服务端响应json数据
1.发送get请求get.html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-06-07 09:52:00 · 1150 阅读 · 0 评论 -
js操作元素
一、获取特殊元素(body,html)1.获取body元素document.body;2.获取html元素document.documentElement;二、改变元素内容element.innerText从起始位置到终止位置的内容,单=但它去除html标签,同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行三、样式属性操作element.style 行内样式操作element.原创 2021-07-12 19:26:35 · 158 阅读 · 0 评论 -
js排他思想
案例:给所选按钮设置背景颜色代码如下:<b<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = docu.原创 2021-07-13 16:16:23 · 47 阅读 · 0 评论 -
Location对象、history对象以及navigator对象
1.URL2.location对象的属性案例:5秒后跳转到新页面代码如下:<body> <button>点击</button> <div></div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); var time原创 2021-07-14 10:41:06 · 152 阅读 · 0 评论 -
调整窗口大小事件
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title.原创 2021-07-14 10:45:36 · 73 阅读 · 0 评论 -
元素偏移量offset系列及e.pageX(e.pageY)
1.offset概述注意:目标元素的父元素要有定位,否则偏移量为目标元素与元素之间的距离2.offset与style的区别3.e.pageX和e.pageY目标元素在浏览器中的位置案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi原创 2021-07-14 20:17:56 · 1321 阅读 · 0 评论 -
offset、client、scroll三大系列对比总结
注意:3.元素滚动 4.页面滚动原创 2021-07-15 15:09:17 · 52 阅读 · 0 评论 -
移动端触摸事件
2.案例触摸事件.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...原创 2021-07-19 17:31:11 · 54 阅读 · 0 评论 -
pageshow事件、mouseenter和mouseover事件的区别、立即执行函数、classList属性
1.pageshow事件2.mouseenter和mouseover事件的区别3.立即执行函数4.classList属性原创 2021-07-19 17:43:59 · 96 阅读 · 0 评论 -
创建类和生成实例并添加共有方法
1.创建类和实例2.类constructor构造函数3.代码<body> <script> //创建类 class Star { constructor(uname, age) { this.uname = uname; this.age = age; } //添加方法 sayHi() {原创 2021-07-20 09:46:47 · 96 阅读 · 0 评论 -
类继承extends和super关键字
1.继承2.super关键字1.super调用父类构造函数<body> <script> class Father { constructor(x, y) { this.x = x; this.y = y; } sum() { console.log(this.x+this.y);原创 2021-07-20 14:51:51 · 210 阅读 · 0 评论 -
构造函数和原型
1.概述2.构造函数3.静态成员和实例成员<script> function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('Hi'); } } var hhh = new Star(原创 2021-07-21 20:26:09 · 152 阅读 · 1 评论 -
ES6继承
继承1.call()方法2.利用父构造函数继承属性3.利用原型对象继承方法1.call()方法ES6之前并没有提供extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承call()调用这个函数,并且修改函数运行时的this指向fun.call(thisArg, arg1, arg2, …)thisArg为指向的对象,arg1,arg2…为参数<script> function fn(x, y) { console.lo原创 2021-07-22 16:09:58 · 254 阅读 · 0 评论 -
ES5中新增方法:数组方法、字符串方法、对象方法
1.ES5新增方法概述2.数组方法(1)forEach()<script> var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, array) { console.log(index + '号元素' + value); console.log('数组是' + arr); sum +=原创 2021-07-23 11:02:29 · 95 阅读 · 0 评论 -
ES6函数(上)
函数1.函数的定义和调用(1)函数的定义(2)函数的调用方式2.this(1)函数内this的指向(2)改变函数内部的this指向call()方法apply()方法bind()方法bind()方法应用call()、apply()、bind()总结1.函数的定义和调用(1)函数的定义<script> //命名函数 function fn() {}; //函数表达式(匿名函数) var fun = function() {};原创 2021-07-23 16:32:13 · 224 阅读 · 0 评论 -
ES6函数(下)
函数3.严格模式(1)什么是严格模式(2)开启严格模式3.严格模式中的变化4.高阶函数5.闭包(1)变量作用域(2)什么是闭包(3)闭包的作用6.递归(1)什么是递归?3.严格模式(1)什么是严格模式(2)开启严格模式3.严格模式中的变化4.高阶函数5.闭包(1)变量作用域(2)什么是闭包<script> function fn() { var num = 10; function fun()原创 2021-07-26 09:52:04 · 57 阅读 · 0 评论 -
正则表达式
正则表达式1.正则表达式概述(1)什么是正则表达式(2)正则表达式的特点2.正则表达式在JavaScript中的使用(1)创建正则表达式(2)测试正则表达式3.正则表达式中的特殊字符(1)正则表达式的组成(2)边界符(3)字符类(4)量词符(5)括号总结(6)预定义类4.正则表达式中的替换(1)replace替换(2)正则表达式参数1.正则表达式概述(1)什么是正则表达式(2)正则表达式的特点2.正则表达式在JavaScript中的使用(1)创建正则表达式(2)测试正则表达式3.正则表原创 2021-07-26 17:33:49 · 94 阅读 · 0 评论 -
MVC和MVVM的关系图解、事件修饰符
1.MVC和MVVM的关系图解2.事件修饰符<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge原创 2021-07-27 17:27:49 · 141 阅读 · 0 评论 -
let、const、var关键字
1.let关键字let声明的变量只在所处的块级作用域有效使用let关键字的变量才有块级作用域,使用var声明的变量不具备块级作用域特性防止循环变量变成全局变量不存在变量提升,只能先声明再使用暂时性死区var num = 10;if (true) {console.log(num); //不会到全局中去查找numlet num = 20; //用let声明了num,num就与这个块级作用域绑定了,会出现undefined}2.const关键字作用:声明常量,常量就是值(内原创 2021-08-17 16:00:29 · 85 阅读 · 0 评论 -
ES6解构赋值、箭头函数、剩余参数
ES6中允许从数组中提取值,按照对应的位置,对变量赋值,对象也可以实现解构1.数组解构<script> let array = [1, 2, 3]; let [a, b, c, d, e] = array; console.log(a); console.log(b); console.log(c); console.log(d); console.log(e); <原创 2021-08-17 19:05:34 · 97 阅读 · 0 评论 -
扩展运算符
1.Array的扩展方法2.扩展运算符应用合并数组原创 2021-08-17 21:50:56 · 64 阅读 · 0 评论 -
promise、async、await
1.什么是promise2.定时器的异步事件3.promise三种状态原创 2021-08-18 20:19:37 · 54 阅读 · 0 评论 -
input输入框自适应宽度
代码如下<template> <div class="rc-text" contenteditable ref="componentRef" :id="domId" :class="getClassName" type="text" v-text="'text'"></div></template><script lang="ts">import { defineComponent, PropType } from 'vue'imp原创 2021-11-15 18:59:43 · 1695 阅读 · 0 评论 -
addEventListener的第三个参数
1.使用事件监听绑定方法var btn = document.getElementById('submit'); btn.addEventListener('click', onClickFn, false);提问:第三个参数为何是“false”?当鼠标点击所看到的的按钮时,其实发生了一系列的事件传递,可以想象一下,button实际上是被body“包裹”起来的,body是被html“包裹”起来的,html是被document“包裹”起来的,document是被window“包裹”起来的。所以,在你的鼠原创 2022-03-15 14:49:33 · 7285 阅读 · 2 评论 -
在页面加载后设置<embed>标签的src
在页面加载完之后,再给embed 加入src 值无效1.原因embed 和 object 因为数据(video, audio, flash, activex)的特殊性,跟一般DOM处理上有所不同,在载入后浏览器会拒绝改变它们的 src 属性。embed嵌入式对象是比较特殊的,你一旦嵌入到文档中无论怎么改src它都不会重新加载。其实你了解它的道理后也不难理解,它实质上是浏览器调用的外部插件来渲染的(比如你的例子就是调用的flash插件),这个渲染过程是在嵌入的时候就完成了,而这些属性也都是嵌入的时候传递给原创 2022-03-29 18:19:57 · 813 阅读 · 0 评论