![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
路 西
这个作者很懒,什么都没留下…
展开
-
如何写js事件委托
正常的 ul.addEventListener('click', function(e){ if(e.target.tagName.toLowerCase() === 'li'){ fn() // 执行某个函数 } })以上代码存在问题比如<!- // dome <ul> <li><span>1</span></li> <li><span>2</s原创 2021-11-11 09:32:54 · 838 阅读 · 0 评论 -
将字符串函数转为能正常执行的函数类型
const aa = 'function(val){console.log(val)}'此时我们想要执行aa 函数怎么办?javascript 提供 [eval()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval) 函数会将传入的字符串当做 JavaScript 代码进行执行。...原创 2021-05-06 19:44:24 · 421 阅读 · 0 评论 -
手写ajax 请求并将获取到的图片二进制流渲染到页面上
话不多说代码附上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equ原创 2021-03-16 19:21:31 · 481 阅读 · 0 评论 -
原生js实现图片懒加载 并实现页面触底加载更多
思路:设置自定义属性绑定到 img 上 src 上绑定load图 当图片处于视口区域时 将自定义属性的 url 替换图片的 url 即可<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.原创 2021-03-11 22:34:44 · 320 阅读 · 0 评论 -
实现一个 $attr(name,value)遍历 获取对应的元素集合
实现一个 $attr(name,value)遍历 * 属性位name * 值为value的元素集合 * */html<ul> <li id="AA" class="box clearFix">1</li> <li name="con" class="content box">2</li> <li name="BB">3</li> <li id="AA">4</li>原创 2021-03-11 10:51:28 · 245 阅读 · 0 评论 -
正则有关面试题
编写一条正则,用来验证规则:一个6~16位的字符串,必须同时包含有大小写字母和数字let reg = /(?!^[a-zA-Z]+$)(?!^[A-Z0-9]+$)(?!^[a-z0-9]+$)^[a-zA-Z0-9]{6,16}$/;/** 此处使用正则的负向预查* (?!^[a-zA-Z]+$) ==> 不能只包含 纯小写字母 纯大写字母 大小写字母混合* (?!^[A-Z0-9]+$) ==> 不能只包含 纯大写字母 纯数字 大写字母和数字混合* (?!原创 2021-03-11 10:15:17 · 259 阅读 · 0 评论 -
封装方法解析url中所携带的参数
1. 使用 split 截取let url = 'https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&ch=&tn=baidu&bar=&wd=asda&rn=&fenlei=256&oq=&rsv_pq=852f8b600006fe09&rsv_t=d83fhSkb8%2B5kleIGqlIzawqlutDlkezC2Vhw7YJatwRMdmo原创 2021-03-09 19:39:28 · 310 阅读 · 0 评论 -
javascript 三大经典排序
//升序算法 function sort(arr){ for (var i = 0; i <arr.length; i++) { for (var j = 0; j <arr.length-i; j++) { if(arr[ j]>arr[ j+1]){ var c=arr[j];//交换两个变量的位置 arr[j]=a...原创 2020-05-04 23:45:01 · 111 阅读 · 0 评论 -
怎样能使数组降维 数组扁平化?
Array.prototype.{flat,flatMap}这个特性新创造了两个方法,其中:Array.prototype.flat 数组的所有项会以指定的维度降维(扁平化),然后组成新数组返回;Array.prototype.flatMap 首先会执行一次map()方法,然后再通过类似flat()方法扁平化数组。它等同于执行完map() 后再执行一次 flat() 方法,所以当你执行 map() 返回的结果如果是个数组,然后又要将其扁平化时,这个方法会显得方便。来看几个例子解释一下,首先 fl原创 2020-08-11 17:58:46 · 343 阅读 · 0 评论 -
手写 new 关键字
function myNew(Func, ...args) { // 创建一个新对象 const obj = {}; // 新对象原型指向构造函数原型对象 obj.__proto__ = Func.prototype; // 将构造函数的this指向新对象 let result = Func.apply(obj, args); // 根据返回值判断 return result instanceof Object ? result : obj;}使用function.原创 2021-03-02 09:33:49 · 100 阅读 · 0 评论 -
javascript 树形结构数据打印
const list = [{ id: 1001, parentId: 0, name: 'AA' }, { id: 1002, parentId: 1001, name: 'BB' }, { id: 1003, parentId: 1001, name: 'CC' }, { id: 1004, parentId: 1003, name: 'DD' }, {原创 2021-02-23 16:57:59 · 927 阅读 · 0 评论 -
JSON Key 驼峰转换
实现一个转换函数 convert,将 JSON 对象的 key 从下划线形式(under_score_case)转换到小驼峰形式(camelCase)// 字符串的下划线格式转驼峰格式,eg:hello_world => helloWorldfunction underline2Hump(str){ return s.replace(/_(\w)/g, function(all, letter) { return letter.toUpperCase() })}// 字符串的原创 2021-02-23 16:45:30 · 2810 阅读 · 0 评论 -
h5 input 实现 上传文件
单个文件上传html<input type="file" id="file1" oninput="fileChange()" ><img src="" alt="上传" id="upLoadImg">js const file1 = document.getElementById('file1') const upLoadImg = document.getElementById('upLoadImg') function fileChange() {原创 2021-01-27 10:28:56 · 1017 阅读 · 0 评论 -
封装ajax
function myAjax (options){ this.method = options.method this.url = options.url this.data = options.data || '' this.flag = options.flag || true this.callback = options.callback var self = this var xmlHttp if (typeof XMLHttpRe原创 2021-01-21 09:49:13 · 87 阅读 · 0 评论 -
web开发 兼容不同的屏幕分辨率和浏览器
在web开发的过程中经常会要求根据不同的屏幕大小来做兼容,尤其是webAPP的流行和各种响应式布局,兼容不同的屏幕分辨率更是前端开发者必会的技能。本篇主要介绍用CSS 的媒体查询来兼容不同的屏幕大小和用js 来兼容不同的浏览器(主要是IE、火狐、360、谷歌、UC、QQ、百度等)。一、CSS媒体查询使用 CSS3 的@media 查询,你可以针对不同的媒体类型定义不同的样式。它的语法结构是:@media mediatype and|not|only (media feature) { CSS原创 2020-12-15 10:50:47 · 1545 阅读 · 0 评论