- 博客(39)
- 资源 (1)
- 收藏
- 关注
原创 Javascript 懒加载与预加载(8)
1.懒加载 懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。1.1 使用场景 当网站的图片很多或图片比较大时,基于网站性能和用户体验考虑,这时需要用到懒加载。 1.2 原理 初始时,img中的src不赋值(或者赋以一个占位图片),而是将真正的图片地址存在用户自定义属性dat...
2022-05-28 22:51:44
592
原创 Javascript优化(7)(事件流、事件冒泡、[阻止]事件捕获、事件委托)
1.事件流 事件流指的是从页面中接收事件的顺序。 分为冒泡流和捕获流。 DOM二级事件规定事件流包括三个阶段: 1)事件捕获阶段 2)处于目标阶段 3)事件冒泡阶段 DOM在触发事件后,会经历事件捕获和事件冒泡两个最重要阶段。2.事件冒泡 由最里层向最外层触发事件的过程,叫事件冒泡。(同时绑定一个事件,由内到外执行)<body> <div id="parent"> <button id="c...
2022-05-28 22:27:37
324
原创 Bootstrap的全局CSS样式
全局CSS样式(核心内容,掌握) 1)标题 h1-h6 small 2)页面主体 body(字号为14px,行间距1.5行) p(字号为14px,行间距1.5行,margin为10px) 3)内联文本元素及类(样式) 元素: mark:标记 del:删除 ...
2022-05-28 12:10:39
411
原创 栅格布局的使用
栅格布局 1)四种栅格布局 a.手机端 .col-xs-* (屏宽768px以下) b.平板电脑端 .col-sm-* (屏宽768px-992px之间)版心最大宽度750px c.中型PC端 .col-md-* (屏宽992px-1200px之间)版心最大宽度970px d.大型PC端 ...
2022-05-28 12:03:19
3271
原创 Bootstrap框架解析
Bootstrap框架解析 1)必须使用HTML5文档类型 <!DOCTYPE html> 2)移动设备优先 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />其中meta viewport 有6个...
2022-05-28 11:38:40
224
原创 认识Bootstrap与引用
1.官网:Bootstrap中文网 (bootcss.com) 2.BS是一个入门级UI框架,汇集了HTML、CSS(less)(布局)和JavaScript(插件)的一个框架。 3.BS不是所有项目都适合使用BS实现布局,如果UI工程师没有按照BS的栅格系统理念去设计UI图,因为BS不适合做固定宽高的网页。BS一般用于开发没有UI图的项目,且为响应式的项目。 4.BS3和BS4的区别: BS3有4种栅格,而BS4有5种栅格; BS4全面引入ES6,...
2022-05-28 11:18:06
800
原创 当前流行的UI框架
最流行的UI框架 1.Bootstrap:用于开发响应式布局、移动优先的Web项目。可以快速上手,几乎没什么学习成本,是一个入门级的UI框架。 2.AmazeUI:妹子UI,它也是一个移动优先的UI框架,主要能解决国内浏览器存在的跨屏适配和兼容性问题。 3.Uni-app:是一个使用Vue.js开发的所有前端应用的UI框架,开发一套代码,可发布到IOS、Android、H5和微信小程序、快应用等多个平台。 4.ElementUI:是由饿了么前端开发团队开源的UI框架,主要用于...
2022-05-28 11:10:53
6736
原创 JSON、ajax请求、DOM操作
1.JSON JSON(JavaScript Object Natation:JS对象表示法)是一种轻量级的数据交换格式。用独立的编程语言的文本格式来存储和表示数据。 1)优点 易于阅读和编写,同时也易于浏览器解析和生成,并有效地提升网络传输效率。 2)与XML比较 JSON书写或解析时是一个对象,更容易解析;而XML是由用户自定义标签来存储数据的,对于前端来说,不容易书写且解析起来比较困难。 3)JSON文件内容 它可以是一个...
2022-04-06 22:44:07
577
原创 JS原生轮播图
通过计算每张图大小,进行偏移值增加减少数值实现图片的轮播效果HTML <div class="carousel"> <ul class="imgs"> <li><a href="#"><img src="images/01.jpg" alt=""></a></li> <li><a href="#"><img src="images/02.jpg" al
2022-03-30 09:55:57
154
1
原创 循环滚动轮播图
HTML<div id="source"> <div id="insourse"> <div id="sourse1"> <a href="#"><img src="images/01.jpg" alt="img"></a> <a href="#"><img src="images/02.jpg" alt="img"></a>
2022-03-29 22:09:49
231
原创 轮播图的两种简单方式(display,src)
方法一:HTML<body> <div class="banner"> <a href="#"> <img src="images/01.jpg" alt="banner"> </a> </div></body>CSS *{ padding: 0; margin: 0; } .banner{ width: 700px
2022-03-28 22:53:26
639
原创 放大镜案例(html/css/js)
实例效果为淘宝、京东等购买物品查看图片细节效果HTML<body> <div class="zoom"> <!-- 小图 --> <div class="small-img"> <img src="images/small01.jpg" alt="small-img"> <div class="ball"></div> <div class="mask"
2022-03-27 15:16:45
168
原创 javascript(5)——基本包装类型、变量、作用域及内存
1.基本包装类型 在基本数据类型中有3个特殊的类的存在:String、Number和Boolean。 上面三个基本类型都有自己的包装对象,有相应的属性和方法。调用方法的过程是在后台发生的,所以我们称作为基本包装类型。 通俗地讲就是基本类型的数据都有一个包装它们的类,这些类都有自己的属性和方法,这些基本类型的数据都可以直接去调用这些属性和方法。 1)Boolean类型 没有自己的属性和方法。 2)Number类型 a.属性 ...
2022-03-23 23:09:04
104
原创 JavaScript(4)——内置对象、面向对象
1.内置对象 1)global对象 在JS中没有global对象,Web浏览器将Global作为window对象的一部分加以实现。 方法: a.encodeURIComponent():对unicode进行编码处理 b.decodeURIComponent():对unicode编码进行解码处理 c.eval(''):具有字符串解析器的作用(慎用!因为它的性能较差,且比较危险) 2)Mat...
2022-03-22 22:16:51
1387
原创 面向对象常用方法——isPrototypeOf、hasOwnProperty、getOwnPropertyDescriptor、defineProperty、propertylsEnumerable
1、isPrototypeOf()作用:用于指示对象是否存在于另一个对象的原型链中,存在返回true,否则返回false语法:prototypeObject.isPrototypeOf(object)用例: function Person(name,age){ this.name=name; this.age=age; } var lisi=new Person("张三 ",20); console.log(Person.prototype.isProto
2022-03-21 15:20:34
411
原创 面向对象常用属性及运算符——prototype、constructor、in、delete、instanceof
prototype:用于获取和设置对象的原型属性语法:object.prototype.name=value实例: function emlpoyee(name,job,born){ this.name=name; this.job=job; this.born=born; } var bill=new emlpoyee("Bill Gataes","Engineer",1985); emlpoyee.prototype.salary=null; bi
2022-03-21 11:11:04
240
原创 利用原型属性自定义内置函数——删除元素
//删除指定下标的元素 Array.prototype.removeAt=function(){ if(isNaN(index)||index>this.length){//若不是一个数字或者大于数组长度 return;//index输入不合理,直接结束对象 } this.splice(index,1) } //根据内容删除元素 Array.prototype.remove=function(obj){ if(typeof obj!="..
2022-03-20 14:20:51
74
原创 点击选中目标移动另一个区间
html<body> <div class="select"> <select id="sel1" multiple size="10"> <option value="香蕉">香蕉</option> <option value="苹果">苹果</option> <option value="鸭梨">鸭梨</option> <op
2022-03-19 19:59:27
102
原创 javascript(3)——函数
1.函数 函数就是将具有一定功能的一段JS代码的封装,可以在程序的多个地方被反复调用。 1)定义函数 格式一: function 函数名([形参列表]){ 函数体; [return [<表达式>];] } 格式二: var 变量名 = function([形参列表]){ 函数体;...
2022-03-12 22:33:21
90
原创 javascript基础(2)
1.常量 常量也叫直接量或字面量,在程序中直接给出具体的数据。 常量是不可以改变的。 如:100,true,'abc',null,undefined等2.变量 变量就是在内存中开辟一段空间用于存放某个数据。 变量必须要有变量名,变量名必须遵循标识符的命名规范。 定义: 1)只定义变量 var x; var a, b, c; 2)定义变量且赋值 v...
2022-03-11 20:21:12
80
原创 Javascript基础(1)
1.JS是运行在客户端的一种解释型编程语言,它是一种弱类型的语言。2.JS的作用: 用来完成前后端交互、增加用户体验的一些逻辑实现。3.一个网页是三部分组成:结构(HTML/HTML5)、表现(CSS/CSS3)和形为(JavaScript)。4.前端开发的核心是:JavaScript。5.JavaScript的组成: 1)ECMAScript(标准:ECMA-262):基础语言部分(基础、面向对象等) 2)DOM(标准:W3C):节点操作 3)BOM(无标准):浏览...
2022-03-10 22:07:21
555
原创 网页中的位图与矢量图使用
1.位图和矢量图 位图是由像素点组成的,文件较大,放大会失真,一般用来表示人物、风景等;矢量图是由线条组成的,文件较小,放大后不会失真,一般用来表示工程图等,是由若干个几何图形拼合而成。2.分辨率 又叫解析度、解像度。可分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。 图像分辨率就是单位英寸中所包含的像素点数。分辨率越高意味着图像越清晰,但这个图像文件也越大。3.位分辨率 又叫色彩深度或位深度,批一个像素中,每个颜色分量(Red,Green,Blue,Alpha通道...
2022-03-09 10:05:20
568
原创 点击折叠菜单(HTML/CSS/JS)
HTML <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分、和“主体”部分,其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。</p> </li> <li>
2022-03-09 10:01:23
2753
1
原创 点击回到顶部(html/css/js)
HTML <img src="img/001.jpg" alt=""> <img src="img/002.jpg" alt=""> <img src="img/003.jpg" alt=""> <img src="img/004.jpg" alt=""> <img src="img/005.jpg" alt=""> <img src="img/006.jpg" alt="">
2022-03-09 09:34:22
190
原创 预加载案例
预加载: 提前加载图片,当用户需要查看时可直接从本地缓存中渲染。预加载优点: 方便网站上冲浪,保证了图片快速、无缝地发布,增加用户体验。用CSS实现HTML<div class="box"> <div id="preload1"></div> <div id="preload2"></div> <div id="preload3"></div> ...
2022-03-08 22:15:40
106
原创 懒加载案例
懒加载:懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。懒加载优点: 页面加载速度快、可以减轻服务器压力、节约了流量,用户体验好HTML<body> <img src="" class="imgs" data-src="img/...
2022-03-08 21:55:15
181
原创 javascript基础事件以及Even对象(6)
1.事件 事件指的是文档或浏览器窗口中发生的一些特定的交互瞬间,也可以理解为:作用在对象上的操作(动作)。 事件是可以被JS监听到的行为。一般在开发中,是通过触发DOM来完成事件操作。2.EventTarget接收事件接口 EventTarget是一个由可以接收事件的对象来实现接口,并且为它们创建监听器。 三个接口: 1)addEventListener():绑定事件监听函数,实现监听 2)removeEventListener():移除事件监听 3)disp...
2022-03-08 15:50:05
673
原创 鼠标拖动模块移动(html、css、js)
HTML<div id="box">模块</div>CSS*{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: red; position: absolute; t
2022-03-08 15:43:25
295
原创 滚动鼠标轮,增加/减少模块高度(html、css、js)
HTML部分<div class="mouse">事件对象</div>CSS部分<style> .mouse{ width: 100px; background-color: red; height: 25px; }</style>JS部分 var oMouse=document.getElementsByClassName('m
2022-03-08 14:33:16
204
原创 酷我音乐播放(html、css)
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="music.css"></head><body><div class="nav"> <div class
2022-03-07 22:24:54
1421
原创 1.9 CSS 布局
1.多列(分栏) 1)column-count 规定元素应该被分隔的列数(栏数)。 column-count: number|auto; 2)column-gap 设置栏间距。 column-gap: length|normal; 3)column-rule 设置栏间分隔线。 a)column-rule-style:设置线型。 none 没有分隔线 hidden 隐藏线 ...
2022-03-06 22:44:53
94
原创 1.8 CSS3 动画
1.变形(transform) translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。 位移效果 translateX(n) 定义 2D 转换,沿着 X 轴移动元素。 translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。 scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。 缩放效果 scaleX(n) 定义 2D 缩放转换,改变元素的宽度。 scaleY(n) 定义 2D 缩放转换,改变元素的高度。...
2022-03-06 22:37:21
63
原创 1.7 CSS3新特性
1.CSS3是CSS2.1的一个升级版,它是对CSS的一个扩展。2.CSS3的主要新特性: 1)选择器 2)阴影 3)形状转换(2D <-> 3D) 4)变形 5)动画(过渡动画、帧动画) 6)边框 7)多重背景 8)反射 9)文字 10)颜色函数(rgba/hsl/hsla) 11)滤镜(filter) 12)弹性布局 13)多列布局 14)栅格布局 15)盒模型...
2022-03-05 21:51:57
135
原创 1.6 HTML5新特性
1.HTML5由W3C和WHAT组织机构共同研发出来的,于2014年正式发布。2.HTML5成为了新一代网页开发标准。3.HTML5新特性(面试) 1)增加了audio和video音频播放,抛弃了Flash 2)新增了canvas画布(绘画,制作动画(如小游戏开发等)) 3)地理定位 4)增加了离线缓存 5)硬件加速 6)Web Socket(全双工通信) 7)增加了本地存储 8)新增了一些语义化标签4.网页布局标签 header...
2022-03-04 22:50:59
126
原创 1.5 CSS定位布局
1.定位(position)(重点) 设定元素在文档中的位置。会将标签(元素)转换为块级。2.定位分类(属性值) 1)static:静态定位 默认值,没有定位,不能设置偏移值(left/top/right/bottom),占用标准流(文档流) 2)relative:相对定位 占用标准流(文档流),它会出现在文档流中它该出现的位置。可以通过设置偏移值改变其位置。它相对于自身所占的位置做偏移。 3)absolute:绝对定位 脱离...
2022-03-04 22:17:14
60
原创 1.4 CSS浮动布局与盒模型
1.什么是浮动? 浮动就是让块级标签不独占一行。目的(使用场景):把块级标签元素可以排在一行上。2.浮动的原理 就是让元素脱离文档流,不占用标准流。3.float的属性值: left:左浮动 right:右浮动 none:默认值,不浮动4.浮动后,后面的元素不管是块级还是行级元素,不会显示在下一行。5.清除浮动 目的:让后面的元素自动掉到下一行。 方法: 1)添加空标签,并设置样式:clear:both; ...
2022-03-04 21:39:23
94
原创 1.3 CSS基础
1.CSS:层叠样式表,用来美化网页的。做到结构(HTML)和表现(CSS)分离。2.基本语法: 选择器 { 属性: 属性值; }3.CSS引用方式:行间样式、内部样式、外部样式、导入外部样式。 行间样式:直接在标签上书写样式。 <p style="color:red">这是p标签</p> 内部样式:在文件的内部书写样式。 <style type="text/css"> ...
2022-03-04 21:29:27
47
原创 1.2 HTML标签属性
1.标签由标签名、标签属性和文本内容三部分组成(注意:单标签没有文本内容)。2.标签属性是对标签的一种描述方式。3.标签属性分通用属性、自有属性和自定义属性。4.通用属性:所有标签都具有的属性(除<br />标签外)。通用属性有:id:用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。class:用来给标签取一个类名。style:用来设置该标签的行内样式。title:当鼠标移到该标签...
2022-03-04 21:20:37
241
原创 1.1 HTML基本认识
1. HTML是一种超文本标记语言,它不属于编程语言。2. HTML5是2014后推出的,它是公认的下一代web语言,是重要的网络推手。3. HTML具有简易性、可扩展性、平台无关性和通用性等特点。4.网页分为静态和动态两种。5.五大主流浏览器: IE (Edge), FireFox, Chrome, Opera, safari6.浏览器内核由渲染引擎和JS引擎两部分组成。内核: Trident (IE), Gecko (FireFox) , Webkit (safari/chrom
2022-03-04 21:15:30
291
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人