1. 什么是对象: 对象是一种数据类型, 是一种无序的数据集合 用多个变量保存散乱, 用对象比较统一 保存用户信息, 姓名年龄电话…用之前的数据类型不方便, 很难区分 1. 对象是属性和方法组成: 属性: 信息或特征 (名词), 比如手机尺寸、颜色、重量… 方法: 功能或行为 (动词), 比如打电话、发短信、玩游戏… 1234let 对象名 = { 属性名: 属性值, 方法名: 函数 } 对象属性没有顺序, 属性和值用 : 隔开 多个属性用 ; 逗号隔开 可使用""或'' , 一般省略, 除非遇到特殊符号 空格、中横线等 12345let num1 = { name: 'mark', age: 10}console.dir(num1) 2. 属性访问: 简 ...

JavaScript 基础第四天 --- 函数 作用域 作用域链1. 函数 function function 执行特定任务的代码块 可实现代码复用, 提高开发效率 函数和循环区别: 随时调用, 随时执行, 可重复调用 函数可把相同逻辑代码包裹起来, 通过函数调用执行包裹的代码, 有利精简代码方便复用 和变量命名基本一致, 使用小驼峰命名法, 前缀应为动词 1. 函数声明语法123function 函数名 { 函数体} 2. 函数调用与使用 函数不调用 自己不执行, 使用()调用函数 曾使用的alert()、parseInt()后面跟小括号的本质都是函数的调用123// 函数一次声明可多次调用 每一次调用函数 代码都会重新执行一次say()say() 循环代码写完即执行，不能方便控制执行位置 函数体是函数的构成部分, 它负责把代码包裹起来, 直到函数调用时函数 ...

JavaScript 基础第三天 --- for 循环 和 array数组1. for循环基本使用: for循环也是重复执行代码 好处: 把声明起始值、循环条件、变化值写到一起，一目了然 如果明确循环次数的时候使用for循环 不明确循环次数的时候使用while循环 123for (声明变量; 循环条件; 变化值) { // 循环体} for 输出1到100偶数之间的和 123456let num1 = 0for (let num2 = 1; num2 <= 100; num2++) { if (num2 % 2 === 0) { num1 += num2 }} for循环 最大优势是遍历数组 123456let num1 = ['pink', 'blue&# ...

JavaScript 基础第二天算术运算符: 经常作为某个数字是否被整除 数学运算也叫算术运算, 主要包括加、减、乘、除、取余(取模) +：求和、-：求差、*：求积、/：求商、%：取余 算术运算符优先级顺序: 同时使用多个运算符写程序时, 会按某种顺序先后执行, 称为优先级 js中, 优先级越高越先被执行, 优先级相同时左向右执 乘、除、取余优先级相同, 加、减优先级相同 乘、除、取余优先级大于加、减 使用()可以提升优先级 总结: 先乘除后加减，有括号先算括号里的 计算圆的面积: 1234let num1 = prompt('请输入您的半径')let num2 = 3.14 * num1 * num1alert(`计算之后圆的面积是: ${3.14 * num1 * num1}`)alert(`计算之后圆的面积是: $ ...

JavaScript 基础第一天 JavaScript是一种运行在浏览器的编程语言，可实现人机交互效果 网页特效 (监听用户行为让网页作出对应反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台数据, 渲染到前端) 服务端编程 (node.js) JavaScript的组成: ECMAScript (基础语法 )、Web APIs (DOM、BOM) ECMAScript: 规定了js基础语法核心知识 比如：变量、分支语句、循环语句、对象等等 DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作 BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等 权威网站：MDN JavaScript 书写位置:内部 JS: 直接写在html文件里，用script标签包住 将script放在HTML文件底部的原因是浏览器会按照代码在文 ...

移动开发-响应式布局响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px ~ < 992px 中等屏幕 (桌面显示器) >= 992px ~ <1200px 宽屏设备 (大桌面显示器) >= 1200px 响应式布局容器: 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介: Bootstrap 来自Twitter，是目前最受欢迎的前端框架，Bootstrap是基于 HTML、CSS 和Ja ...

移动开发-rem适配布局-媒体查询rem单位: rem (root em) 是一个相对单位，类似于em，em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 比如, 根元素html设置font-size=12px; 非根元素设置width:2rem; 换成px表示就是24px 父元素文字大小可能不一致，但整个页面只有一个html，可以很好来控制整个页面元素大小 什么是媒体查询: 媒体查询 (Media Query) 是CSS3新语法 使用@media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果、Android手机、平板等设备都用得到多媒体查询 语法规范:1️⃣media type 查询类型: 将不同的终端设备划分成不同的类型 ...

移动开发-flex弹性布局 Flex布局案例: 移动端携程网: 点击查看 PC端浏览器支持较差，如果是PC端页面布局，还是传统布局 如果是移动端或不考虑兼容性问题的PC端页面布局，使用flex弹性布局 flex弹性布局是Flexible Box的缩写，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局 当我们父盒子设为flex布局以后，子元素的float、clear 和 vertical-align属性将失效 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局 采用Flex布局的元素，称为Flex容器(flex container)，简称容器，它的所有子元素自动成为容器成员，称为Flex项目(flex item)，简称项目 常见父项属性: flex-direction：设置主轴的方向 justify-content：设置主轴上的 ...

移动开发-百分比布局 流失布局案例: 京东商城: 点击查看 通过盒子宽度设置百分比来根据屏幕宽度来进行伸缩，不受固定像素限制，内容向两侧填充 流式布局，就是百分比布局，也称非固定像素布局 max-width 最大宽度 -- max-height 最大高度 min-width 最小宽度 -- min-height 最小高度 CSS初始化 normalize.css: 移动端CSS初始化推荐使用normalize.css Normalize.css：保护了有价值的默认值、修复了浏览器的bug、是模块化的 、拥有详细的文档 Normalize.css官网地址： http://necolas.github.io/normalize.css/ meta视口标签:标准的 viewport 设置: 1<meta name="viewport" content ...

记 CSS过程中遇到的一个小问题的小细节 学习CSS３的3D转换过程中，想做一个案例：两面翻转的盒子 首先来看，实现的最终效果, 如图所示：鼠标一碰到盒子，盒子就会翻转 实现步骤：首先写一个父盒子包含两个子盒子, box是翻转盒子,f1和f2是前和后的两个子盒子 1234<div class="box"> <div class="f1">正面</div> <div class="f2">反面</div></div> box先指定大小, 后面给盒子添加上3D呈现属性(transform-style: preserve-3d) 两个小盒子要加定位, f1盒子加上z-index:1; f2 子盒子沿着Y轴旋转 180deg 最后鼠标hover ...