自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(252)
  • 收藏
  • 关注

原创 九、BOM(一) -- BOM对象

DOM:文档对象模型 通过JS来操作网页 BOM:浏览器对象模型 通过JS来操作浏览器的 1、Window -Window对象代表整个浏览器的窗口 -同时Window对象也是全局对象。 在全局作用域中定义的变量会被当做window的属性来保存。 在全局作用域定义的函数会被当做Window的函数来保存。 2、Navigator -代表当前浏览器信息。通过该对象可以识别不同的浏览器 .

2021-07-29 16:14:59 4

原创 八、DOM(四) -- 事件绑定(滑轮事件、键盘事件)

一、滑轮滚动事件 +++ 绑定滚动事件(兼容谷歌、IE浏览器) elem.onmousewheel=function(){ } 绑定滚动事件 event.wheelDelta 只看正负,不看大小。向上滚>0 。向下滚<0 (通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。) +++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有) elem.addE

2021-07-29 16:13:18 16

原创 八、DOM(三) -- 事件

一、事件对象 事件对象: 1) 在事件对象中封装了当前事件相关的一切信息。比如:鼠标的坐标、按键值等 2) 在IE8以上浏览器 当事件回调函数被触发时, 浏览器每次都会将一个事件对象作为一个实参传递给回调函数。 3) 在IE8以下浏览器,包含IE8 事件对象作为window的属性来保存。 1.1 事件对象的使用1)在IE8以上浏览器,事件对象会被当做一个实参传入到事件回调函数中当事件回调

2021-07-29 16:12:35 14

原创 八、DOM(二) -- DOM对象操作

一、 DOM查询1.1 获取元素节点(通过document对象操作) 获取document对象下的元素节点(通过document对象操作) 1、var elem=document.getElementById("box") 根据id属性获取一个元素节点 2、var elems=document.getElementsByName("box") 根据name属性获取一组元素节点 3、var elems=doc

2021-07-29 16:07:20 14

原创 八、DOM(一) -- DOM对象

一、 DOM编程 DOM(Document Objecevt Model) :文档对象模型 1) DOM将整个HTML文档描述为 DOM 定义了访问和操作 HTML 文档的标准 2) 文档,表示的是整个HTML文档 对象,表示的是 模型-2.1 DOM的作用 DOM指的是文档对象模型(Document Object Model)。 JS通过DOM来对HTML文档进行操作。 文档指的就是整个HTML文档 对象指的就是将网页中的每一部分都

2021-07-29 16:06:54 21 1

原创 七、ES对象(四) -- Date对象

一、Date对象 Date对象: 在JS中使用Date表示时间。 创建一个Date对象,会封装创建对象的那一刻的时间 var d=new Date(); 创建一个指定时间的Date对象 1.1 创建Date对象 var d1=new Date(); console.log(d1); var d2=new Date("12/30/2020 19:30:00"); console.l

2021-07-29 15:33:44

原创 七、ES对象(三) -- String对象

一、String对象1.1 字符串的实质 在底层字符串对象实质上是以字符数组的形式存储的。 所以数组的一些特性也适用于字符串。 1.2 创建字符串 1.var str="hello world" 2.var str=new String("hello world"); 1.3 字符串的基本操作 1、获取字符串的长度 2、访问数组的方式也可以用于访问字符串,即使用下标访问字符串。 原因: 字符串底层也是使用了字符数组来保存数据的。

2021-07-29 15:33:01

原创 七、ES对象(二) -- 正则表达式

一、this关键字1.1 前提 1. 在全局作用域中定义的变量或函数会被当做window的属性来保存。 2. 在函数作用域中不使用var关键字定义的变量也会被当做window的属性来保存。1)s( ) 与 window.s( ) 等价 function s(){ c=function ss(){ console.log("12") } } s();

2021-07-28 13:56:49 3

原创 七、ES对象(一) -- 数组对象

一、正则表达式的作用 正则表达式的作用: 1) 检查字符串是否符合规则 2) 将字符串中符合规则的内容提取出来。 二、创建正则表达式 +++ 创建正则表达式 使用RegExp创建正则表达式 var reg=new RegExp("正则表达式","匹配模式"); 使用字面量创建正则表达式 var reg=/正则表达式/匹配模式 +++ 正则表达式的匹配模式 i 忽略大小写

2021-07-28 13:55:36 6

原创 七、对象基础 (三) -- this对象和arguments对象

一、数组(Array) 1.数组也是一个对象 2.数组与普通对象的不用之处在于 对象使用属性名操作属性。 数组使用索引值操作元素。 索引值:从0开始的整数。 3、typeof arr 会返回object。 1、数组中的元素可以是任意数据类型。 2、数组的长度可以任意改变。过长缺位的为undefined。过短缺位的被删除。 1.1 操作数据1) 创建数组对象 创建数组对象 var arr=new Array(); var ar

2021-07-28 13:54:51 1

原创 七、对象基础 (二) -- 作用域与变量访问

一、作用域 1) 作用域是指一个变量的作用范围。在JS中,函数、对象也是变量。 2) JS中的作用域分为两种:全局作用域和函数作用域。 1.1 代码块 一个{}叫做一个代码块。 1)代码块后面不需要写分号了。 2)JS中的代码块只具有分组的功能,没有其他用途。 这一个和JAVA不同!!! 1)代码块 <script> { var a=10;

2021-07-28 13:52:44 10

原创 七、对象基础 (一) -- 原型继承

一、作用域 1) 作用域是指一个变量的作用范围。在JS中,函数、对象也是变量。 2) 在作用域中,变量声明、函数声明会被提至该作用域的最前面。 3) JS中的作用域分为两种:全局作用域和函数作用域。 二、全局作用域 全局作用域: 1) 直接写在script标签内的代码就在是全局作用域中。 2)全局作用域随着页面的加载而创建,随着页面的关闭而销毁。 一个html页面就是一个全局作用域。 3) 在作用域中,变量声明、函数声明会被提至该作用域的

2021-07-28 13:51:19 10

原创 六、对象 (二) -- 普通对象

1.1 基本数据类型包装类一、对象1.1 对象的概念 1) 对象是都是通过函数创建的。函数相当于创建对象的模板类。 2) 对象是函数,而函数本身也是一种对象。 所以对象使用方式也适用于函数,而函数的使用方式也适用于对象。 3) 对象的属性值可以是任意数据类型,也可以是一个函数, 4) 直接调用函数,称为调用函数。 调用对象的函数,称为调用方法。 两者没什么区别。使我们为了方便与记忆,认为划分。 1)函数即对象,对象即函数 c

2021-07-28 13:47:37 1

原创 六、对象 (一) -- 函数对象

基本数据类型: String Number Boolean Null Undefined 引用数据类型: Object -- 除了以上这五种数据类型都是基本数据类型,以后我们如果看到的都不是上面这五种, 那么他就是对象。创建函数的三种方式1.函数声明复制function calSum1(num1, num2) { return num1 + num2;}console.log(calSum1(10, 10...

2021-07-28 13:46:47 1

原创 五、程序结构(流程控制语句)

ssh 32.13.14.222 命令

2021-07-28 13:42:42

原创 四、运算符

一、代码块 一个{}叫做一个代码块。 1)代码块后面不需要写分号了。 2)JS中的代码块只具有分组的功能,没有其他用途。 这一个和JAVA不同!!! 1)代码块 <script> { var a=10; a+=1; console.log(a); } {

2021-06-11 23:46:51 16

原创 三、JS变量与字面量(二)-- 数据类型转换

一、JS运算1.1 JS运算 1)运算符也叫操作符,通过运算符,可以对一个或多个值进行运算,并获取运算结果。 2)JS运算分为【算数运算】、【逻辑运算】、【关系运算】。 1.2 JS运算规则 JS运算规则: 1) 非Number类型的数据在做算数运算、关系运算时,会将这些值转换为Number在运算。(字符串相加除外) 内部原理:底层使用了Number(x)函数进行转换 非Boolean类型的数据在做布尔运算时,

2021-06-11 23:46:31 27

原创 三、JS变量与字面量(一)-- JS数据类型

二、变量与字面量2.1 变量1)变量与自面量的概念 字面量: 1. 字面量都是一些不可改变的值。比如1,2,3 ... 2. 字面量一般都是可以直接使用,但是我们一般不会使用字面量 变量: 1. 变量可以用来保存字面量,而且变量的值是可以改变的。 变量更加方便我们的使用, 所以在开发中都是通过变量来保存一个字面量.而很少直接使用字面量。>>>>>> 字面量可以直接使用,但是我们很少直接使用字面量 &lt

2021-06-11 23:46:04 22

原创 二、JS简介与基础

一、JS简介1.1 JS起源 JS诞生于1995年,它的出现主要用于解决网页中的前端验证。 所谓的前端验证指的就是检查用户的输入内容是否符合一定的规则。 1.2 ECMAScript1)起源 1996年11月,为了确保JavaScript的市场领导地位,网景将JavaScript提交 到欧洲计算机制造商协会(ECMA)以便将其进行国际标准化。 ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262。 2)ECMAScript

2021-06-07 16:52:31 4

原创 一、万维网简史

一、js起源1.1 万维网起源1990年底,欧洲核能研究组织(CERN)科学家Tim Berners-Lee,在全世界最大的电脑网络——互联网的基础上,发明了万维网(World Wide Web),从此可以在网上浏览网页文件。最早的网页只能在操作系统的终端里浏览,也就是说只能使用命令行操作,网页都是在字符窗口中显示,这当然非常不方便。1.2 最原始的Web浏览器1990年,Tim以超文本语言HTML为基础在NeXT电脑上发明了最原始的Web浏览器。体验版:https://worldwideweb

2021-05-31 16:28:15 242

原创 十六、响应式布局--媒体查询

一、响应式布局概念1.1 什么是响应式布局 响应式布局 1.网页可以根据不同的设备或窗口大小呈现出不同的效果 2.使用响应式布局可以使一个网页适配所有设备 3.响应式布局的关键就是媒体查询 4.通过媒体查询可以为不同的设备、设备的 不同状态来分别设置样式。 1.2 响应式布局和移动端网页的区别 响应式布局和移动端网页的区别: 1、响应式布局可以通过一个网页适用于所有的设备。 2.移动端网页是专门为移动端设备开发的

2021-05-31 15:00:13 10

原创 十五、移动端(二) -- 完美视口

一、像素、视口与像素比1.1 像素 1) 屏幕是由一个一个发光的小点构成的,这个小点就是像素 2) 分辨率:1920*1080 ,这实质上就是说的小点的数量。 3) 在前端开发中,像素分为两种:即物理像素和CSS像素。 a) 物理像素:上述所说的小点点就是物理像素。 b) CSS像素:编写网页时我们使用的像素就是CSS像素。 1) 浏览器在显示网页时,需要将CSS像素转换为物理像素,再呈现页面。 2) 一个CSS像素最终转为为几

2021-05-31 14:59:28 13

原创 十五、移动端(一) -- VW

一、vw1.1 移动端开发中,像素不能用于布局 iphone6 ---》 最佳视口:375 iphone6 plus ---》最佳视口:414 由于不同设备的像素比是不同的。所以同样的375px在不同的设备意义是不同的。 比如在iphone6中,375是全屏。而375在iphone6 plus中就会缺失一块。 所以在移动端开发中,就不能用像素来布局了。 >>>>>> 设置完美视口,375px在iphone6中占满全屏,在plus中会缺

2021-05-31 14:58:39 8

原创 十四、flex布局(弹性盒、伸缩盒)

一、浮动布局和flex布局的发展历史 网页布局主要有两种,一种是浮动布局,另一种是flex布局。 +++ 浮动布局 浮动布局是一种传统的布局解决方案。 它是基于盒状模型,依赖 display + position + float属性。 它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 +++ flex布局 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。 目前,它已经得到了所有浏览

2021-05-31 14:57:51 42

原创 十三、Less

一、简介1.1 css新特性 css支持变量、css支持方法计算等这些是css的新特性,但是兼容性很差 1)css新特性a)原生css支持变量 原生css支持变量,但是兼容性很差。目前只在谷歌中有效 >>>>>> 未使用变量<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h

2021-05-31 14:56:53 8

原创 十二、转换

一、转换属性:transform变形 变形: 1.通过css来改变元素的形状和位置 2.变形完全不会影响到页面布局。(和相对定位挺像的) transform: 1. 用来设置元素的变形 2. transform可以设置多个变形。 transform: translateX(-50%) translateY(-50%); 3.transform可以设置多个变形。但是必须设置到一个中。如果设置两个,则会完全覆盖。

2021-05-31 14:49:23 8

原创 十一、过渡和动画

一、过渡 过渡(transition): 1.通过过渡可以指定一个属性发生变化时的切换方式 2.通过过渡可以创建一些非常好的效果,提高用户体验。 【过渡一般是由事件来触发,而不是自动执行的(事件:hover事件等)】 【过渡必须是某个属性发生变化时才会触发】1.1 transition-property:指定要执行过渡的属性 transition-property:指定要执行过渡的属性 1) 大部分属性都支持过渡效果。 只要是数值可计算的属性

2021-05-27 09:08:47 6

原创 十、轮廓、阴影、圆角、三角、过渡、隐藏

三、轮廓、阴影、圆角、三角和过渡 1、outline:10px solid red; 用来设置元素的轮廓线,用法和border一致。 轮廓和边框的不同点在于轮廓不会影响到可见框的大小,不会影响页面布局。 2、box-shadow:10px 10px 10px balck; 用来设置元素的阴影效果,阴影不会影响到页面布局。 box-shadow:10px 10px 10px balck; 第一个值是水平偏移量,正值向右移动

2021-05-27 09:07:15 3

原创 九、CSS居中

一、块元素居中问题 块元素居中问题 1.由水平布局恒等式可以设置块元素水平居中。 2.由于没有垂直布局恒等式,所以无法设置居中。1.1 设置块元素在父元素中水平居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &l

2021-05-27 09:05:34 7

原创 八、CSS表格、CSS列表

五、表格样式(下面这些属性作用于table标签,而不是tr、td标签)5.1 合并表格的表框 border-collapse:collapse 5.2 设置单元格的边框与表格的距离 border-spacing:12px;5.3 设置单元格固定(单元格列宽默认由内容撑开,现在使用该属性固定住) table-layout:fixed;...

2021-05-27 09:04:17 13

原创 七、背景和渐变

一、背景 1.background-color 设置背景颜色 2.background-image 设置背景图片 background-image:url('./a.img'); background-image:url(./a.img); 1)可以同时设置背景颜色和背景图片,这样背景颜色将成为背景图片的背景色。 2)默认情况: 背景图片大小 < 元素大小, 那么背景图片默认将会

2021-05-27 09:03:39 4

原创 六、字体样式和文本样式

一、字体样式1.1 color、font-weight、font-style 字体相关 1. color 用来设置字体颜色 2. font-weight 设置字体的加粗 可选值: normal 默认值,正常 bold 加粗 100-900 九个级别 (一般不用) 3. font-style 设置字体风格 可选值: normal 默认值,正常

2021-05-27 08:58:52 7

原创 五、CSS定位

一、定位 定位: 定位是一种更加高级的布局手段。 通过定位可以将元素放在页面的任意位置。 position:通过position来设置定位。可选值: static 默认值,元素是静止,没有开启定位 relative 开启元素的相对定位 absolute 开启元素的绝对定位 fixed 开启元素的固定定位 sticky 开启元素的粘滞定位

2021-05-27 08:53:36 5

原创 四、 CSS浮动

一、浮动1.1 浮动 float 通过浮动可以使一个元素向其父元素的左侧或右侧移动。 可选值: none (默认值)元素不浮动 left 元素向左浮动 right 元素向右移动 注意: 1、元素设置浮动以后,水平布局的等式便不需要强制成立。 1.2 浮动的特点 1. 浮动元素会完全脱离文档流,不在占据文档流的位置。 2.

2021-05-27 08:52:37 4

原创 三、 盒子模型

一、盒子模型 1.盒子模型概念 CSS将页面中的元素都设置为了一个矩形的盒子。 将元素设置为矩形的盒子,对页面的布局就转化为了将不同的盒子摆放在不同的位置。 2.盒子模型组成 1.内容(content) 2.内边距(padding) 3.边框(border) 4.外边距(margin) 1.1 盒子模型1)内容区(content) 内容区(content),元素中所有的子元素和文本都在内容区中排列。 内容区的大小由widt

2021-05-26 23:21:50 2

原创 面试总结

一、第三方接口调用处理子津:请假各位一个问题,刚面试了一家公司二面的时候,提了一个问题。如果你的应用需要请求指定三方接口的信息,如果指定三方出问题了应该怎么解决?我说会做超时处理,面试官说那只是兜底处理,如果高并发流量打进来该怎么办?给了我一个提示(资源隔离),就是如果三方超时,其它请求放到本地队列里。最后他问我放到队列里有什么不好的地方,最后我实在没有答出来了子津:面试官说回去想出来了 可以再告诉我晴天:这不是招人晴天:这是白嫖解决方案ABCD:三方接口挂了,为啥不做降级处理A

2021-04-30 09:28:26 11

原创 二、CSS选择器

一、css选择器1.1 基础选择器 1、元素选择器: 作用:根据标签名来指定一组元素。 语法:标签名{ } 例子: p{} 选中页面中的所有P标签 div{} 选中页面中的所有div标签 2、ID选择器: 作用:根据ID来指定一个元素。 语法:#id属性值{ } 例子: #box{} #c{} 3、class选择器:

2021-04-24 21:49:23 14

原创 一、CSS的基础

网页分为三部分: 结构(html) 表现(css) 行为(js) css:层叠样式表 网页实质上是一个多层的结构,通过CSS来分别为网页的分一层设置样式, 而最终我们看到的是网页的最上一层。 1.1 css使用方式 1.行内样式 <p stype="color:red;font-size:40px;">少小离家老大回</p> 注意:开发时不推荐使用。由于css与html代码耦合性太高..

2021-04-17 11:35:54 41

原创 四、HTML(二)-- HTML标签

2323

2021-04-16 18:36:19 98

原创 三、HTML(一)-- HTML基础

一、html基础1.1 语义化标签 在网页中html专门负责网页的结构,所以在使用html标签时,应该关注的是标签的语义, 而不是标签的样式。1.2 基础标签1.2.1 html标签 整个网页是从<html>这里开始的,然后到</html>结束。1.2.2 head标签 head标签代表页面的“头”,定义一些特殊内容, 这些内容往往都是“不可见内容”(在浏览器不可见)。<head>内部标签说明<title>

2021-04-16 18:35:58 54

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除