- 博客(26)
- 收藏
- 关注
RSS订阅原创 JS学习day11 -- 事件
事件是可以被 javaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发javaScript函数的事件。1、事件基础1、事件函数事件函数：被事件调用的函数var box = document.getElementById('box');function fn() { }box.onclick = fn; // fn就是事件函数fn(); // fn不是事件函数box.onclick = function () { // 事件函数 fn(); // fn不是事件函数
2020-12-14 22:43:20
105
原创 JS学习day09 --DOM
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准接口1、节点1、获取子节点父级.childNodes 标准浏览器下包含 文本或换行节点，而在IE8及以下，只包含元素节点父级.children 所有浏览器一返回元素节点返回的都是类数组，有长度，能通过下标获取某一个<ul id="ul1"> <li>11111</li> <li>22222</li>
2020-12-10 21:10:54
111
原创 JS学习day08--数组对象
数组数组：使用单独的变量名来存储一系列的值。数组是可以存储任意数据类型的数据。1、数组创建字面量// 1、字面量创建(建议使用)var arr = []; // 创建一个空数组var arr = [1, 2, 3]; // 创建有三个值的数组var arr = [3];var arr = [1, 'ab', true, null, undefined, [], {}, function () { }, new Date()]; // 数组中可以放任何类型的数据console.log(arr
2020-12-09 22:35:06
126
原创 JS学习day07--时间对象和字符串对象
1、时间对象1、时间对象var d = new Date(); // 没有传参，创建的是当前电脑此时此刻的时间console.log(d); // 它是一个对象，里面有很多的属性和方法console.log(d.getFullYear()); // 年console.log(d.getMonth() + 1); // 月 返回0--11，代表1--12console.log(d.getDate()); // 日console.log(d.getDay()); // 星期 返回0--6，代表
2020-12-08 23:46:32
174
原创 JS学习day06--定时器与函数封装
1、定时器格式延迟定时器：隔多长时间以后执行，只执行一次var 定时器标识 = setTimeout(函数, 时间);clearTimeout(标识);间歇定时器：每隔一段时间执行，重复执行var 定时器标识 = setInterval(函数, 时间);clearInterval(标识);时间为毫秒，定时器会返回一个标识，方便我们清除这个定时器应用： 1、广告 2、发送验证码（防止多次点击，可以用disabled 、 先关后开 、 自定义开关）定时器中的
2020-12-07 22:21:40
196
原创 JS学习day05--函数高级
1、作用域作用域指：变量或函数的有效使用范围，有全局作用域与局部作用域两种。全局作用域：<script>标签下局部作用域：函数域全局变量和局部变量全局变量：直接在 script 标签下声明的变量，任何地方都能访问，任何地方都能对其值进行改变。局部变量：函数内部定义的变量，函数内能访问，出了函数的括号就不能访问（垃圾回收）。js解析器如何工作：1、预解析：找var 函数 参数。var找到之后给它赋一个值为undefined提到最前面，函数整体提到最前面，参数同var遇
2020-12-04 19:08:32
108
原创 JS学习day04--this初认识和函数初认识
break 与 continuebreak 与 continue 都是在循环中，终止循环的操作。break 是结束循环，后面的循环都不再执行（本次break后面的代码也不再执行）。continue 是结束本次循环，即本次循环中 continue 以后代码都不再执行，直接执行下一次循环。1、thisthis存在于任何地方，它的指向不是在定义的时候确定的，而是在调用的时候确定的var box = document.getElementById('box');// 如果函数是被某个元素调用的，
2020-12-03 22:11:37
56
原创 JS学习day03--流程控制语句和DOM元素的获取
顺序结构：即按顺序执行代码 ;条件选择结构(分支语句)：包括 if-else 以及 switch;循环结构：包括 for 循环，while，do-while，for-in 等;其他语句： break 和continue。1、分支语句1、ifif (条件) { 如果条件为真，则执行这里}if (条件) { 如果条件为真，执行这里} else { 如果条件为假，执行这里}if (条件1) { 如果条件1成立，执行这里} else if (条件2) .
2020-12-02 20:24:38
77
原创 JS学习day02--js数据类型
1、数据类型分类1、数据类型1、基本数据类型（简单类型）：Number(数值) String(字符串) Boolean(布尔) Null(空) Undefined(未定义)2、引用数据类型（复杂类型）：Object(对象)2、typeof运算符作用：检查数据类型，返回六个字符串格式：typeof(值) / typeof 值typeof 数值 —> numbertypeof 字符串 —> stringtypeof 布尔 —> booleantypeof null
2020-12-01 20:57:34
99
原创 JS学习day01——js初识
1、javascript介绍1、网站组成HTML:（HyperText Markup Language）超文本标记语言 结构CSS：（Cascading Style Sheets）层叠样式表 样式javaScript：简称js，用于网页交互的解释性脚本语言 行为2、什么是JavaScriptJavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。3、JavaScript的诞生时间：1995作者：布
2020-11-30 21:02:21
89
原创 ZG前端学习系统day14 2020-11-19
关键帧动画核心思想 ：1.制作动画的轨迹 2. 调用动画在<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-11-19 20:01:25
79
原创 ZG前端学习系统day13 2020-11-18
css渐变线性渐变（linear-gradient）：语法 不加前缀的线性渐变 background：linear-gradien(to 方向 ，颜色1， 颜色2，。。。)加前缀的线性渐变 注意省略to 方向相反 方向也可以使用角度重复线性渐变语法 background：repeating-linear-gradient（方向，颜色1 百分比，颜色2 百分比，颜色3，百分比。。）径向渐变语法 background：radial-gradient（方向 默认center，
2020-11-18 23:20:06
183
2
原创 ZG前端学习系统day12 2020-11-17
对于H5新增加的语义化在Ie9及以下的不兼容问题的解决第一种方法：引用外部的js文件（html5shiv.min.js)文件第二种方法 动态的创建html5的新标签 document.createElement（“header”）。。。。然后使用css给这些标签动态的添加样式创建后的是行内块元素 要用css转为块视频和音频视频video 可是设置的属性 src controls loop autoplay muted （自动播放必须配合静音一起使用） poster音频 需要掌握的属性 s
2020-11-17 19:24:41
86
原创 ZG前端学习系统day11 2020-11-16
多栏布局的解决方案两栏布局（一边固定一边自适应）左右两个盒子，左边设置固定的宽度，右边的设置100%；左边的盒子绝对定位定到左上角 ；右边的盒子设置margin-left 值的大小等于左侧盒子的宽度三栏布局（两边固定，中间自适应）圣杯布局先加载主体 在加载两边 。3个盒子同时进行右浮动，由于先加载中间盒子（宽度为100%）两边通过添加margin的负值使左右盒子跑到第一排。然后在考虑如何解决文字被右侧遮挡问题，可以通过给最外面的大盒子添加margin值并且配合左右盒子自身的定位 来
2020-11-16 21:05:23
90
原创 ZG前端学习系统day06 2020-11-09
定位使用 配合位移偏移量默认 static相对定位（relative）应用场景：1 微调自己的位置 2 给绝对定位作为参考相对定位是相对于自身的位置进行偏移，不脱离文档流，子绝父相固定定位（fixed）应用场景： 1 吸顶效果 2 返回顶部 3 模态窗口固定定位是相对于浏览器窗口进行偏移，会脱离文档流，类似于行内块元素，（在不设置宽的时候，宽度由内容进行决定，也可以设置宽高）绝对定位（absolute）绝对定位是以最近一定义的“父”元素来说的 ，如果没有定位父元素，那
2020-11-09 21:42:14
124
原创 ZG前端学习系统day05 2020-11-6
css标签的分类（按照其显示类型进行）block （块级元素）1 在不设置宽的时候 宽度等于父元素的宽度 ， 不设置高的时候 默认情况下 是02 可以设置宽高 和支持盒子模型的所有属性3 独占一行inline（内联元素）1 宽高由内容进行决定的2 不可以设置宽高 某些盒子的模型是不支持的3 并不是独占一行 并排排列 存在间隙inline-block既有块的特性也存在内联的特性浮动float：left float：right浮动的特点：1.浮动后的元素脱离了文档流不占位置了
2020-11-06 20:36:59
114
原创 ZG前端学习系统day03 2020-11-04
css基础的选择器id选择器(id) ：使用 ：id ="名字’ #名字{ } id值是唯一的 标识符的命名 (数字 字母 下划线 中划线组成 但是数字和符号不可以作为开头）使用场景：一般用于js中获取id元素或者用于外围结构起的id名标签选择器 使用： 标签名{ } 应用场景： 一般使用在去除某些默认的样式类选择器 使用 ：class = “名字” .名字{ } 一个标签可以使用不同的class属性 一个class属性可以被不同的标签使用通配选择器 使用：*{ }..
2020-11-04 22:01:47
93
原创 ZG前端学习系统day02 2020-11-3
HTML语义化（合理的标签做合理的事情）根据页面的内容选择合适的标签语义化的优点：1 在没有css的情况下页面也能够很好的呈现出内容结构2 有利于SEO让搜索引擎爬虫更好的理解网络3 便于团队开发和维护4 有利于其他设备解析Css引入方式1 内联 行内样式2 内部样式3 外链样式引入样式的优先级 ： 行内样式>内部样式 和 外链样式内部样式和外链样式同时存在的时候采用就近原则 及当两者有共同的样式的时候后者会覆盖前者表格标签<table borde..
2020-11-03 21:01:24
130
原创 ZG前端学习系统day01 2020-11-2
主流浏览器的内核：Chrome (google) 之前是Webkit 后来使用BlinkSafria （苹果） ..
2020-11-02 21:02:37
732
原创 ZG前端学习第四天2020-10-31
周六自习 今日学习 利用js做一个简单的倒计时演示效果：核心思想：因为直接通过 new Date()获取的时间存在某些问题，所以通过使用输入时间和当前时间的时间戳来进行修改定时的显示时间的变化 所以用到setInterval()定时器来控制计算时的公式转换d = parseInt(times/60/60/24);h = parseInt(times/60/60%24);m = parseInt(times/60%60);s = parseInt(times%60)代码展示：
2020-10-31 23:20:39
109
原创 ZG前端学习第二天2020-10-30
今日周五 老师外出自习一天学习内容 ：css选择器中的属性选择器 M[attr] { }通过标签的属性进行匹配*= 部分匹配 = 完全匹配 ^= 起使匹配 $= 结尾匹配 使用M[attr *= '所需要的属性‘]{ }层次选择器 M N M>N M~N M+Ncss详细的优先级 行内(1000) > id (100) > class(10) = 属性选择器 = 伪类 >标签(1)=伪元素 > 通配css盒子模型中存在的几个问
2020-10-30 23:50:56
275
原创 Node.js安装详细教程（亲测有效）
node.js安装搬运工。。。。。。第一次跟着以上教程出现错误但是尝试删除C:\Users{账户}\下的.npmrc文件 注意：这个文件是隐藏的 成功解决
2020-10-30 22:48:29
119
原创 ZG前端学习第一天2020-10-29
ZG前端学习第一天下午进班老师讲解内容（出认识js的写法):几个小案例：开关灯效果展示：通过开关按钮进行控制 小灯和背景颜色 以达成效果展示。思路：变化的效果有小灯 开关 背景这3个进行变化 ，所以通过js获取对三者进行控制 用到点击(onclick)动态交互。代码展示：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="v
2020-10-29 22:19:58
140
原创 Css布局学习之column的分栏布局
Css布局学习之column的分栏布局一、 column分栏布局的常用属性：column-count 设置分栏的个数column-width 设置分栏的宽度注：一般个数和宽度有冲突，所以column-width和column-count不要设置一起使用column-gap 设置分栏的间距column-rule 设置分栏的边线column-span 合并分栏 （all / none）二、column代码实例：对于一段简单文章的的分栏<!DOCT
2020-09-25 11:01:12
1164
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人