浅浅海鸥-优快云博客

原创前端不止 CRUD，还能当 Spider Man

基于 Electron + Puppeteer + ChromeExtension 的低代码可视化网络爬虫，相比 rpa 软件，更了解 DOM。

2023-12-08 16:25:15 1892 1

弹性盒子(flex) 声明定义 display:flex display:inline-flex 控制盒子元素的排列方向 flex-direction: row; 从左到右水平排列元素（默认值） flex-direction:row-reverse 从右向左排列元素 flex-direction:column 从上到下垂直排列元素 flex-direction:column-reverse 从下到上垂直排列元素控制盒子的拆行 flex-wrap：nowrap 元素不拆行或不拆列（默认值） fle

2021-04-21 14:17:57 312

原创非像素级还原小米官网（未适配移动设备）

非像素级还原小米官网（未适配移动设备）

2021-04-19 10:06:27 218

原创 js鼠标事件/键盘事件/文本事件/窗口事件

事件分类鼠标事件 click mousedown mousemove mouseup contextmenu(右键菜单事件) mouseover（鼠标触碰） mouseout（鼠标离开） mouseenter（H5鼠标触碰） mouseleave（H5鼠标离开）用 button （e的button属性）来区分鼠标按键值0（左键） 1（滚动论） 2（右键） DOM3标准规定:click事件只能监听鼠标左键，只能通过mousedown和mouseup来判断鼠标键解决mousedown 和cli

2021-04-19 10:05:49 357

原创 js绑定事件处理函数/解除事件处理程序/事件冒泡、事件捕获/取消冒泡/ 阻止默认事件/事件对象/事件委托

事件绑定事件处理函数 ele.onxxx = function(event){} <div onclick="console.log('a')"></div> var div = document.getElenmentsByTagName('div')[0]; div.onclick = function(){ this.style.backgroundColor = 'green'; } 兼容性很好，但是一个元素

2021-04-19 10:05:33 363

原创 jQuery初探

引入jquery 本地引入 CDN引入 jquery 基础语法 $(selector).actin() $ 定义jquery selector 选择器 action 执行的操作 jquery 选择器元素选择器 $(‘元素名’) id 选择器 $(’#+id’) 类选择器 $(’. + class’) jquery 事件常用的事件方法点击事件 click 单击事件 click() 双击事件 dblclick() mouseenter mouseleave 绑定事件 .bi

2021-04-19 10:05:08 212

原创 media响应式布局

响应式布局 media 语法外部引用 only screen and (max-width:640px) 仅当设备的宽度小于640ox时使用这个样式 @引用 @media screen and (min-width:640px) { } <style> @media screen and (min-width:640px){ body{ background-color: green;

2021-04-19 10:04:51 403

原创 H5本地储存 Web Storage

Web Storage localStorage sessionStorage localStorage (生命周期永久) 获取localStotage对象 let Ls = window.localStorage; getItem(key) 获取指定key所存储的value值 key(index) 返回列表中对应索引的key值 length 属性返回key/value对列表的长度 removeItem(key) 从Storage中删除一个对应的键值对 setItem(key,va

2021-04-19 10:04:35 290

原创获取窗口属性/脚本化CSS

获取窗口属性查看滚动条的滚动距离 window.pageXOffset window.pageYOffset (IE8及以下不兼容) document.body.scrollLeft/Top document.documentElenment.scrollLeft/Top 兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值封装兼容性方法，求滚动轮滚动距离 getScrollOffset() function getScrollOffset(){ if(

2021-04-19 10:04:05 230

原创 date对象/定时器

日期对象date() 封装函数，打印当前时间 get set js定时器 setInterval(function(){},1000) 每隔1000ms执行一次函数非常不准 window上的方法 setInterval有返回值 setInterval(‘字符串’,1000) 字符串可以当作js代码执行 clearInterval() setInterval有返回值，clear返回值可以清楚定时循环 setTimeout(function(){},1000) 定时器，1000ms之

2021-04-19 10:03:50 163

原创 JSON/js异步加载

JSON json是一种传输数据的格式，（以对象为样板，本质上就是对象，但是用途有区别，对象就是本地用的，json是用来传输的）方法 JSON.parse(): string -> json JSON.stringify(); json -> string DOM树深度优先，解析DOM树而不是等DOM里面资源加载完才完成异步js加载 defer IE9一下可以用其他浏览器不能用 dom解析完才能执行 async W3C标准只能引入外部文件加载完就执行 <

2021-04-19 10:03:20 334

原创 js/浅层克隆/深层克隆/拷贝

克隆浅层克隆浅层克隆，引用值拷贝，另一个也变。 let obj = { name : 'abc', age : 123, sex : 'female', card : ['aa','bb'] } let obj1 ={} function clone(orgin,target

2021-04-13 11:19:26 167

原创 js this

this 函数预编译过程 this ——> window 全局作用域里this ——> window call/apply 可以改变函数运行时this的指向 obj.func() ; func()里面的this 指向obj; let name = '222'; let a = { name : '123', say : function(){ console.log(th

2021-04-13 11:18:28 163

原创 js数组/方法/类数组

数组数组的定义方法字面量 let arr = []; 稀松数组 let arr = [1,23,4]; new Array(); let arr = new Array(); let arr = new Array(1,23,4,5,5); 当只有一个参数的时候，这个参数表示数组的长度数组的读写溢出读，返回undefined 数组常用的方法改变原数组 .push（）向数组的最后一位push值返回数组的长度 Array.prototype.push() = functi

2021-04-13 11:17:46 171

原创 js 通过FileReader实现上传文件并读取文件

通过FileReader实现上传文件并读取文件 FileReader对象中有一个.readAsText方法这个方法有两个参数（file,编码）这个方法没有返回值，方法执行完之后，数据会存放在.result中 HTML： <input type="file" id="choose" onchange="showText()"><br><br> <textarea id="demo" cols="30" rows="10"></text

2021-04-13 11:17:11 1644

原创 js 正则表达式（RegExp）

正则表达式（RegExp）转义字符 \ 字符串换行符 \n 正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择两种创建方法：直接量 new RegExp(); 推荐使用直接量直接量： let reg = /正则表达式/; let aa = /abc/; 匹配字符串中是否有连着一切且必须是小写的abc let str = 'abcd'; //aa.text(str)；测试方法 str中是否有符合aa表达式的字符串返回为布尔值 new Re

2021-04-13 11:16:24 542

原创 js命名空间/对象枚举/遍历/for in循环

命名空间通过闭包来实现变量的私有化，来解决命名冲突的问题，防止污染全局变量 var initDemo1 = (function(){ var name =222; function callName(){ console.log(name); } return function(){ callName();

2021-04-13 11:15:31 249

原创 js继承/闭包/圣杯模式

继承/闭包传统形式 -> 原型链借用构造函数共享原型 Father.prototype.lastName = "deng"; function Father(){ } function Son(){ } Son.prototype = Father.prototype; var son =new Son(); var father =new Father(); //共享原型，但Son.prototype改变 Father,protottype也跟着改变 Father.protot

2021-04-13 11:14:52 205

原创 js 立即执行函数与闭包

立即执行函数针对初始化功能的函数此类函数没有声明，执行完之后立即被销毁定义一个只执行一个的函数，这个函数会一直存在内存空间中，很占用内存，所以对于只执行一次的函数，把它定义为立即执行函数更合理（某些情况除外）只有表达式才能被执行 (function(a,b,c){ console.log(a + b + c*2); }(1,2,3)) //立即执行函数可以有返回值 let num = (function(a,b,c){ let d = a + b + c; return

2021-04-13 11:14:04 887

原创 js实现提取textarea文本信息，然后进行处理

js实现提取textarea文本信息，然后进行处理提取textarea文本信息，并提出其中A-Z字母出现的次数，并算出频率，然后从大到小排序提取textarea文本信息 document.getElementById(“textarea类名”).value；因为文本信息有大小写,所以先将文本信息都转换为大写或者小写 .toUpperCase() 方法可以将字符串里的小写转换为大写遍历字符串，然后提取每个字母出现的次数，记录到表单中通过A-Z字母的ASCII码对比每个字符串中的每个字

2021-04-13 11:13:15 2244

原创 DOM初识

什么是DOM document object model 文档对象模型 dom里面提供了一系列的方法 DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对接HTML和XML的标准编程接口 getElementsByTagName(‘参数’)[参数] 通过标签名选择节点第一个参数为标签名传递的为一个类数组第二个参数为数组的哪一位 .style 为选中的样式列表 doucment.create

2021-04-13 11:12:30 265

原创使用git工具简单模拟协同开发

使用git工具简单模拟协同开发背景:现在有个项目，项目经理leader找到A和B，一起开发这个软件流程现在leader写了一个框架 master版本为1.0.0 A和B分别切出一个分支为simuA simuB 在各自分支上填写代码然后提交至origin 项目经理来拼接A和B写的代码，最后发布leader_finished A 创建一个文件夹 clone 项目经理发布的master git checkout -b simuA master 填写需要填写的程序 add commit push

2021-04-12 11:08:47 206

原创 git命令的使用

git命令的使用初始化仓库 git init //初始化仓库（本文件） git init yourdir(指定文件) 初始化仓库之后就可以看到文件夹之中生成了一个隐藏的文件 .git 仓库会记录你所有的变更行为提交 Commit git status 查看当前仓库的状态信息 git add 将文件加入暂存区该文件会变绿（之前为红色） git add . 可以将所有文件都加入暂存区提交变更 gti commit -m <信息> git log 查看日志可

2021-04-12 11:08:09 741

原创 var let const声明的区别

var let const声明的区别 var 在ECMAScript的任何版本中都可以使用，而let和const只能在ECMASctipt6及更晚的版本中使用 var 关键字声明使用var关键字可以声明任何类型的变量 var a ='abc'; a = 123; 这两条语句第一条先是声明了一个变量a 里面存放了字符串类型的变量第二条则改变这个变量的值，由字符串类型abc变成了数值类型123；虽然不推荐改变变量的类型，但这种写法在ECMAScript中是完全有效的 var 声明的作用

2021-04-12 11:07:38 288

原创 javascript原型/原型链/call/apply

javascript原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象利用原型的特点和概念可以提取共有属性对象如何查看原型隐式属性 proto 对象如何查看对象的构造函数 constructor 原型构造函数构造出的对象的爷爷构造函数中this中有隐式的 proto 指向当构造出的对象在自身或父级找不到属性或属性值时会向爷爷去找也就是__proto__指向去找 Person

2021-04-12 11:06:58 178

原创 javascript对象的创建

javascript对象的创建对象的创建方法构造函数系统自带的构造函数 Object() 自定义的构造函数 function Abc(){} var abc1 = new Abc(); 构造函数名：大驼峰式命名规则系统自带的构造函数 var a=new Object()和var a={}有什么区别? var a = {}，a.toString()等Object对象所具有的方法，a都具有。由此也可以判断，其实a = {}就是a = new Objcet()的简单实现。 var Abc =

2021-04-12 11:06:27 151

原创 javascript预编译

预编译 ##预编译之前需要了解暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有一切声明的全局变量，全是window的属性 window属性就是GO GO里面包含的东西全在window属性里预编译四步创建AO对象找行参和变量声明，将变量和行参名作为AO属性名，值为undefined 将实参和行参统一在函数体里面找到函数声明，值赋予函数体实例实例一 function text(){ console.log(b); //undefined

2021-04-12 11:05:56 188

原创 CSS实现侧边栏

CSS实现侧边栏侧边栏使用窗口定位 position:fixed; 侧边栏窗口定位随着浏览器窗口的移动而移动先窗口定位然后top right 调整位置 aside{ position: fixed; top: 185px; right: 23px; } 关于锚点 HTML5废除了HTML4只能使用a标签的name属性来进行定位而是设置ID属性来定位，避免了4中必须嵌套a标签的繁杂定位锚点 <a href="#+需要定位元素的ID"></a&gt

2021-04-12 11:05:11 2171

原创 CSS实现二级标签

纯CSS实现二级标签 Block 给要显现的标签设置为 display:none; （标签不显示）利用 hover 给要显示的标签设置为 display:block; (标签显示) HTML: <section class="fl"> <ul>目录0 <li>目录1</li> <li>目录2</li> <li>目录3</l

2021-04-12 11:04:24 1186

原创 CSS复习

第九章:CSS3基础 css的历史 CSS的发展得很好初用CSS css的语法单元是样式每个样式包含两部分内容：选择器和声明（规则）引入CSS样式有三种方法第一种：行内样式（css样式置于标签的style属性中）第二种：内部样式（css样式代码置于 css 注释 /* 注释内容 */ css属性众多 css2.1版本有115个属性 css3 新增20多个属性 css属性值绝对值（in cm mm pt pc 用的较少）相对值：em（能根据font-size的值来确定如果fon

2021-04-12 11:03:24 399

原创 HTML复习

第一章：简介 HTML 发展得很好第二章：标签 div：表示区块，对页面整体进行分区与section不同 span：对行内元素进行分组过度使用div容易造成结构复杂化属性：id 和 class 尽量避免class的广泛使用 article 定义文章块用来标识页面中一块完整的，独立的，可以被转发的内容。article可以嵌套使用比如文章和评论强调独立性 section 表示区块在页面中多对内容进行区分例如章节页眉页脚文档中的其他部分强调相关性 nav 表示导航条用来表示页面导航

2021-04-12 11:02:32 349

Sunset_Sunshine的博客