- 博客(65)
- 收藏
- 关注
RSS订阅原创 js-day11 BOM 事件对象 懒加载
BOMBOM: Browser Object Model 浏览器对象模型js提供给我们用来操作浏览器的信息的接口iframeslocationhistorydocumentnavigator....BOM核心: window可以直接使用变量名或者函数名就能出线效果的(全局变量、全局函数), 所属对象都是window对话框 警告框: alert() 带有确定取消按钮的警告框: confirm('提示内容') 带有输入框的对话框: pro
2021-09-28 19:39:38
230
原创 js-day10 DOM 操作表格 表单
DOMDOM:DOM树 浏览器在渲染页面的时候 会先形成树状结构 就叫做DOM树DOM由节点组成的获取节点获取节点: css选择器: css中选择器怎么写 这里就怎么写 id class tag 父子 层级 交叉...ie8+ 静态获取符合选择器的第一个元素: document/父元素.querySelector('css选择器')var div = document.querySelector('div');console.log(div); // 直接获取到第一个di
2021-09-27 20:43:53
422
原创 js-day09 迭代方法 正则
迭代方法迭代: every some filter map forEacheveryevery: 对数组的每一个项做一些判断, 根据函数的返回值, 如果每个项执行函数的返回值都是true, 返回true. 如果有一个是false 返回false全真为真 一假为假语法: 数组.every(函数);函数有3个形参: 项 下标 原数组var arr = ['a', 'b', 'c', 'd'];var res = arr.every(function (v, i, a) { .
2021-09-25 16:38:05
216
原创 js-day08 数组
数组数组: 用来存储不定数量不定类型的数据的容器;创建数组 字面量创建 new关键字创建 // 1. 字面量创建var arr = [12, 43, 64];console.log(arr);console.log(typeof arr); // object// 2. new关键字创建// var 变量 = new Array(...data);// 注意: 当参数只有一个且是数字, 表示数组的长度var arr1 = new Array(1, 2, ...
2021-09-23 19:28:54
184
原创 js-day07 对象 字符串 Math Date
对象对象: 在js中 万物皆对象 一切皆对象 分为: 本地 内置 自定义 宿主 全局本地(内部): Number String Boolean Object Array Function RegExp Date Error内置: 在页面加载完成后 已经实例化的对象 Global Math宿主: DOM BOM全局: windowapi: application programming Interface 应用程序编程接口已经封装好的可以直接使用的函数 直接调用实现功能Math
2021-09-22 20:03:21
211
原创 js-day06 定时器
定时器概念定时器: 让一段代码等待一段时间或者每隔一段时间就执行一次的代码就是定时器分类延迟定时器延迟: 让一段代码等待一段时间 setTimeout(函数, 时间); 时间单位: ms等待 只执行一次的效果 使用延迟定时器效果: 一次性广告 关不掉的广告/* 打开页面 等待3s后 显示img*/var img = document.getElementsByTagName('img')[0];// 等待 只执行一次的效果 使用延迟定时器setTimeou.
2021-09-18 19:02:34
198
原创 js-day05 获取元素样式 this 自定义属性 排他 自定义索引
获取元素样式基础获取标准浏览器(ie9, chrome, ff):getComputedStyle(元素).属性名ie(ie8及以下):元素.currentStyle.属性名// 获取divvar div = document.getElementsByTagName('div')[0];console.log(div);// 获取样式:// 标准:// var w = getComputedStyle(div).width;// console.log(w);/
2021-09-17 18:56:46
329
原创 js-day04 函数 作用域 变量提升 函数返回值
函数概念函数: 将具有独立功能的代码块整合命名的代码作用: 减少页面代码 提高页面执行速度 页面结构更加清晰使用:\1. 事件处理函数: 元素.事件 = function(){}function(){}--->函数\2. 对象的方法:var obj = {abs: function(){} ---> 函数}\3. 封装复用声明函数: 由事件驱动的或者在有需要的时候被调用的代码块注意: 函数只声明 没有任何效果声明函数: 函数声明:
2021-09-16 20:05:10
195
原创 js-day03 流程控制语句 对象
流程控制语句分类流程控制语句: 代码按照什么顺序执行的语句顺序语句: 默认从上到下执行条件语句(分支语句): 多条(2条以上)分支中选择 if if-else if-else-if switch循环语句: for while do-while for-in其他语句: break continue分支语句ifif: 判断代码是否执行if(条件){条件为真的时候执行的代码;}var core = prompt('请输入成绩');console.log(co
2021-09-15 20:10:04
267
原创 js-day02 运算符 隐式转换规则 获取元素 鼠标事件 操作元素内容 操作属性 操作样式
算术运算符+ - * / % ++ --基础console.log(10 + 20); // 30console.log(10 - 20); // -10console.log(10 * 20); // 200console.log(20 / 10); // 2// %: 取余 模 console.log(20 % 3); // 2console.log(20 % 2); // 0++++: 在自身基础上加1 可以放在变量的前面 也可以放在后面++和其他运算放在一起的
2021-09-14 19:43:51
202
原创 js-day01 历史 引入方式 调试 声明 命名规范 数据类型 强制转换
Javascript历史1995年 5月 网景公司 布兰登·艾奇 用10天 Macha9月 改名 LiveScript12月 javascriptjava 和 javascript 没有关系 雷锋和雷峰塔解决表单提交验证ie: JScript1997年, 欧洲计算机制造商协会(ECMA) 以JavaScript1.1为蓝本 定义了语法规范 ECMAScriptjavascript和ECMAScript的关系前者(javascript)是后者的体现后者(ECMASc
2021-09-13 18:36:35
231
原创 day16动画
过渡动画css3的 transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元 素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 分别属性设置 transition-property：检索或设置对象中的参与过渡的属性 transition-duration：检索或设置对象过渡的持续时间 transition-delay：检索或设置对象延迟过渡的时间 transition-timing-funct
2021-09-06 20:25:48
333
原创 day13
弹性盒子弹性盒子是css3新的布局模式引入弹性盒布局模型的目的是提供一种更加有效的方式 来对一个容器的子元素进行排版、对齐和分配空间。应用场景 : 移动端display: flex/inline-flex让当前盒子成为弹性盒子,控制子元素(项目)的布局,让子元素(项目)沿着主轴的方向进行对齐 ,默认的主轴是x轴 ,子元素类似于行内块元素（没有间隙）,子元素的float,clear,vertical-align属性将失效。flex-direction设置主轴的方向
2021-09-03 09:51:09
158
原创 day12
day12CSS3简介 CSS3是最新的CSS标准。 CSS23新增选择器 属性选择器 以box开头 <style> div[class^="box"] { background:red; }</style><div class="box">box</div><div class="abox">abox</div><div class="box...
2021-09-03 09:50:02
229
原创 day11
day11HTML5基础HTML5中新增的布局标签html 1990 html4.0.1 1997 html5 2008 稳定版 2012年新增的结构标签 （更加语义化） header标签 <header>这里是头部区</header> footer标签 <footer>这里是页脚区</footer> main标签 <main>这里是主体区</main> nav标签
2021-09-03 09:49:23
281
原创 day10
day10常见的图片格式和特点格式 优点 缺点 使用场景 jpg 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显 色彩丰富的图片/渐变图像 gif 文件小，支持动画、透明，兼容性比较好 只支持256种颜色 色彩简单的logo/icon/动图 png 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大 logo/icon/透明图 webp 文件小，支持有损和无损压缩，支持动画、透明
2021-08-31 19:04:55
186
原创 day09
兼容IE 浏览器常见兼容问题 兼容问题 ie中图片边框问题 图片放在a标签中 img { border:none } ie8以下浏览器中背景复合属性的写法问题 .bg { background:url("./images/bg.jpg")no-repeat center } 解决方案：在url和no-repeat 直接加上空格 .bg { background:url("./im
2021-08-31 19:04:26
226
原创 day08
圆角属性 .box { width: 300px;height: 300px;background-color: red;/*border-radius四个角可以设置不同的圆角*/border-radius: 20px 50px 80px 100px;padding: 20px;border: 20px solid #000;}.box1 {width: 300px;height: 300px;background-color: blue..
2021-08-31 19:03:47
452
原创 day07
表单表单元素 表单元素是允许用户在表单中输入内容的标签， 比如：文本域、下拉列表、单选框、复选框等。 表单元素标签 input标签 概述：<input> 标签是最重要的表单元素。 type属性取值不同，可以展示出不同的表单形式 作用：用来定义不同种类的输入控件 语法：<input type="类型"> 常用类型9种 type="text" 作用：用于文本输入的
2021-08-31 19:03:06
337
原创 day06
定位定位的应用场景和基本原理定位的原理 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性，允许定义标签框相对于其正常位置应该出现的位置，或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置 position static 默认 静态定位
2021-08-31 19:02:08
208
原创 day05
浮动什么是浮动？标签的浮动是指设置了浮动属性的标签会脱离标准流的控制，移动到其父标签的指定位置浮动属性 float left right none 默认 浮动的作用 图文环绕：注意：图片和文字不会到浮动标签的下方 页面布局 浮动的宽度 浮动的宽度就是内容的宽度 浮动的问题标签浮动以后，脱离的正常文档流，导致父标签无法被撑开，会影响后续正常布局清浮动的几种方法 给浮动标签的父标签固定高度（不
2021-08-31 19:00:47
163
原创 day04
背景属性 background-color : red background-image: url(./img/bg.jpg) background-repeat: no-repeat background-size: 像素值或者百分比 background-position:百分比或者位置英文单词或者像素值 简写：background:red url(./img/bg.jpg) no-repeat top 标签的嵌套规则 h
2021-08-31 18:59:10
178
原创 day03
实用小技巧:边框实现小三角 div { width: 0px; /* width: 200px; height: 200px; */ /* background-color: pink; */ /* border:100px solid red */ border-width: 10px ; border-style: solid; /* 透明色：transparent */ border-co
2021-08-31 18:56:46
217
原创 day02
HTML列表 无序列表 项目的列表li，自带粗体的圆点项目符号 块级标签 list-style: none; 去掉项目符号 ul>li 复合标签，ul标签的子标签必须是li标签 <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <.
2021-08-31 18:50:46
212
原创 day01
1.课程的规划第一阶段、css3/html5第二阶段、JS交互第三阶段、node开发第四阶段、前端框架 :vue react第五阶段、小程序+数据可视化第六阶段、就业指导+项目实训小目标：PC电商网站2.前端的概述 web的发展史 web1.0 简单的静态页面 早期三大门户 搜狐 新浪 网易 web2.0 更注重用户之间的交互 用户即是信息的消费者也是制造者 微博 web3.0 人工智能
2021-08-31 18:45:20
357
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人