扁平wordpress主题,沈阳关键字优化,企业网站可信认证必须做吗,关于网站建设的基础知识window.onload和$(document).ready区别
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行$(document).ready()是DOM结构绘制完毕后就执行#xff0c;不必等到加载完毕
window.onload
触发时机#xff1a;window.onload 事件会在整个页面#xf…window.onload和$(document).ready区别
window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行$(document).ready()是DOM结构绘制完毕后就执行不必等到加载完毕
window.onload
触发时机window.onload 事件会在整个页面包括所有的依赖资源如图片、样式表和脚本文件等完全加载后触发。这意味着页面上的所有资源都必须加载完成window.onload 事件才会触发。使用场景适用于需要在页面所有资源如图片、外部脚本等加载完成后才执行的代码。例如如果你需要在页面加载完成后立即显示一个包含图片的模态框那么使用 window.onload 是合适的。原生JavaScriptwindow.onload 是原生 JavaScript 的一部分不需要额外的库或框架。
$(document).ready()
触发时机$(document).ready() 是 jQuery 中的一个方法它在 DOM 完全就绪后触发但不等待像图片这样的外部资源加载完成。这意味着 DOM 树已经被完全构建和解析但可能还有像图片这样的元素在加载中。使用场景适用于需要在 DOM 元素可用后立即执行代码但又不需要等待所有资源如图片加载完成的情况。这对于初始化插件、绑定事件监听器等操作非常有用。jQuery 依赖$(document).ready() 是 jQuery 特有的方法因此它依赖于 jQuery 库。 addEventListener()和attachEvent()的区别
addEventListener(是符合W3C规范的标准方法; attachEvent()是IE低版本的非标准方法addEventListener()支持事件冒泡和事件捕获;-而attachEvent()只支持事件冒泡addEventListener()的第一个参数中,事件类型不需要添加on ; attachEvent(需要添加on如果为同一个元素绑定多个事件, addEventListener()会按照事件绑定的顺序依次执行attachEvent()会按照事件绑定的顺序倒序执行 数组去重方法总结
1. 使用ES6的Set结构
ES6 提供了 Set 数据结构它类似于数组但是成员的值都是唯一的没有重复的值。利用这一特性可以轻松实现数组去重。
let arr [1, 2, 2, 3, 4, 4, 5];
let uniqueArr [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2. 使用filter()和indexOf()
filter() 方法创建一个新数组其包含通过所提供函数实现的测试的所有元素。而 indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引如果不存在则返回-1。通过这两个方法结合使用也可以实现数组去重。
let arr [1, 2, 2, 3, 4, 4, 5];
let uniqueArr arr.filter((item, index) arr.indexOf(item) index);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
3. 使用Map数据结构
Map 对象保存键值对并且能够记住键的原始插入顺序。利用这一特性也可以实现数组去重。
let arr [1, 2, 2, 3, 4, 4, 5];
let map new Map();
let uniqueArr arr.filter(item !map.has(item) map.set(item, true));
console.log(uniqueArr); // [1, 2, 3, 4, 5]
4. 使用reduce()
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)将其结果汇总为单个返回值。通过 reduce()我们也可以实现数组去重。
let arr [1, 2, 2, 3, 4, 4, 5];
let uniqueArr arr.reduce((acc, current) { if (acc.indexOf(current) -1) { acc.push(current); } return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]
5. 使用for循环
最后虽然不如上面的方法简洁但你也可以使用传统的 for 循环结合 indexOf() 方法实现去重
let arr [1, 2, 2, 3, 4, 4, 5];
let uniqueArr [];
for (let i 0; i arr.length; i) { if (uniqueArr.indexOf(arr[i]) -1) { uniqueArr.push(arr[i]); }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5] 75(设计题)想实现一个对页面某个节点的拖曳?如何做(使用原生JS)
”给需要拖拽的节点绑定mousedown , mousemove , mouseup 事件
mousedown事件触发后开始拖拽mousemove时需要通过event.c1ientX和clientY获取拖拽位置并实时更新位置mouseup时拖拽结束 76 Javascript全局函数和全局变量
全局变量
infinity 代表正的无穷大的数值。NaN指示某个值是不是数字值。undefined 指示未定义的值。
全局函数 decodeURI()解码某个编码的 URI 。decodeURIComponent(解码一个编码的 URI组件。encodeURI()把字符串编码为URI。encodeURIComponent()把字符串编码为URI 组件。escape()对字符串进行编码。eval() 计算JavaScript字符串并把它作为脚本代码来执行。isFinite()检查某个值是否为有穷大的数。isNaN()检查某个值是否是数字。Number()把对象的值转换为数字。parseFloat()解析一个字符串并返回一个浮点数。parseInt()解析一个字符串并返回一个整数。String()把对象的值转换为字符串。unescape()对由escape()编码的字符串进行解码
使用js实现⼀个持续的动画效果 在JavaScript中实现一个持续的动画效果通常涉及到定时器如setInterval或requestAnimationFrame来不断更新DOM元素的属性如位置、大小、透明度等以产生动画效果。这里我将使用requestAnimationFrame来展示一个简单的例子因为它提供了更好的性能和更平滑的动画效果。 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
title持续动画示例/title
style #movingBox { width: 50px; height: 50px; background-color: blue; position: absolute; left: 0; }
/style
/head
body
div idmovingBox/div
script srcanimate.js/script
/body
/html function animateBox(element, startX, endX, duration) { let startTime null; function step(timestamp) { if (!startTime) startTime timestamp; const progress timestamp - startTime; const position startX (progress / duration) * (endX - startX); // 更新元素的位置 element.style.left position px; // 如果动画未结束则继续动画 if (progress duration) { requestAnimationFrame(step); } } // 开始动画 requestAnimationFrame(step);
} // 获取元素并调用动画函数
const box document.getElementById(movingBox);
animateBox(box, 0, 500, 3000); // 从左到右移动持续3秒
这个例子中animateBox函数接受一个DOM元素、起始X位置、结束X位置和持续时间作为参数。它使用requestAnimationFrame来更新元素的位置直到达到指定的结束位置或持续时间结束。
注意事项
requestAnimationFrame的回调函数接收一个时间戳参数它表示调用requestAnimationFrame时的时间。这个时间戳可以用来计算动画的进度。使用requestAnimationFrame相比setInterval或setTimeout可以更有效地控制动画的帧率并且更节能因为它在浏览器重绘之前调用回调函数避免了不必要的绘制工作。为了让动画看起来更自然可以根据需要调整动画的速度曲线如线性、缓入、缓出等。当你不再需要动画时可以使用cancelAnimationFrame来停止它以避免不必要的资源消耗 封装一个函数参数是定时器的时间.then执行回调函数 项目做过哪些性能优化?
减少HTTP请求数减少DNS 查询使用CDN避免重定向图片懒加载减少DOM元素数量·减少DOM操作使用外部JavaScript和css压缩JavaScript .css、字体、图片等优化 css Sprite使用iconfont字体裁剪多域名分发划分内容到不同域名”尽量减少iframe使用避免图片src为空·把样式表放在link 中.把JavaScript放在页面底部 JS怎样判断两个对象相等
1. 递归比较
通过递归地遍历对象的每个属性并比较它们的值和类型可以编写一个函数来检查两个对象是否相等。这种方法比较复杂但可以处理嵌套对象和数组
function deepEqual(obj1, obj2) { if (obj1 obj2) { return true; } if (typeof obj1 ! object || obj1 null || typeof obj2 ! object || obj2 null) { return false; } const keys1 Object.keys(obj1); const keys2 Object.keys(obj2); if (keys1.length ! keys2.length) { return false; } for (let key of keys1) { if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) { return false; } } return true;
} // 示例
const obj1 { a: 1, b: { c: 2 } };
const obj2 { a: 1, b: { c: 2 } };
console.log(deepEqual(obj1, obj2)); // true
2. 使用JSON.stringify()
一种简单但可能不总是可靠的方法是使用JSON.stringify()将对象转换成字符串然后比较这些字符串。这种方法简单且易于实现但它不能处理函数、undefined、循环引用等特殊情况。
function shallowEqualJson(obj1, obj2) { return JSON.stringify(obj1) JSON.stringify(obj2);
} // 示例
const obj1 { a: 1, b: 2 };
const obj2 { a: 1, b: 2 };
console.log(shallowEqualJson(obj1, obj2)); // true
3. 使用库
许多流行的JavaScript库如Lodash提供了深度比较对象的功能。例如Lodash的_.isEqual方法能够处理复杂的数据结构包括嵌套对象和数组。
// 假设已经通过script标签或npm/yarn引入了Lodash
const _ require(lodash); const obj1 { a: 1, b: { c: 2 } };
const obj2 { a: 1, b: { c: 2 } };
console.log(_.isEqual(obj1, obj2)); // true
