weixin_48292956的博客

对象何为对象：万物皆对象 客观世界中的具体的实体就是对象 如 一个人 一个气球 一辆汽车 每一个对象实体都有对应的特征思考：咱们班的班主任这个对象怎么描述 特征 行为为什么要学习对象？思考：上述对象都是客观世界的，那JS这门语言中为什么要有对象呢 又如何用代码去描述一个对象呢数组：是有序的元素集合 ，数组用于存放一组数据，比如一个班级所有人的名字，一个班级所有人的成绩。函数：封装一段重复的代码，只要声明一次，就可以多次调用。思考1：如果要存储一个人的信息，应该怎么办？var name =

函数函数的定义：一堆特定代码的集合体，它负责完成某项特定任务，而且相较于其他代码，具备相对的独立性，一般会有输入参数并有返回值，提供对过程的封装和细节的隐藏函数就是一个功能，并且具备复用性声明函数和使用函数// 声明函数function 函数名 (){ // 函数体}​// 调用函数函数名();特点说明：函数默认不会执行 必须通过函数名()调用才会执行函数的命名尽量遵守 动词或者动词+名词的方式 这样函数的作用一目了然函数一次声明可以多次调用 每一次函数调用函数体会重新执

遍历数组访问数组里面的每一个数据 (查寝)// 太low// console.log(arr[0]);// console.log(arr[1]);// console.log(arr[2]);// console.log(arr[3]);​// 使用循环来代替// 解决了重复代码的问题// 弊端： 1. 长度限制死了// 弊端： 2. 下标没有完全吻合// for (var i = 1; i <= 4; i++) {// // console.log(i); // 1,

数组所谓数组，就是将多个元素（通常是同一类型）按一定顺序排列放到一个集合中，那么这个集合我们就称之为数组。数组是一个Array对象 属于复杂数据类型创建数组字面量形式var arr = [‘内容1’,‘内容2’,‘内容3’];构造函数形式var arr = new Array(‘内容1’,‘内容2’,‘内容3’);细节注意: 使用构造函数形式array的小括号里面如果只写一个数值型的数据表示这个数组的长度 而不是内容数组的使用数据的使用无非就是"增删改查"​查: 数组[下标]改:

for 循环语句​for(语句1;语句2;语句4){语句3;}​// 语句1：初始化语句 用来初始化变量// 语句2：循环的判断条件// 语句3：循环体// 语句4：循环体结束之后执行的代码

do while 循环do while 循环最大的不同的就是while循环是先判断在循环 而do while是先do 一次 在开始循环 也就是说不管能不能循环 先do一次do{ // 循环语句}while(true)

while 语句while(条件){ 条件为真时会不断执行这个代码 直到while的条件为假}所以while循环里面的条件的值是会发生变化的 如果没有变化 则就是一个死循环

调试断点断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。调试步骤：浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点调试中的相关操作:Watch:监视，通过watch可以监视变量的值的变化，非常的常用。F10:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。F8：跳到下一个断点处

switch case语句分支语句的一种需求：接受用户输入的值（1-7） 根据对应的数字返回星期几 1 - 星期一 2 - 星期二… 如果用户输入的不是1- 7 告诉用户 好好输入switch (表达式){ case "值": //语句; break; case "值": //语句; break; }注意：switch case语句不能完全替代if elseswitch case比较的值全等 ===switch

三元运算符// 条件 ? 语句1 : 语句2// 1. 如果条件为true，会返回语句1// 2. 如果条件为false，会返回语句2

分支语句需求：得到用户输入的年纪，年纪满18岁 显示成年 如果没有则显示未成年需求2：得到用户输入的年纪，根据年纪显示这个年龄阶段对应的状态0 - 17 好好读书 18-28 找对象 29-40 结婚 41 - 60 为人父为人母 60 退休// 单条分支if(条件){ 条件为真则执行大括号里面的代码}// 两条分支if(条件){ 条件为真则执行大括号里面的代码}else{ 条件为假则执行这个括号里面的代码}// 多条分支if(条件1){ 条件1为真则执行这里的代

表达式和语句可以产生一个值的式子就是表达式 在现阶段可以理解为有运算符（不包括赋值运算符）的地方就是表达式如：a++ 1+2+3;语句可以理解为一个行为 语句中可以包含表达式如：var a = 1; var b = 2 + 4 + 6;语句的分类顺序语句 自上而下一步一步执行 之前学习的所有都是顺序语句分支语句 根据条件有选择的执行循环语句 循环执行对应的语句...

操作符优先级不同的操作符之间的优先级有不同优先级从高到低1. () 优先级最高2. 一元运算符 ++ -- !3. 算数运算符 先* / % 后 + -4. 关系运算符 > >= < <=5. 相等运算符 == != === !==6. 逻辑运算符 先&& 后||7. 赋值运算符练习1：var result = 1 + 2 * 8 / 4 ; var result1 = (1 + 2) * (

比较运算符比较运算符 >、 <、 >=、 <=、 ==、 ===、 !=、 !==// 比较运算符的结果都是布尔值console.log(2 > 1);console.log(1 > 2);​// >= <= 这个理解为大于或者等于 小于或者等于console.log( 5 >= 5 );console.log( 5 <= 5 );​// == 等于 只要内容相等即可console.log(3 == 3);console

逻辑运算符// 逻辑运算符 与 或 非// 与 && 可以理解为并且 两个条件必须同时满足 一个不满足整个表达式不成立// 或 || 两个条件只需要满足一个即可// 非 取反 !true !false举例说明：var age = +prompt('请输入你的年龄?');​var options1 = age > 10;var options2 = age < 20;​if (options1 && options2) {console.lo

操作符（运算符）用来操作数据的符号，一般用于运算算术运算符 (+,-,*,/,%)加、减、乘、除、取模加号：数值相加 字符相连赋值运算符 (=)将等号右边的值赋予给左边左边是一个变量存储累加+=自增自减运算符（一元运算符）a++ ++后置 先使用 后自增++a ++前置 先自增 后使用a-- --后置 先使用 后自减–a --前置 后自减 先使用...

数据类型之间的相互转换将数据转换成数值型parseInt() 把字符串转换成整数parseFloat() 把字符串转换成浮点数 parseFloat会解析第一个. 遇到第二个 . 或者非数字结束 如果解析的内容里只有整数，解析成整数NumberNumber()可以把任意值转换成数值，如果要转换的字符串中有一个不是数值的字符，返回NaN黑科技（隐式转换）：如果在数字字符串前面添加一个+号 会自动隐式转换成数字类型将数据转换成字符串变量.toString() 将数据转换成字符串String(

布尔数据类型布尔类型只有两个值 true或者false 多用于条件的判断undefined nullundefined 未定义 变量只声明没有赋值的时候浏览器默认会赋值一个undefinednull 表示一个空的对象 一般用于将一些对象清空[null返回的是一个Object的原因]https://www.zhihu.com/question/21691758...

string数据类型所有添加了引号的数据都是字符串数据类型 单双引号都可注意：单双引号都可以 但是同样的引号不要出现嵌套 如果嵌套 那么 一个单引号 一个双引号 成对

number数据类型所有的数字都是Number数据类型利用typeof运算符可以返回当前数据的数据类型（只针对简单数据类型）特殊值：NaN not a number 不是一个数字注意 小数的计算可能产生丢失精度的问题问题来源：小数的2进制存储转换会带来丢失精度的问题[丢失精度]https://segmentfault.com/a/1190000008268668解决方法：扩大成整数去运算...

数据类型在程序设计中，数据类型被定义为数据的种类，也就是说一系列可能值以及基于这些值的基本操作。好处：更加充分和高效的利用内存和使用数据六大数据类型基本数据类型（简单数据类型）number 数值型string 字符串boolean 布尔型undefined 未定义null 空引用引用数据类型（复杂数据类型）object 对象function 函数array 数组...

JS的初体验1、书写环境 （这对标签可以写在网页的任何位置，一般习惯放在body结束标签的前面）<script>alert('Hello world');</script>2、独立的JS文件 通过script标签引入<script src="路径"></script>注意点引用外部js文件的script标签中不可以写JavaScript代码注释1、单行注释 // 用在代码上2、多行注释 /* 多行注释 */ 用在说明文档上输出语

JS的组成ECMAscript： JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关DOM：（document object model 文档对象模型）一套操作页面元素的APIBOM：（browser object model 浏览器对象模型）一套操作浏览器功能的API...

JS的作用1、网页特效2、表单验证3、服务端的JS (node.js)4、命令行工具 (node.js)5、app6、游戏开发7、数据交互总结：JS无所不能，我们学习的方向主要针对的是web页面

JavaScript是什么JavaScript是一种运行在客户端（浏览器）的脚本语言客户端：客户端是相对于服务器而言的，在这里先简单理解为浏览器浏览器就是一个客户端软件，浏览器从服务器上将资源（html,css,js,图片等）请求下来 并且在本地利用浏览器去解析这些资源服务器本质上也是一台电脑。用来接收客户端发过来的请求，并处理请求。同时存储数据 读取数据等操作脚本语言：不需要编译 读取一句 解析一句 一句报错 下一句不会继续执行执行过程：源代码 - 预解析 - 运行编译语言：需要编译 编

Js的历史(了解)Nombas与ScriptEase大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言,并将这个脚本语言捆绑在一个可以嵌入到浏览的2的共享软件中，代表了第一个在万维网上使用的客户端语言。后来由于mm听起来比较消极，Nombas又将Cmm的名字修改为ScriptEase.虽然Nombas如今在互联网行业已经销声匿迹，但是它的理念却成为因特网的一块重要基石。Netscape与JavaScript当网上冲

bootstrap框架Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。bootstrap中文网ui框架: 就是可以快速实现页面搭建的一系列组件​组件:下拉菜单导航条焦点图分页…说的简单点 就是别人已经写好的一大堆的这些常用组件 我们直接复制人家的html和css 就可以实现对应的效果特点：组件简洁大方、代码规范精简、界面自定义性强。Bootstrap

LESS学习网站：官网http://lesscss.org/中文网http://lesscss.cn/Less简介1.less本质上是css的一个超集 >= css 而且具备css不具备的一些特点2.浏览器不认识less 我们可以借助于插件让less变成css​使用less的基本流程: 程序员写less => 插件 => css 浏览器引入的依旧是css文件安装插件点击左侧第五个按钮(扩展) 在商店里面搜索easy less点击安装 (需要联网)点击重新加载安装

为什么要用rem？rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。单纯使用流式布局的结果是宽度自适应 高度是写死的 导致不能完全适配设计图(因为不同的屏幕大小下 高度永远是写死的), 而使用rem就可以让高度也保持自适应效果流式布局：虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。rem布局：rem能够适配所有的屏幕，与less配合使用效果会更好。rem是什么？rem（font size

两倍图由于手机端的像素密度要比PC端高,很多手机的像素密度是电脑的2倍甚至3倍,所以为了在手机上显示的图片更加清晰,设计师给的图片都是2倍图甚至3倍图问题: 如何使用2倍图片的精灵图或者3倍图片的精灵图呢以2倍图为例:利用PS将精灵图缩小一倍,去量取对应的宽高和位置坐标利用background-size去缩放精灵图(缩放至原始图片的1/2)​重点注意: 引用的图片还是原来的2倍图​利用ps缩放图片:将图片选项卡拖拽出来或者选择菜单栏图像 - 图像大小 - 将宽度缩放至1/2即可 只需

流式布局移动端的特点手机端的兼容性问题比PC端小很多，因为手机端的浏览器版本比较新手机的分辨率比电脑的分辨率高很多,所以手机的设计图一般是2倍图或者3倍图PC端设计图: 1 : 1移动端设计图: 1 : 2或者1 : 3 640 或者 750手机屏幕碎片化很严重，大小区别不会很大PC端解决屏幕不一致: 版心手机端解决屏幕不一致: 通栏 和当前屏幕保持一样大 (自适应)流式布局，也叫百分比布局，是移动端开发中经常使用的布局方式之一。流式布局的特征：宽度自适应，高度写死(320)，并不

视口(viewport)问题：一个电脑上的网站，在手机端访问，效果是什么样的？么有产生横向滚动条 而是整体缩小了html的宽度固定是980​视口:就是一个容器,这个容器会包裹html这个容器默认就是980像素并且可以自动缩放,会将这个html包裹起来 缩放到当前设备的大小​原因:早期是没有手机页面的,只有PC页面,如果直接在手机端去访问PC页面,那么势必会产生横线滚动条 这样 体验不 是很好,所以乔布斯就发明了视口 利用视口这个容器将html包裹起来 缩放到当前设备的大小至于视口默

移动web基础移动端调试问题模拟器调试真机调试：使用手机进行访问。手机设备五花八门，屏幕尺寸都大不一样，尤其是安卓端，给我们的页面预览带来了一些麻烦。在实际工作中，作为开发者不可能有足够的设备让我们去测试（除了测试部门 ），即便有，效率也特别的低，因此开发者一般都是通过浏览器的手机模拟器来模拟不同的设备。...

动画动画可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。动画与过渡的区别：过渡特点:有且仅有两个状态不会主动执行次数有执行的限制css3动画特点:可以设置多个状态可以主动执行可以无限执行使用一个动画的基本步骤：声明动画 (创建动画序列)@keyframes 自定义的动画名称 {0% {}25%{}50% {}75% {}100% {}}调用动画 (给谁添加这个动画)animation详解animation是一个复合属性，一共有

3D转换transform:不仅可以2D转换，还可以进行3D转换。思考：2D与3D的区别？坐标轴用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。注意+Y是向下的。perspective透视电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。注意：当为元素定义 perspective 属性时，其子元素会获得

2D转换transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作translate平移transform: translateX(100px);transform: translateY(100px);transform: translate(100px, 100px);transform: translate(50%, 50%);注意：translate的值可以是px

过渡过渡的属性如果两个状态发生改变，没有过渡，效果是瞬间变化的如果加上了过渡，那么这个过程就会有动画的效果。整个状态变化的过程是由浏览器来完成的，我们只需要关注开始状态与结束状态即可。transition: all 1s;过渡的注意点：过渡必须要有两个状态的变化。过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。...

CSS3 的现状新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于 PC 端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性CSS3 新增选择器CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。属性选择器结构伪类选择器伪元素选择器属性选择器（★★）属性选择器，按照字面意思，都是根据标签中的属性来选择元素示例代码： /* 只选择 type =text 文本框的input 选取出来 */input[type=text] {

HTML5新特性概述HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。语义化标签 （★★）以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的<div class=“header”> </div><div class=“nav”> </div><div class

字体图标的引入下载完毕之后，注意原先的文件不要删，后面会用。把下载包里面的 fonts 文件夹放入页面根目录下字体文件格式不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。1).TureType( .ttf )格式.ttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；2).Web Open F