w_____w_____的博客

大体来说，浏览器渲染过程为：1. 浏览器接收到一个html文档，渲染引擎会立即解析它，并将其html元素生成对应的DOM节点，组成一个”DOM树“。2. 浏览器解析来自CSS文件和html中内联的样式，然后根据这些样式信息生成css对象模型树(CSSOM tree),接着和上一步创建的DOM树合并为一个“渲染树“。3. 浏览器引擎根据渲染树计算出每个节点在其屏幕上应该出现的精确位置，并分配这组坐标，这样的过程称为“布局”，也称为“自动重排”。4. 浏览器遍历渲染树，调用每一个节点的pain

引言你可能会注意到在ts中，通过document.getElementById()返回HTMLElement类型，而document.querySelect()返回Element类型。区别那么两者区别是什么呢？Element 是一个通用性非常强的基类，所有 Document 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如， HTMLElement 接口是所有 HTML 元素的基本接口

声明式UI前两天看到鸿蒙之前的jsUI变成了ArkUI，而新的UI居然是声明式UI。下面是从鸿蒙文档里复制的一段代码，大家可以简单看一下@Entry@Componentstruct MyComponent { build() { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Text

如图所示，drag事件的最后一次输出（松开鼠标）会跳变为0；//使用dragover阻止document.addEventListener("dragover", function(event) { // prevent default to allow drop event.preventDefault();}, false);

题目implement basic throttle()实现节流，题目要求的节流和我们平常的不一样，上面题目要求节流的同时保持最大频率调用目标函数。例子let currentTime = 0const run = (input) => { currentTime = 0 const calls = [] const func = (arg) => { calls.push(`${arg}@${currentTime}`) } const th.

题目implement Array.prototype.flat()写一个函数实现Array.prototype.falt。例子const arr = [1, [2], [3, [4]]];flat(arr)// [1, 2, 3, [4]]flat(arr, 1)// [1, 2, 3, [4]]flat(arr, 2)// [1, 2, 3, 4]答案//递归function flat(arr,depth=1){ return depth ? ar.

看完本篇，你将理解如何构建简单curry，支持占位符的curry，理解Function.prototype.length的规则，理解Function函数，理解bind的真正细节，一个完善到极致的curry函数！

原题：create a browser historyclass BrowserHistory { /** * @param {string} url * if url is set, it means new tab with url * otherwise, it is empty new tab */ constructor(url) { this.queue=[] //当前current位置 this.currentIndex=0 if(url !==

最基础的，不再分析(下图最后一个不太搜索命名空间的？)document.querySelector()根据选择器查找单个元素参数： 包含一个或多个要匹配的选择器的 DOM字符串DOMString。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发SYNTAX_ERR异常。(参数包含伪元素返回空)返回值: 表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。例子：获取类名为test下id为a的domlet dom=xxx

== 与 ===我们都知道两者区别在于，检查值是否相等，而=检查值和类型是否相等。更精确点就是==检查的是允许类型转换情况下的值的相等性，===检查不允许类型转换情况下的值的相等性。== 类型转换细节我总结了==中几点重要的特例，如果想看全部细节可以到 es5规范 11.9.3。对于x == y来说当x，y类型相等时，x == y 与 x === y没有区别。模糊了null和undefined,即 null == undefined 结果为true。当x为Boolean时，会将x转为Nu

问题下面代码报错。@for $i from 0 to 24 {.wly-col-#{$i} { width: calc(1 / 24 * #{$i} * 100)%;}.wly-col-offset-#{$i} { margin-left: calc(1 / 24 * #{$i} * 100)%;}.wly-col-pull-#{$i} { position: relative; right: calc(1 / 24 * #{$i} * 100)%;}.wl

arrayObject.sort(sortby)；sortby为一个函数，内有两参数，该函数返回两参数的差。arr=[1,2,4,5,6]var sortby=function(a,b){ return a-b;}arr.sort(sortby)//sort内部采用O(n^2)的冒泡排序，当sortby的返回值大于0，交换位置。//冒泡排序//升序function bubbleSort(arr) { var i = arr.length, j; var tempEx

防抖我们经常在业务中判断当前用户名是否存在，如代码1所示，如果每次触发input的change事件都向后台请求一次接口，那就非常没有效率，因此我们可以判断用户输入结束后再发送数据。//代码1<input type="text" name="userName"> <script> document.querySelector('input').addEventListener('input',function(){ console.log('我向后台验证了一次用户名

我们都知道apply,call,和bind方法都是改变this指向的，但是他们之间的区别以及核心原理你真的懂了吗//代码1var obj={ name:"li", f: function(age,fm){ console.log(this.name+" "+age+" "+fm); }}var robber={name:"wang"} obj.f(18,"北京") //li 18 北京obj.f.call(robber,88,"新乡") //wa

以下为我的浅显理解（仅供参考）在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。构造函数首字母一般大写。//代码1function Student(name,age){ this.name=name; this.age=age;}var stu1=new Student('小王',"18"); console.log(stu1.name) //小王如代码1所示，Student（）即为自定义的构造函数，其中使用new 关键字后会进行如下的操作：1，

大佬之前给我说过一遍，忽然发现忘了这个东西，写个博客吧根目录为：http://localhost:8080url:/public/img如这个所示，前面加/，就会加到根目录后面，http://localhost:8080/public/img当前路径为public/css,url不变为：http://localhost:8080/public/css/public/img即加/，直接加在根目录后面不加/，直接加在当前目录后面...

再网上找了很多方法，都没用1，设置autocomplete="off"或者autocomplete=“new-password” 部分有用2，放置<input type="password" style="display:none" name="password"> 无效3，动态将密码框的value改为小圆点或者* 麻烦4，通过focus动态改变input的属性 无效还麻烦5，使用属性-webkit-text-security 少部分浏览器有效之后我测试了360，chrome等浏览器

我调用后端接口想把下图的json字符串传给后端//传的值为members，忽略了其它代码axios: data: JSON.stringify({ members: members }), headers: {//指定响应头 //'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', //根据后端要求改为application/json //"Accept"

现在这个项目第一次用axios，因为我之前看的学长学姐们的列子，发送用的parmas，由于当时没有细想，所有也没有在意，现在忽然发现这两个的区别还挺大，记录一下params 请求时会把数据放到url后面，而且这个还只能传字符串，不能传JSON类型的，阔以看下面俩图data：而data是添加到请求体（body），说到请求体，我又特意去查的资料，根据百度可以简单理解为在http协议的请求发送的信息（即请求报文）：由请求行（requestline）、请求头部（header）、空行和请求数据（请求体）

ajax大家应该都不陌生，最近挺好奇它到底是咋读的。遂百度直接听的话发现读作 A 摘~克斯(A不是啊)但大家都读作阿贾克斯，而我看到下面还有一个阿贾克斯的翻译，经过百度，发现还有一家荷兰足球俱乐部人家也叫ajax，而他们音译过来就是阿贾克斯。...

使用下载xlsx：npm install xlsx然后找到xlsx.full.min.js这个js文件直接引用就行，简单使用代码如下//代码1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <

window.onresize当浏览器被重置大小时执行Javascript代码;语法In HTML:<element onresize="你想干啥">JavaScript 中:window.onresize=function(){你想干啥};由于之前写的一个网页轮播图需要兼容ie，所以我使用了window.onresize来监听浏览器宽度的变化，以便于轮播图的宽度跟随浏览器一起变化，而轮播图的位移也是轮播图宽度的整数倍，js代码如下：但是会出现获取宽度不及时的问题，意思就是说

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。参数一共有两个参数1：function（），即一个函数2：initialValue 可选。传递给前第一个参数即函数的初始值。//简单例子var numbers = [65, 44, 12, 4];function getSum(total, num) { return total + num; //能把+换成-}function myFunction() { alert(

今天遇到兼容问题，浏览器不认识es6，根据网上的一种方法，是引用babel-core的browser.min.js文件<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>来把es6转换成es5的形式。1， npm install babel-core@5(@5意思为下载5.xx版本的babel-core,我试过下载6版本的babel-core但没有成功，具体原因还不清楚)2, 然

奇怪的错误uncaught typeerror illegal invocation这个错误一般是ajax引起的，分为两种情况1请求类型有误，即get请求，但后台实际为post请求2即ajax的传值错误排查后，发现我是由于传值时直接把对象传了进去，导致传值错误。。...

今天遇到一个很奇怪的问题，我需要向node端传一个数组，但是我使用bodyParser获取不到，前端代码（ajax只显示了前半部分）//代码1let arr=[1,2,3];let s="String"$.ajax({ url:'http://localhost:3000/user/test', type:'post', data:{ arr, s },node代码router.post('/test',(req,res)=&

阻止事件传播//代码1//在下面的代码中，我需要添加一个全局事件，但是改全局事件不能包括imitationSelect，imitationSelect.onclick= function(){ if(selectUl.style.display=="block"){ selectUl.style.display='none'; }else{ selectUl.style.display='block'; }

HTMLCollectiondocument.getElementsByClassName() document.getElementsByTagName（）两种两种获取元素节点的方法返回的类型为HTMLCollectionHTMLCollection 是一个接口，即包含了一堆HTML元素的集合，可以当成一个包含 HTML 元素的数组。HTMLCollection 有2个方法，一个属性length返回 HTMLCollection 中元素的数量。**item()**返回 HTMLCollecti

首先是写法的不同element.data('val','1')element.attr('data-val','1')其次是储存的方式不同使用data（）方法，值会储存在jquery对象中。attr（）方法会储存在dom中。<li data-val="1">苹果</li> //attr()<li>苹果</li> //data()，看不见//两种方法并不互通。...