- 博客(30)
- 收藏
- 关注
RSS订阅原创 如何优化页面 从html css js 三个维度进行分析
在html 上多使用语义化的标签 减少标签嵌套的层级css 上 提高选择器的精准度 多使用精灵图能用css 去实现的动画就不用 js 来实现尽量去使用内部样式表js 上 多去使用 switch 少用if else 的嵌套因为switch 采用命中机制 效率高在处理逻辑事件上 把概率大的事件放到 左边来实现减少 for 循环的嵌套...
2022-06-13 21:15:24
134
原创 AJAX————易错知识点
AJAX是指可以局部刷新数据在不刷新页面的情况下提交数据同步：上一件任务完成 下一件任务才开始，例如 alert 弹窗异步： 多个任务同时间开始，不一定是同一个事件结束 ，例如 下载 图片的加载AJAX的 打开需要创建 打卡 监听 发送这四步1.创建var ajax = new XMLHttpRequest()2.打开同步异步3.监听ajax.onreadystatechange = function() {console.log(ajax.responseText)}4.发送加粗样
2022-06-13 21:06:11
122
原创 面试中JS常见的关于面向对象的问题
封装：将一堆方法和属性放在一起继承：最大限度重用代码多态：不同类的同名方法构造函数：开辟内存空间析构函数：释放内存空间：是该类的公共存储空间，用于节省内存当访问对象的某个属性或者方法时，先在自己的构造函数中去寻找，如果没有，就在自己的原型中去寻找，如果还没有，就找原型的原型，一直找到Object的原型，这样形成的一个链条称之为原型链...
2022-06-02 19:43:45
316
原创 JS 关于什么是事件委托
JS 关于什么是事件委托呢利用事件冒泡动态实现为元素绑定事件的方法称为事件委托（事件代理）事件委托就是指把原本需要绑定在子元素上的事件（onclick、onkeydown 等）委托给它的父元素，让父元素来监听子元素的冒泡事件，并在子元素发生事件冒泡时找到这个子元素。那么为什么要去使用事件委托呢使用事件委托能极大的减轻我们的工作量，同时也能提高页面的性能。事件委托的优点有以下1）可以减小内存消耗使用事件委托可以大量节省内存，减少事件的定义2）可以动态绑定事件有时我们需要动态增加或移除页面中
2022-05-26 11:38:56
389
原创 DOM0和DOM2级事件
DOM0和 DOM2级事件DOM(Document Object Model，文档对象模型)是针对HTML文档和XML文档的一个API，允许开发人员添加、移出和修改页面的某一部分DOM0级事件是所有浏览器都支持的，DOM0级事件只能注册一次，后面新添加的会覆盖之前的注册 在html上添加<div onclick = "alert('hello')"></div> this 指向自身匿名函数 d.onclick = function(){} this 指向自身普通函数 o
2022-05-25 19:58:02
45
原创 JS阻止默认事件和阻止冒泡事件
JS阻止默认事件和阻止冒泡事件什么是事件冒泡呢?事件发生后从内到外或者从外到内的传播因为事件源本身（可能）并没有处理事件的能力，或处理事件的函数并未绑定在该事件源上所以会发生传播事件冒泡会经常影响事件委托机制<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
2022-05-25 17:19:03
168
原创 JS 触屏事件
JS触屏事件触屏事件当中兼容DOM的触摸事件 touchstart 当手指触摸屏幕时触发 touchmove 当手机在屏幕上滑动时连续触发 touchend当手指从屏幕上移开时触发 touchcancel当系统停止跟踪时触发每个 触摸事件包含的三个触摸列表touches 当跟踪的触摸操作的Touch对象的数组targetTouches 特定于事件目标的Touch对象的数组changeTouches 自上次触摸以来发生哪些改变的Touch对象的数组每一个touch对象包含的属
2022-05-25 16:44:27
340
原创 JavaScript存储对象
JavaScript存储对象web提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作cookie,localStorage,sessionStorage的区别1.cookie储存量小受到限制设置过期时间删除前后端自动同步2.localStorage存储量大需要手动删除3.sessionStorage临时存储，关闭浏览器自动删除存储对象属性 key(n) 返回存储对象中第 n 个键的名称
2022-05-25 16:25:38
630
原创 EVENT事件的一些实现
EVENT的一些实现DOM事件绑定DOM0级事件*- 所有的浏览器都支持事件只能注册一次，后面的会覆盖掉旧的*注册*- 在html上添加 this指向自身匿名函数 d.onclick = function() {} this指向自身普通函数 onclick = “ok()” 相当于动态调用 this 指向window 没有事件参数e的传递*DOM2级事件- IE*-attachEvent(event,function) event 要加ondetachEv
2022-05-22 14:54:12
94
原创 什么是事件类型
什么是事件类型事件类型的基本类型UI事件load 当页面完全加载后在window上触发图片也可以出发load事件resize 当窗口大小变化时window上触发scroll当用户滚动带滚动条的元素中的内容时，在该元素上面触发鼠标事件事件类型有onclick（单击）ondblclick（双击）oncontextmenu（右键菜单）onmouseover（移入）onmouseout（移出）onmouseenter（移入）onmouseleave（移出）onmousedown（按
2022-05-19 18:00:31
164
原创 BOM 学习 BOM是什么？
关于BOM是什么？BOM指的是Browser Object Model 一系列与浏览器相关的信息BOM里有window对象 与 window子对象window对象窗口位置screenLeft 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF浏览器screenTop 返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器screen X 功能同screenLeft，兼容FFscreen Y 功能同screenTop， 兼容FF窗口大小innerWidth返回网页
2022-05-19 11:41:02
131
原创 js dom操作实现雪花下落
关于使用dom操作完成雪花下落的实现关于实现雪花下落的实现实现代码段如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
2022-05-18 16:08:33
98
原创 通过js原生来实现小球的碰撞反弹（不断迭代）
通过改变小球的left和top值来改变小球的移动 小球与小球之间的碰撞，要判断小球在被撞小球的哪个方向，从而判断小球该向哪个方向移动，同样的改变小球的坐标值，来实现小球的反弹1. 先实现一个小球在固定容器内随机起点随机速度移动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content
2022-05-18 08:51:01
1152
原创 JS es5当中关于字符串的操作有哪些
字符串的操作如何获取长度str.length如何转换为大写str.toUppercase()如何转换为小写str.toLowercase()字符串的剪裁，返回第一个数组，x:某种规则str.split(参数x)获取子元素的下标，如果不存在就返回-1str.indexOf()start,必填项 非负整数stop，选填项 非负整数返回start与stop之间的内容str.substring(start,stop)返回start开始，指定length的内容str.subst
2022-05-08 09:42:11
161
原创 js当中关于es5 的代码规范
1代码规范思维导图如下**2.常用的数据结构如下思维导图如下3.数据类型思维导图如下****4.运算符思维导图如下**5。数据类型的转换6.基本函数的使用思维导图如下有关冒泡排序法的使用 for (var i=0; i<arr.length-1; i++) { // 走几遍(-1是因为 最后一个元素没必要再比较了) for (var j=0; j<arr.length-i-1; j++) {
2022-05-04 19:50:58
334
原创 JS 中es5 关于数组的操作以及数字电子时钟
JS中有关数组的操作思维导图如下设计案例有如下如何设计出电子时钟<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
2022-05-04 19:36:07
85
原创 关于es5中的重要知识点
关于es5中的重要知识点1.== 与 === 的区别只比较内容大小，===既比较大小又比较数据类型2. if 与 switch 做比较if得按照流程来逐条执行switch 命中目标 速度较快但是switch的case后必须跟常量表达式，所以有一定的使用限制3. 基本数据类型与引用数据类型的区别基本数据类型的值在栈区，引用数据类型的值在堆区4. 深浅拷贝浅拷贝：拷贝了地址深拷贝：拷贝了内容...
2022-05-03 20:23:53
82
原创 渐变，倒影，过渡，形变
渐变线性渐变渐变重复渐变过渡transitiontransition-propertytransition-durationtransition-delaytransition-timing-function倒影变形
2022-04-27 21:06:58
66
原创 关于form表单
HTML 表单用于收集用户输入。HTML 表单HTML 表单包含表单元素。表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。<input> 元素<input> 元素是最重要的表单元素。<input> 元素有很多形态，根据不同的 type 属性。*text 定义常规文本输入。radio 定义单选按钮输入（选择多个选择之一）submit 定义提交按钮（提交表单）*<input type="text"> 定义用于
2022-04-24 15:42:40
208
原创 html中的表格table
关于html中的表格table表格的定义表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr&g
2022-04-24 15:24:00
1006
原创 关于仿写暖家网首页
关于如何仿写暖家网的首页代码段如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-04-24 15:13:11
70
原创 关于轰隆隆网站单页的仿写实现
关于轰隆隆网站单页的仿写实现实现的代码段如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
2022-04-24 15:09:24
67
原创 关于利用浮动实现复杂图文练习
关于如何利用浮动实现复杂图文练习复杂图文练习1实现代码段如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-
2022-04-24 15:00:46
1313
原创 关于仿写00片刻企业站
关于仿写00片刻企业站单页index代码段如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
2022-04-24 14:49:44
550
2
原创 如何使用浮动实现简单的单图多文组合
如何使用浮动实现简单的单图多文组合案例1实现代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=
2022-04-24 14:40:42
59
原创 在css中关于让文本以及行元素块元素居中的三种方式
想要使文本垂直居中可以使用height=line-height在父级使用text-align:center;可以使子集中的行元素行块元素文本内容水平居中写在块元素当中 相对于父元素水平居中 margin:0 auto;
2022-04-24 14:31:52
314
原创 关于CSS的基础
关于CSS的基础什么是css和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。怎么将字体设置成红色新建一个 styles 文件夹，在其中新建一个 style.css 文件，将这三行 CSS 保存在这个新文件中p { color: red;}然后再将该 CSS 文件连接至 HTML 文档<li
2022-04-13 17:48:28
88
原创 关于盒模型你想知道的一切
这里写自定义目录标题什么是盒模型盒模型的组成盒模型的面积如何计算padding 内边距border 边框margin 外边距怪异盒模型box-sizing什么是盒模型在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。盒模型的组成CSS中组成一个块级盒子需要:**Content box:** 这个区域是用来显示内容，大小可以通过设置 width 和 height.**Padding box**: 包围在
2022-04-13 16:57:24
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人