- 博客(70)
- 收藏
- 关注
RSS订阅原创 自学js第十三天:JS的基础事件
;王道阮一峰写的DOM的事件:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qi3mw41o-1620307183602)(C:\Users\tuyue\AppData\Local\Temp\1617207708116.png)]EventTarget 接口事件的本质是程序各个组成部分之间的一种’通信’方式，也是异步编程的一种实现。DOM 支持大量的事件，本章开始介绍 DOM 的事件编程。目录 [隐藏]概述EventTarget.addEventListen
2021-05-07 01:03:18
1143
原创 自学js第十二天:DOM概念和基础操作
Web API总结1：dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对应的node节点类型对象 , 又因为DOM下的 这些node所有对象都 实现implements 了 Node 接口，拥有一些共同的属性和方法,node节点实例对象其实都是来自Node接口。这是 DOM 操作的基础。总结2：有两种获取标签对象的写法: (静态生成 和 动态生成)<!D
2021-05-07 01:02:09
1095
原创 自学js第十四天:事件监听和定时器
一.JS监听器:1.实际有两种可以绑定事件的方式:①有on绑定事件触发执行函数② 监听绑定事件触发回调函数两种(实际监听用更多)比如以下的全是on方式绑定事件的,但是统统都可以通过监听的方式绑定事件的.js中事件分为三大类：鼠标事件、键盘事件、其他html事件。属性此事件发生在何时…onabort图像的加载被中断。onblur元素失去焦点。onchange域的内容被改变。onclick当用户鼠标点击某个对象时调用的事件句柄。ondblclic
2021-05-07 00:59:47
955
原创 自学js第十五天:event坐标偏移量位置和window对象
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置)2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
2021-05-07 00:59:09
1542
1
原创 自学js第十一天:内置对象和方法
常用内置对象方法APIjavascript内置对象都提供了基本方法, 学习方法需要注意 ①para参数 ②return返回值 ②是否改变原对象 三个点。前端工作一定要经常看的:MDN 官方文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects一.首先先复习javascript中的对象分类.JavaScript中的对象分为3种：1.内置对象(内置大写包装类 , 常用功能类)
2021-05-07 00:18:35
366
1
原创 自学js第十天:JS对象和this和执行上下文
复习数组基础方法 作用域 函数 小测试:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复习数组基础方法 作用域 函数 小测试</title></head>&l
2021-05-06 01:33:22
523
原创 自学js第九天:JS函数作用域详解
JS作用域:变量可以起作用的范围一.全局变量和局部变量:全局变量:在任何地方都可以访问到的变量就是全局变量，对应全局作用域局部变量:只在固定的代码片段内可访问到的变量，最常见的例如函数内部的变量。对应局部作用域(函数作用域)不使用var声明的变量是全局变量，不推荐使用。变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁1.JS全局作用域和局部作用域案例:1.1javascript 有作用域概念:1. 全局作用域(script标签内) 和 有局部作用域 (fun
2021-05-06 01:26:45
245
2
原创 自学js第八天:JS函数function详解
JavaScript 函数函数是程序的主要“构建模块”。函数使该段代码可以被调用很多次，而不需要写重复的代码。我们已经看到了内置函数的示例，如 alert(message)、prompt(message, default) 和 confirm(question)。但我们也可以创建自己的函数。函数在javascript中是一等公民一.函数定义JavaScript 函数是被设计为执行特定任务的代码块。(减少代码复写,直接重复调,像CSS公共样式)JavaScript 函数会在某代码调用它时被执行
2021-05-06 01:24:11
813
1
原创 自学js第七天:String字符串基础方法
String字符串基础方法1.charAt()方法从一个字符串中返回指定的字符。var str ='你好,我是海牙老师';console.log(str.charAt(3)); //返回了 str[3]的值参数( 如果指定的 index 值超出了该范围，则返回一个null空字符串)index字符串中的字符从左向右索引，第一个字符的索引值为 0，最后一个字符（假设该字符位于字符串 stringName 中）的索引值为 stringName.length - 1。。返回值指定字符串
2021-05-06 01:16:48
127
1
原创 自学js第六天:JS数组和算法
JS数组PS;数组下标,超过内容实际长度, 则返回undefined从数组中pop/shift删除的元素(当数组删光了,则返回undefined)。function函数没有return返回值时,也会默认返回undefined的.indexOf数组方法(通过元素找下标,没有找到则返回-1 )String(num)[1] 字符串也可以根据下标取值1.为什么要学习数组引用类型之前学习的数据类型，只能存储一个值 比如：Number/String。我们想存储班级中所有学生的姓名，此时该如何存储？
2021-05-06 01:15:11
627
原创 自学js第五天:JS控制语句和弹窗交互和debug调试
控制流程语句编程的三种基本结构顺序结构(标准文档流)从上到下执行的代码就是顺序结构程序默认就是由上到下顺序执行的分支结构(if/else三目 switch)根据不同的情况，执行对应代码循环结构(for /while /do…while )循环结构：重复做一件事情一.分支结构1.if分支语句if语法结构://第一种结构if (/* 条件表达式 */) { // 执行语句}//第二种结构if (/* 条件表达式 */){ // 成立执行语句} else {
2021-05-06 01:12:50
554
原创 自学js第四天:操作符及其优先级
文章目录一.JS操作符operator1.一元运算符(+/++ 和-/--):**总结:(++和--只针对变量用,不能给具体数++和--会报错)**2.算术运算符(二元运算符)3.逻辑/布尔运算符(短路与或非, 谁真谁假输出true/false)4.关系运算符(比较运算符+相等运算符, 谁大谁小输出true/false)5.赋值运算符 和 追加运算符6.二进制运算符 (了解)运算符的优先级:综合练习:一.JS操作符operator1.一元运算符(+/++ 和-/–):一元运算符：只有一个操作数的运
2021-05-06 01:10:14
132
原创 自学js第三天:JS数据类型及其转换
JavaScript 的数据类型JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有七种。一.据类型广义分类传统分类通过存储位置 把数据类型分为 基本数据类型 和 引用数据类型基础类型存储在栈内存中 ,引用数据类型存储在堆内存中. Undefined、Null、Boolean、Number、String和symbol (java的string是引用类型存在方法区内存中)二.JS的数据类型具体分类:数值（number）：整数和小数
2021-05-06 01:08:35
707
2
原创 自学js第二天: js的引入和标识符规范和变量
JavaScript 引入/ js语句 / 标识符/变量一.如何引入js在HTML中嵌入JavaScript代码(js文件也是可以通过<‘srcipt’>外链式引入的)<html> <head ><!--第一种方式外链式引入JS(推荐)--> <script src="js/index.js"></script> </head> <body> &l
2021-05-06 00:54:47
285
原创 自学js第一天:JavaScript历史简介
JavaScript一.前言JavaScript之父 Brendan Eich（布兰登·艾奇）在JavaScript诞生的前几年，有人说:JavaScript是一门四不像的语言;JavaScript是一门没有规范的语言;JavaScript是一门兼容糟糕的语言;JavaScript是一门不精准的语言;JavaScript是一个半成品语言;JavaScript是一门糟糕的语言;JavaScript只是一个玩具胶水语言;这些声音从JavaScript面世之初就一直伴随着她，声音的主人不乏已掌握多
2021-05-06 00:54:11
428
1
原创 自学前端第三天:html+css注意点
代码规范注意点:#(enter是隔行空行,enter+shift是直接空行)1.代码属性可以重复写,但不会有叠加效果,只会谁写在后面就实现谁的.2.p/li段落标签如果是借用父盒子长度,则宽度永远是跟着父盒子的原始width走,不会受padding+border影响而改变.3.写CSS样式的时候一定注意不要乱给"空格" , 特别是 ":冒号"前后 ,乱给空格样式就会失效. a:hover { }3.px没有零点几的说法,而em(1em就等于当前字号大小间距) 和 透明
2021-05-05 01:32:51
859
原创 总结前端面试题
1.菜鸟教程面试题(简易):https://www.runoob.com/w3cnote/front-end-development.html2.菜鸟教程面试题(苦难):https://www.runoob.com/w3cnote/front-end-developer-questions-and-answers.html面试有几点需注意：(来源寒冬winter 老师，github:@wintercn)面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。题目类型：
2021-05-05 00:48:27
147
转载 自学前端第二天:HTML基础知识提前汇总
「学习笔记」HTML基础「学习笔记」HTML基础前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。????????本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电
2021-05-05 00:47:43
398
原创 自学前端第五天:HTML基础标签(二)
HTML标签:(HyperText Markup Language)一.html标签基本概念:1. HTML 标签是由尖括号包围的关键词，例如 <html>。2. HTML 标签通常是成对出现的:例如 <html> 和 </html> ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。3. 有些特殊的标签必须是单个标签（极少情况）:例如 <br />，我们称为单标签。 二.html标签之间的关系:父子关系——嵌套关系兄
2021-05-05 00:46:27
252
原创 自学前端第六天:HTML基础标签(三)
HTML基础标签(二)一.了解什么是HTML文档流?1.文档流指的是元素在HTML页面布局中的位置顺序决定排布的过程， 主要的形式是自上而下（块级元素）一行接一行，每一行从左至右（行内元素）。主要是针对盒子模型来说的。2.HTML元素可分为两大类;内联元素和块级元素.二者在显示方式上是不同的.①内联元素是在水平方向上一个拦一个排列的,元素前后不产生换行,元素间的水平间距可以通过水平方向上的填充,边框和间距来控制,觉的strong,span等就属于内联元素,需要注意的是,竖直方向上的填充,边框和间距对
2021-05-05 00:45:22
319
1
原创 自学前端第七天 :CSS样式表引入和基础选择器
一.CSS (Cascading Style Sheets) 层叠样式表引入CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。CSS可以帮助调整排版布局的展现 美化标签和内容 提高版面的信息密度 加强信息的冲击力和直观性1.行内式（内联样式
2021-05-05 00:44:24
152
1
原创 自学前端第八天 :CSS字体样式
一.CSS字体样式基础属性1.font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：相对长度单位说明px像素单位 以像素点个数为基础 最常用的单位em相对于当前对象内文本的字体尺寸2.font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本
2021-05-04 02:46:30
596
1
原创 自学前端第九天 : CSS标准盒子模型
标准盒子模型（CSS重点）其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。1.前提了解:①为什么要一定提前清除CSS盒子样默认样式 * {margin: 0;padding: 0;}因为浏览器是默认使用CSS的stylesheet样式表的,而这个
2021-05-04 02:38:30
892
1
原创 自学前端第十天 : CSS怪异盒子模型
一.怪异盒子模型怪异盒模型是IE盒子模型 我们可以通过 css 样式 box-sizing来进行切换select { box-sizing: border-box; /* 怪异盒子模型 */ box-sizing: content-box; /* 标准盒子模型 */}怪异盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同 怪异盒子模型的 content内容宽度会把padding和border算入其中 是由外而内的计算宽度二.标准盒子和怪异盒子:1.标准模型下 宽度计算方式
2021-05-04 02:22:39
2425
2
原创 自学前端第十一天 :CSS盒子背景
复习关于盒子模型相关知识点补充说明(细节决定成败)高度样式设置auto图片标签 给设置具体宽度后 可以给高度设置为 auto(自动) 值让其实现等比例自动计算同行宽度问题一行内如果多个元素 站位宽度(margin+border+padding+width) 相加大于 容器宽度无法完整放入的元素会被挤下一行展示比如:一张图片 + 一段文字一起变为块元素,如果一段文字不设置宽度则默认继承父级body100%整行,就不可能和图片一起显示在一行中.(因此只能给p设置固定的宽度,除了图片外父级还剩多
2021-05-04 02:19:32
915
原创 自学前端第十二天 :页面小练习
小页面综合练习:(老师版)<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>homework 0612</title> <style> * {
2021-05-04 02:08:01
271
1
原创 自学前端第十三天 : CSS复合选择器和优先级
第十天:CSS复合选择器和优先级一.选择器综述（重点 ）(1)选择器概念: 要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。(2)选择器作用: 选择页面标签用的二.复习一下CSS基础选择器(五种)1.标签选择器（元素选择器）标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
2021-05-04 01:57:16
687
1
原创 自学前端第十四天:垂直居中和文字溢出
一.vertical-align(文字垂直对齐图片方式)举例:这里文字对齐图片基线(默认基线,但会有间隙问题!)1.以前我们讲过让带有宽度的父子块级元素之间的盒子居中对齐，是margin: 0 auto;2.以前我们还讲过让块元素中的文字居中对齐，是 text-align: center;3.以前我们还讲过让块元素中的文字垂直对齐, 是让块元素中的text-aglin 等于自身高度即可,(img图片不行)4.现在来讲垂直居中:vertical-align 垂直对齐， 这个看上去很美好的一个属性，
2021-05-04 01:52:37
291
1
原创 自学前端第十五天:伪类伪元素和属性选择器和精灵图
#一.基础伪类选择器(也是交集选择器一种,优先级也要叠加)1.概念:某个选择器的镜像,当光标移动到盒子时会触发新的一面不同的效果,但是是短暂的而已2.作用:伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果。3.优先级权重:伪类分值和类名选择器一样是0,0,1,0分的,因此a:hover 叠加= 0,0,1,1(很重要!!!)4.伪类语法结构:① 类选择器是一个点 比如 .demo {} ②而我们的伪类 用冒号 比如 类 :link{} a { /* a
2021-05-04 01:47:39
649
2
原创 自学前端第十六天:表格和input和textarea控件
一.表格 table (后期有UI/bootstrap组件辅助工具写)一.表格概念:就是一张为 横行纵列 多行多列的单元格表二.表格语法结构: (三层嵌套关系table>tr>td)<table> 表格 <tr> 行 <td>单元格内的文字</td> 单元格/列 ... </tr> ...</table>①tr 元素定义表格行(table row)②th 元素定义表头(
2021-05-04 01:37:44
916
原创 自学前端第十七天:CSS浮动float定位
学习浮动(float)CSS的定位机制有3种：普通流（标准流）、浮动和定位。1.标准文档流(normal flow)这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局
2021-05-04 01:24:25
1411
原创 自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position)一.①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。②CSS定位目的上，如果说，浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的"任意坐标"位置上去。③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，
2021-04-30 01:39:38
1291
原创 自学前端第十九天:云道页面综合练习
CSS之 reset.css模板*{word-wrap:break-word}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}ul,ol,dl{list-style-type:none}html,body{*position:static}html{font-family: sans-...
2021-04-30 01:19:01
738
1
原创 HTML+CSS规范
编程规范 HTML + CSS一.命名规范HTML + CSS 命名规范1. 命名需要是具备语义性的单词，不能用 数字 拼音 数字,符号开头 正确示范 ： wrap description title content 错误示范 : aaaa a1 $we 4tdds2. 命名需要多个单词连接的情况下, 标记语言中可以使用 _ - 进行连接 不能直接单词拼接 或者驼峰命名 注意: 书写风格必须统一 不容许出现 _ -一起使用的情况 PS: 更推荐使用 - 这样更清晰. 正确示范
2021-04-30 01:06:49
305
原创 自学前端第二十天:圆角border-radius属性和盒子阴影boxshadow和linear-gradient颜色渐变
一.css3 新增样式(美学特效)CSS3概念: 是最新的 CSS 标准。css3 向下兼容css2 ,可以理解成为了满足网页的日渐提升的功能性与设计美学而新增的css样式，利用css3 我们可以通过更少的代码实现更好的表现，很大程度上节省了JavaScript引擎的开销。二.border-radius 圆角属性①(一个PX值(最常用)： 四个圆角值相同(4px , 8px ,50%全圆形,最常用))②(四个PX值(设置宽2高1上侧半圆最常用): heightPX, heightPX,0 ,0;
2021-04-30 01:04:05
1157
2
原创 自学前端第二十一天:transform2D变形 和 transition过渡
transform总结:①[transform对行内元素无效，对行内块元素或者块元素才有作用.(注意因此伪元素)①transform:让盒子在空间上有行为 , transition让盒子在时间上有长度.②transform的位移translateXY 和旋转rotate(30deg)使用在定位父级盒子上,则也是真的位移了,也会影响子元素绝对定位的开始定位的地方地方(也跟着父盒子transform后的位移位置开始绝对定位);③transform rotateX,Y,Z旋转到90度时是看不见线条的,无
2021-04-30 00:22:48
583
1
原创 自学前端第二十四天(二):旋转相框transform+perspective+animation综合项目
[利用perspective 和 transform 里面的几个参数来实现旋转照片墙]旋转照片墙首先，来看下，是什么效果吧，上效果图 ↓其实这个东西，很容易制作，先说下思路， 把照片都给叠在一起，然后 rotateY 旋转，给每张图片 旋转不一样的角度能构成一圈， 然后translateZ 出去就好了，最后一步，父级转起来。搭建好基本的 html 和 css ↓ 已经写好注释啦。[<!DOCTYPE html><html lang="en"><head>
2021-04-29 02:55:30
188
2
原创 自学前端第二十二天:perspective视觉
CSS之perspective详解语法(实际开发都是给perspective: 1000px;perspective: number | none;1.简单来说，就是设置这个属性后，那么，就可以模拟出像我们人看电脑上的显示的元素一样。比如说， perspective：800px 意思就是，我在离屏幕800px 的地方观看这个元素。(这个属性，要设置在父元素上面)好了2.最后补充一点，这个perspective 属性呢，要放在父级身上,然后还有一个属性perspective-origin，这个属
2021-04-29 02:20:45
1204
2
原创 自学前端第二十三天:CSStransform3D形变
3D变换 transform3D1.浏览器中我们除了可以实现 x y两轴的2D变换 也可以开启3D效果 3D效果经常用于一些复杂的绚丽效果展示 可以用来构建基础的3D模型空间2.3D变形涉及的属性主要是①transform-origin:调整物体的旋转点,设置在当前子盒子上②transform:物体的变幻(平移,旋转,缩放,倾斜),设置在子盒子上[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxpHXZ5W-1619629397509)(C:\Users\tuyu
2021-04-29 02:19:36
283
原创 自学前端第二十四天:Animation动画栈帧效果
CSS3 帧动画 amimation @keyframesamimation 是transition过渡的高级升级版1.为什么要 amimation 一帧一帧的具体动画,因为transition进行单一型动画效果(且hover不点击时则会复原),而amimation@keyframes可以进行复合型(多帧)多运动的动画效果2.设置了amimation的盒子也是不脱离文档流的,除非变为绝对定位.3.amimation不会增加元素个数 , 而是可以很多段自定义的时间内让元素完成transform的各种形
2021-04-29 00:46:23
325
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人