- 博客(31)
- 收藏
- 关注
RSS订阅原创 前端不止 CRUD，还能当 Spider Man
基于 Electron + Puppeteer + ChromeExtension 的低代码可视化网络爬虫， 相比 rpa 软件，更了解 DOM。
2023-12-08 16:25:15
452
原创 弹性布局（flex布局）
弹性盒子(flex)声明定义display:flexdisplay: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
180
原创 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
212
原创 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
239
原创 jQuery初探
引入jquery本地引入 CDN引入jquery 基础语法$(selector).actin()$ 定义jquery selector 选择器 action 执行的操作jquery 选择器元素选择器 $(‘元素名’)id 选择器 $(’#+id’)类选择器 $(’. + class’)jquery 事件常用的事件方法点击事件 click单击事件click()双击事件dblclick()mouseentermouseleave绑定事件.bi
2021-04-19 10:05:08
79
原创 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
260
原创 H5本地储存 Web Storage
Web StoragelocalStorage sessionStoragelocalStorage (生命周期 永久)获取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
131
原创 获取窗口属性/脚本化CSS
获取窗口属性查看滚动条的滚动距离window.pageXOffset window.pageYOffset (IE8及以下不兼容)document.body.scrollLeft/Top document.documentElenment.scrollLeft/Top兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值封装兼容性方法，求滚动轮滚动距离 getScrollOffset() function getScrollOffset(){ if(
2021-04-19 10:04:05
109
原创 date对象/定时器
日期对象date()封装函数，打印当前时间getsetjs定时器setInterval(function(){},1000) 每隔1000ms执行一次函数 非常不准window上的方法 setInterval有返回值setInterval(‘字符串’,1000) 字符串可以当作js代码执行clearInterval() setInterval有返回值，clear返回值可以清楚定时循环setTimeout(function(){},1000) 定时器，1000ms之
2021-04-19 10:03:50
70
原创 JSON/js异步加载
JSONjson是一种传输数据的格式，（以对象为样板，本质上就是对象，但是用途有区别，对象就是本地用的，json是用来传输的）方法 JSON.parse(): string -> json JSON.stringify(); json -> stringDOM树 深度优先，解析DOM树 而不是等DOM里面资源加载完才完成异步js加载defer IE9一下可以用 其他浏览器不能用 dom解析完才能执行async W3C标准 只能引入外部文件 加载完就执行<
2021-04-19 10:03:20
175
原创 js/浅层克隆/深层克隆/拷贝
克隆浅层克隆浅层克隆，引用值拷贝，另一个也变。 let obj = { name : 'abc', age : 123, sex : 'female', card : ['aa','bb'] } let obj1 ={} function clone(orgin,target
2021-04-13 11:19:26
92
原创 js this
this函数预编译过程 this ——> window全局作用域里this ——> windowcall/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
73
原创 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
78
原创 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
1391
原创 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
257
原创 js命名空间/对象枚举/遍历/for in循环
命名空间通过闭包来实现变量的私有化，来解决命名冲突的问题，防止污染全局变量 var initDemo1 = (function(){ var name =222; function callName(){ console.log(name); } return function(){ callName();
2021-04-13 11:15:31
147
原创 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
98
原创 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
743
原创 js实现提取textarea文本信息，然后进行处理
js实现提取textarea文本信息，然后进行处理提取textarea文本信息，并提出其中A-Z字母出现的次数，并算出频率，然后从大到小排序提取textarea文本信息document.getElementById(“textarea类名”).value；因为文本信息有大小写,所以先将文本信息都转换为大写或者小写.toUpperCase() 方法可以将字符串里的小写转换为大写遍历字符串，然后提取每个字母出现的次数，记录到表单中通过A-Z字母的ASCII码对比每个字符串中的每个字
2021-04-13 11:13:15
1889
原创 DOM初识
什么是DOMdocument object model 文档对象模型dom里面提供了一系列的方法DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合，也有人称DOM是对接HTML和XML的标准编程接口getElementsByTagName(‘参数’)[参数] 通过标签名选择节点 第一个参数为标签名 传递的为一个类数组 第二个参数为数组的哪一位.style 为选中的样式列表doucment.create
2021-04-13 11:12:30
125
原创 使用git工具简单模拟协同开发
使用git工具简单模拟协同开发背景:现在有个项目，项目经理leader找到A和B，一起开发这个软件流程现在leader写了一个框架 master版本为1.0.0A和B分别切出一个分支为simuA simuB 在各自分支上填写代码然后提交至origin项目经理来拼接A和B写的代码，最后发布leader_finishedA创建一个文件夹clone 项目经理发布的mastergit checkout -b simuA master填写需要填写的程序add commit push
2021-04-12 11:08:47
121
原创 git命令的使用
git命令的使用初始化仓库git init //初始化仓库（本文件） git init yourdir(指定文件)初始化仓库之后就可以看到文件夹之中生成了一个隐藏的文件 .git仓库会记录你所有的变更行为提交 Commitgit status 查看当前仓库的状态信息git add 将文件加入暂存区 该文件会变绿（之前为红色）git add . 可以将所有文件都加入暂存区提交变更 gti commit -m <信息>git log 查看日志 可
2021-04-12 11:08:09
525
原创 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
164
原创 javascript原型/原型链/call/apply
javascript原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先 ，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象利用原型的特点和概念可以提取共有属性对象如何查看原型 隐式属性 proto对象如何查看对象的构造函数 constructor原型 构造函数构造出的对象的爷爷 构造函数中this中有隐式的 proto 指向 当构造出的对象在自身或父级找不到属性或属性值时会向爷爷去找 也就是__proto__指向去找Person
2021-04-12 11:06:58
100
原创 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
75
原创 javascript预编译
预编译##预编译之前需要了解暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有一切声明的全局变量，全是window的属性window属性就是GO GO里面包含的东西 全在window属性里预编译四步创建AO对象找行参和变量声明，将变量和行参名作为AO属性名，值为undefined将实参和行参统一在函数体里面找到函数声明，值赋予函数体实例实例一function text(){ console.log(b); //undefined
2021-04-12 11:05:56
70
原创 CSS实现侧边栏
CSS实现侧边栏侧边栏使用窗口定位 position:fixed;侧边栏窗口定位 随着浏览器窗口的移动而移动先窗口定位 然后top right 调整位置aside{ position: fixed; top: 185px; right: 23px;}关于锚点HTML5废除了HTML4只能使用a标签的name属性来进行定位 而是设置ID属性来定位，避免了4中必须嵌套a标签的繁杂定位锚点<a href="#+需要定位元素的ID"></a>
2021-04-12 11:05:11
1933
原创 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
897
原创 CSS复习
第九章:CSS3基础css的历史CSS的发展得很好初用CSScss的语法单元是样式 每个样式包含两部分内容：选择器和声明（规则）引入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
250
原创 HTML复习
第一章：简介HTML 发展得很好第二章：标签div：表示区块，对页面整体进行分区与section不同 span：对行内元素进行分组 过度使用div容易造成结构复杂化属性：id 和 class 尽量避免class的广泛使用article 定义文章块 用来标识页面中一块完整的，独立的，可以被转发的内容。article可以嵌套使用比如文章和评论 强调独立性section 表示区块 在页面中 多对内容进行区分 例如章节 页眉 页脚 文档中的其他部分 强调相关性nav 表示导航条 用来表示页面导航
2021-04-12 11:02:32
229
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人