JavaScript | JQuery
等下吃什么?
余幼时即厌学
展开
-
history.pushState 实际使用场景
history.pushState 实际使用场景原创 2022-09-21 14:05:57 · 821 阅读 · 0 评论 -
Jquery 图片悬浮放大
第一种样式<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>图片放大</title> <script src="../网站后台/js/jquery-3.4.1.js"></script> <style> *{ margin: 0;原创 2021-01-01 23:44:36 · 336 阅读 · 0 评论 -
Jquery checkbox(全选/不全选、反选、单选、获取选中的值)
判断某个checkbox是否选中,返回值: Boolean$("#XXX").eq(index).is(':checked')$("#XXX")[index].checked设置某个checkbox的选中与不选中$("#XXX").eq(index).prop('checked', true/false)原创 2021-01-01 17:14:30 · 291 阅读 · 0 评论 -
JavaScript 对systemid(数字、字母混合字符串)排序
// 打乱顺序的数组const errorList = [ {systemid: '2c9483c979b201bc0179ea9ad31b05d7', sortNum: 4}, {systemid: '2c9483c979b201bc0179ea9ad30c05d1', sortNum: 1}, {systemid: '2c9483c979b201bc0179ea9ad35b05ef', sortNum: 6}, {systemid: '2c9483c..原创 2021-06-08 16:38:29 · 171 阅读 · 1 评论 -
JavaScript 运算符优先级
运算符优先级/* 优先级 运算类型 关联性 运算符 21 圆括号 () 20 成员访问 从左到右 XXX . XXX e.g. person.name 需计算的成员变量 从左到右 XXX [ XXX ]原创 2021-05-21 23:52:54 · 219 阅读 · 0 评论 -
React JavaScript 压缩base64图片
import React from 'react';export default class Compress extends React.Component { state = { originUrl: 'base64地址,自己替换', compressUrl: '' }; componentDidMount = () => { console.log(`原始大小 ${this.getBase64Size(bigFile)}`); this.de转载 2021-05-21 14:09:00 · 803 阅读 · 0 评论 -
JavaScript MoutationObserver监听DOM变化
概述用于监听DOM变动节点增删改属性变动内容变动异步事件,连续插入1000个<p>标签,只在1000个标签都插入结束才触发一次特点异步触发把DOM变动记录封装成一个数组来处理,不单独处理DOM变动既可观察DOM所有类型变动,也能指定只观察某一类变动MutationObserver 构造函数语法: var observer = new MutationObserver(callback);每次DOM变动后调用回调函数回调函数接受两个参数变动数组观察器实例原创 2021-05-12 10:45:21 · 938 阅读 · 0 评论 -
JavaScript Promise | async / await
练习题const promise = new Promise((resolve, reject) => { resolve('success1') reject('error') resolve('success2')})promise .then((res) => { console.log('then: ', res) }) .catch((err) => { console.log('catch: ', err) })/* 结原创 2021-05-11 22:04:50 · 138 阅读 · 0 评论 -
事件捕获、事件冒泡
JS事件流事件流分三个阶段:1-5 捕获阶段、5-6 目标阶段、 6-10 冒泡阶段IE6、7、8只支持冒泡流事件捕获和事件冒泡事件捕获:最外层元素先捕获事件,事件向下逐级捕获。外 -> 里事件冒泡:子元素响应事件,父元素也响应事件,事件向上逐级传递。里 -> 外<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原创 2021-04-22 15:43:06 · 141 阅读 · 0 评论 -
document.write 和 innerHTML的区别
write 不能精准控制内容输出的位置,在window.onload中执行会替换掉整个文档,包含titleinnderHTML 精准控制内容输出的位置write 仅支持写入,不支持读取innerHTML 不传参数为读取,传参数为写入write 添加脚本会自动执行innerHTML 添加脚本不会自动执行<!DOCTYPE html><html lang="en"><head> <meta charset="..原创 2021-04-22 13:16:21 · 199 阅读 · 0 评论 -
JavaScript 事件循环
为什么有事件循环?js单线程,多任务会排队,等待上一个任务执行完毕,如果某个任务执行事件很长,会造成阻塞,因此,JS引入了事件循环机制事件循环是啥JS单线程任务分为:同步任务、异步任务同步任务:在主线程中排队执行,前一个任务执行完毕,再执行下一个任务异步任务:不进入主线程,异步任务有结果后,把回调函数放到任务队列上,等主线程空闲时执行主线程不断在任务队列中读取事件,叫做事件循环事件循环中的两种任务宏任务(macroTask || Task): script(外层同步代码)、setIn转载 2021-04-12 16:01:40 · 130 阅读 · 0 评论 -
转换字符串js代码
这里用js请求接口,去拿ip地址,但是接口返回的是字符串js代码,需要把字符串转换成对象,提取里面的值export async function getIp() { return axios.get(`/api/cityjson`) .then(res => { console.log(res.data); // var returnCitySN = {"cip": "116.22.35.186", "cid": "440100", "cname": "广东省广原创 2021-04-03 16:44:01 · 154 阅读 · 0 评论 -
JavaScript 页面打印,预览,设置,分页
在HTML页中加载打印对象<object id="WebBrowser" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>实现打印、预览、设置功能<input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" /> <input type="butt转载 2021-03-17 13:40:32 · 415 阅读 · 0 评论 -
JavaScript 网页打印预览,图片跨页分割
开始时是这样的, 打印的控件是用iframe写的,图片用js一张张插入到div中,遇到的问题是长图片跨页分割,短图片挤在一页解决方法// 插入图片方法function addImg() { var imgDiv = document.getElementById('imgDiv'); imgDiv.setAttribute('style', 'overflow:hidden'); for (var i = 0; i < imgArray.leng原创 2021-03-17 12:53:56 · 996 阅读 · 0 评论 -
JavaScript 变量做方法名
需求描述页面上有多个Switch组件,多个Switch切换我想调用同一个方法进行统一处理,根据传的参数不同,进行不同的操作统一处理 const [wk, setWk] = useState(undefined); // 是否允许外勤打卡 const [bk, setBk] = useState(true); // 是否允许补卡 // switch切换 const switchChange = (checked, type) => { const method原创 2021-03-14 22:54:35 · 498 阅读 · 0 评论 -
算法:一个整型数组 nums 里除两个数字之外,其他数字都出现了两次。请写程序找出这两个只出现一次的数字。
// 示例输入:nums = [4,1,4,6]输出:[1,6] 或 [6,1]输入:nums = [1,2,10,4,1,4,3,3]输出:[2,10] 或 [10,2]/*** 时间:104 ms* 内存:42.8 MB** 1. 统计每个数字出现的次数,{1: 2, 2: 1, 3: 2, 4: 2, 10: 1}* 2. 把出现次数为1的放入数组输出,["2", "10"]* */var singleNumbers = function(nums) { const转载 2021-02-01 11:56:51 · 515 阅读 · 0 评论 -
算法: 给定一个只包括 ‘(‘,‘)‘,‘{‘,‘}‘,‘[‘,‘]‘ 的字符串 s ,判断字符串是否有效。
给定一个只包括 ‘(’,’)’,’{’,’}’,’[’,’]’ 的字符串 str ,判断字符串是否有效。有效字符串需满足:左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。// 示例输入:s = "()[]{}"输出:true输入:s = "()[]{}"输出:true输入:s = "(]"输出:false输入:s = "([)]"输出:false输入:s = "{[]}"输出:true/*** 执行:108 ms* 内存:43.1 MB* */转载 2021-02-01 11:11:36 · 1449 阅读 · 0 评论 -
JavaScript 获取地址栏中的参数
补充知识// 地址栏中的URL: http://www.baidu.com?name=小明&age=13&address=北京&phone=001#hehe// 设置或获取完整的URL: http://www.baidu.com?name=%E5%B0%8F%E6%98%8E&age=13&address=%E5%8C%97%E4%BA%AC&phone=001#heheconsole.log(location.href);// 设置或获取URL中的原创 2021-01-29 16:07:59 · 96 阅读 · 0 评论 -
JavaScript script标签中 async 和 defer 的作用
在这里插入图片描述转载 2021-01-27 15:28:15 · 278 阅读 · 1 评论 -
JavaScript new做了什么
当new Person()时,系统做了什么事?会在构造函数中自动创建一个对象将刚才创建的对象复制给this在构造函数的最后添加return this原创 2021-01-13 10:15:37 · 78 阅读 · 0 评论 -
JavaScript 常量与变量,var、let、const的区别
常量什么是常量?常量表示一些固定不变的数据javascript中常量的分类整型常量:整型常量就是整数实型常量:实型常量就是小数字符串常量:用单引号或双引号括起来的内容布尔常量自定义常量:ES6新增的,const 常量名称 = 常量取值变量什么是变量?变量表示一些可以被修改的数据如何定义一个变量?传统格式:var 变量名称 = 变量取值ES6格式: let 变量名称 = 变量取值全局变量全局变量:定义在{}外面的变量作用范围:当前一行开始,知道文件结尾注意点原创 2021-01-12 16:21:53 · 1159 阅读 · 0 评论 -
JavaScript 判断数据类型
typeof注意点:对象、数组、null 都返回 objectNaN为number类型prompt接收的参数为String类型 console.log(typeof ''); // string console.log(typeof 123); // number console.log(typeof true); // boolean console.log(typeof und原创 2021-01-12 15:29:09 · 79 阅读 · 0 评论 -
JavaScript 深浅拷贝(详细步骤说明)
什么是深拷贝、什么是浅拷贝?深拷贝修改新变量的值不会影响原有变量的值默认情况下基本数据类型都是深拷贝浅拷贝修改新变量的值会影响原有变量的值默认情况下引用类型都是浅拷贝深拷贝深拷贝中新对象会开辟新的内存,保存的是上一个对象中的值,修改时只会修改自身的值,对原对象没有影响 // 深拷贝 let num1 = 123; let num2 = num1; num2 = 456; console.log(`num1: ${num1} nu原创 2021-01-11 21:58:06 · 207 阅读 · 0 评论 -
JavaScript 构造函数与对象三角恋
构造函数与对象三角恋Function构造函数Object函数函数对象完整关系Function函数是所有函数的祖先函数所有构造函数都有一个prototype属性所有原型对象都有一个constructor属性所有函数都是对象所有对象都有一个__proto__属性原型链通过__proto__连接起来的链就叫原型链注意点实例对象使用的属性或方法,先看自己(构造函数)中有没有,有就用构造函数的没有就继续访问自己的原型对象,有就用自己的原型对象的没有就继续访问object原型原创 2021-01-11 21:30:02 · 106 阅读 · 0 评论 -
JavaScript this的几种指向
this指向练习题题1/** * A: * fn的this指向window * let声明的变量不挂载在window对象上 * 输出结果为:window.len = undefined * * B: * fn的this指向window * say中的this指向Person,fn虽然在Person中的say中,但是fn()前面没有. -- XXX.fn(),所以算是window.fn() * 输出结果为:win原创 2021-01-08 23:03:13 · 81 阅读 · 0 评论 -
JavaScript call、bind、apply与this的关系
this是什么?谁调用当前函数或方法,this就是谁这三个方法的作用是什么?都是用于修改函数或者方法中的this指向的bind方法的作用修改函数或方法的this指向,并且返回一个修改之后的新函数注意点:bind方法除了修改this指向外,还能传递参数,参数必须写在this对象后面call方法的作用修改函数或方法的this指向,并且立即调用修改之后的新函数注意点:bind方法除了修改this指向外,还能传递参数,参数必须写在this对象后面apply方法的作用修改..原创 2021-01-07 11:11:42 · 58 阅读 · 1 评论 -
JavaScript 防抖与节流
函数防抖什么是函数防抖 【debounce】?函数防抖是优化高频率执行js代码的一种手段可以让被调用的函数在一次连续的高频操作过程中 只被调用一次函数防抖的作用减少代码的执行次数,提升网页性能函数防抖的应用场景oninput / onmousemove / onscroll / onresize 等事件函数节流什么是函数节流 【throttle】?函数节流也是优化高频率执行js代码的一种手段可以减少高频调用函数的执行次数函数节流的作用减少代码的执行次数,提原创 2021-01-07 10:24:26 · 111 阅读 · 0 评论 -
JavaScript 简洁高效的多维数组降维
网上的数组降维方法有很多,大多写的又长又难懂,这里总结了三种优雅高效的方法,如果有更好的方法,欢迎评论区留言,大家一起探讨进步<script> const arr = [1,[2,3,[4,5,"今晚",[6,'吃','什','么']]],{name: 'tom'}]; /** * 适用于数值类型的多维数组降维 * arr + '' 可以隐式转换为字符串类型,本质是调用了String()方法 * +/- item 可以隐式转换为数值类型,会改变数原创 2021-01-04 22:45:01 · 168 阅读 · 0 评论 -
【合集】JavaScript 和 Jquery 设置元素的样式
【合集】JavaScript 和 Jquery 设置元素的样式原创 2021-01-02 15:39:48 · 162 阅读 · 2 评论 -
JavaScript 数组去重
数值数组去重对象数组去重原创 2020-12-25 10:18:23 · 86 阅读 · 0 评论 -
JavaScript 数组排序
排序sort()sort默认升序排序,升序还是降序,调换1和-1的位置即可字符串数组排序按字符串长度排序数字数组排序按对象中的属性的值排序原创 2020-12-25 09:51:49 · 57 阅读 · 0 评论