yanbuxu的博客

原创 面对对象的特点、案例、本地储存

面向对象的特点封装类似于函数，更大层次的封装函数是一个功能的封装对象是多个功能的封装隐藏细节，让使用更简单继承更灵活的扩展多态动态的扩展三、面向对象的案例轮播图 - 增强版下方list控制图片切换左右按钮控制图片切换联动控制自动播放四、 本地存储本地存储介绍跨时间页面存储数据cookie，storage记住账号密码在商品列表页面点击加入购物车，在购物车页面可以看到刚才点击的商品登陆之后，关电脑，重新打开电脑，打开网站，还是登陆状态本地：客户端的硬盘两个客户端之

原创 创建对象

创建对象…工厂模式创建对象自定义工厂模式，放弃，自己封装对象，返回对象function fn(n){var obj = {};obj.name = n;return obj;}var o = fn(“admin”);内置的工厂模式(自定义的构造函数)，推荐，new执行函数function Fn(n){// 自动创建的对象：通过this拿到this.name = n;}var o = new Fn(“root”);构造函数的缺陷function Fn(n){// 自动创建的

原创 JOSN

一、JSON真正的jsonjson数据，可以放在json文件中，也可以出现在编程语言中是一种文本数据，有专门的文件存储，.json文件类似于：记事本文件：.txt有固定的语法要求json是用来做什么的：通用数据是一种文本数据，用来作为服务器端和客户端数据交互时，存储数据客户端A：英语，中文，json说话：说什么？听不懂，得有一个通用语言：json服务端B：中文，中文，json是一种编程语言中的通用数据，任何一门编程语言，都能识别，都能解析，都认识编程语言中的jsonjs中的json

原创 ES6新增

ES6的新增新增的声明关键字：let和constlet和const没有提升不允许重复声明块级作用域暂时性死区全局变量，不会绑定windowconst不允许修改地址，可以改变值作为常量使用注意：复杂数据和一般数据的区别箭头函数基础语法var sayHello = (name)=>“hello”+name;sayHello(“张三”);特点 0. 类似于无名函数，只能作为值使用没有自己的this有且只有一个参数时，可以省略小括号有且直接返回数据时，可以省略花括号和re

原创 正则、ES6

正则正则的读技巧记下所有符号逐位读注意小括号作为一个整体注意中括号表示一位中文/1+KaTeX parse error: Can't use function '\u' in math mode at position 6: //^[\̲u̲4E00-\u9Fa5]+/背https://tool.oschina.net/uploads/apidocs/jquery/regexp.htmlES5补充 - this相关，函数的方法复习this概念：当前函数的执行上下文执行函数的

原创 正则

二、正则概念和意义概念：正则表达式，正则对象，正确的规则，描述字符串的规则正则一般都是配合字符串使用可以对字符串进行：验证，替换，查询意义：快速的验证，查询，替换字符除非极端情况，正则既可以节省操作，又可以节省性能证明：6正则的意义.html如何创建正则字面量var reg1 = /正则的内容/;构造函数var reg2 = new RegExp();字面量正则中不允许出现变量，构造函数可以，但是使用都是一致的如何使用验证，替换，查询正则的方法验证：reg.test(s

原创 事件

事件-下默认事件没有主动些，系统默认有可选，可不选如果不要，阻止通过事件对象身上的e.returnValue = falsee.preventDefault()事件委托将多个子元素的相同事件利用事件冒泡委托给共同的页面现存的父元素，通过事件目标找到真正触发事件的子元素，完成事件处理。的过程，叫事件委托事件委托的好处：节省内存给页面上暂时不存在的元素绑定事件（给动态的html绑定事件）事件源和事件目标事件源：绑定事件的元素必然可以通过this拿到事件目标：触发事件的元素必然可

原创 事件的介绍

五月13日：## 一、事件的介绍事件的组成事件源：obox，绑定事件的元素。注意：事件目标，不是任何时候都等同于事件源。一般情况下是一个。绑定事件的方式：on，赋值式绑定事件类型：click，行为方式赋值：= ，赋值式绑定事件的标志之一事件处理函数：function(){console.log(“点了一下”)}，触发指定行为时，要做的事情隐藏的部分：事件对象事件对象的介绍事件发生时产生的对象，用来记录事件发生时产生的信息默认隐藏，需要主动获取事件对象的获取兼容

原创 dom补充

DOM-下一、操作属性操作…样式操作设置什么时候会通过js设置样式？默认样式都在css中写了必然是和用户产生和交互的时候什么时候会和用户产生交互？至少至少是在项目写完了，上线之后，意味着css也写完了为了保证js（用户控制）的样式能够生效，至少得让js设置的样式，权重高一些至少，得是内联样式综上所述，在js中设置的样式，都是行内样式！方式可见的内置属性（html的属性）：style注意// 1.不允许出现中划线，改成小驼峰式obox.style.fontSize = “1

原创 dom

一、DOM0. js的三大组成部分的关系ECMAScript规定，如何在BOM中操作DOM介绍DOM文档对象模型，对象：documentDOM（W3C机构）不属于BOM（浏览器厂商）window对象身上有提供document对象DOM，主要控制页面（html文件），所有的页面操作都需要通过DOMDOM的结构：html的结构：树形结构，包含结构，家族结构（父子级，兄弟级）html根元素：head，bodyDOM树形结构，的每个组成部分，都叫节点（元素，属性，注释，文本）所有节点，都是

原创 bom

一、BOM0.复习js的三大组成部分BOM（浏览器），DOM（页面），ECMAScript（语法）关系ECMAScript（语法）规定，在 BOM（浏览器）中，如何操作 DOM（页面），做什么交互1.什么是BOM概念BOM：浏览器对象模型，是个模型，这个模型由一个对象window来体现（具象）作用：提供了ES和页面的运行环境浏览器的一些规定，首先需要在ES的基础之上设置，但是最终生效时，以浏览器的标准为主浏览器的规范没有涉及到的范围，使用ES的规范宪法：ES，地方法规：浏览器的规定

原创 对象、进制的转换、日期对象

一、对象js的对象的分类内置对象：ES提供可以直接被使用的对象，已经是一个具体的实例了，不需要创建Math对象，数学对象本地对象：其实只是ES提供的一种类方法，需要被实例化之后，才能使用需要被new执行之后，才能使用String，Object，Array，Number，Boolean，RegExp，Date宿主对象：由浏览器或W3C提供的运行ES的环境，所带的对象BOM：window，DOM：document所有的自定义对象注：实例化：转化成实际的案例补充关键字：delete，用

原创 es5的新增、

一、ES5的新增什么是ES5，ECMAScript5ES的版本更新，向下兼容，老版本并没有全部废弃，新版本只是在老版本的基础上新增1. 严格模式严格模式：更严格的开发模式 js的代码规范非常不严格，所以严格模式的意义是： 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为; 消除代...

原创 对象的补充-栈堆、全局对象window和this

一、对象的补充-栈堆内存用来运行数据的控件，内部有区分了不同的存储方式栈：一般用来存储变量名和地址，空间小，稳定，不可修改堆：一般用来存储数据，空间大，可被修改关系：一一对应，多对一，不能一对多存取规则：栈：先进后出：杯子堆：先进先出：掉底的杯子数据类型的分类基本类型（值传递）数据就在栈中不存在深浅拷贝，默认就是深拷贝引用类型（引用传递的数据）栈中只保存了一个地址，地址...

原创 对象的操作、对象的遍历方式、字符

对象的操作：1.点语法 .用于确定的属性名2.中括号语法[]用于不确定的属性名，当属性名是变量时对象的遍历方式for-infor(var i in obj){// i就是obj中的所有属性名// 思考：如何根据属性名获取属性值// 提示：中括号语法字符串 只要被引号包括起来就是字符串，所有数据都可以转成字符串，只要被引号包裹即可引号：单引号’，双引号"-----------...

原创 数组

数组的操作索引（编号，序号，从0开始）var arr = [“hello”,3,4,5,“world”];数组是一个有序数据的集合有序的序号，索引从0开始到哪结束根据长度，得出，到length-1数组的第一个：数组[0]数组的最后一个：数组[数组.length-1]增增加数组的长度给不存在的位置赋值arr[arr.length] = “哈哈哈”;删缩短数组的长度//...

原创 js的编译和执行、变量和函数会提升、递归、对象、数组

JS的编译和执行：可以不懂原理，只需要注意现象，可以正常写代码懂原理，帮助你提升代码性能，优化；方便面试js是一门解释性语言预先编译，再执行先通读全文，在解释含义找到var和function，做出对应提升编译时提升执行时按照逻辑，结构正常执行变量和函数会提升：var的提升提前声明，=号的位置赋值console.log(a); // undefinedvar a ...

原创 函数的返回值返回概念

函数的返回值返回值概念函数自身的处理数据或执行结果，需要被二次使用或其他程序调用时，需要将数据返回出来如何拿到返回值关键字：return 要返回的数据return的功能可以让函数返回指定的值可以立即结束当前函数一个函数中可以写无数个，但是只能执行一次return，一次只能返回一个数据，不允许返回多个数据返回到哪返回到函数的执行语句函数名()，既是在执行函数，也是在拿返回值注意...

原创 函数的概念、执行函数、函数分类、函数的参数、部分函数返回值

函数的概念函数：由用户或自身控制，可以实现某个功能的 代码段（很多代码）函数的特点：忽略细节：在使用过程中，只需要关注其实现的功能，而不需要关注其内部原理重复使用：多次使用选择使用：按需使用创建函数：内置（系统提供，公司发的）声明式创建函数需要配合关键字：function语法：function 函数名(){}赋值式创建函数需要配合关键字：var和functionvar 变...

原创 小数的问题、三目运算法、循环结构

小数的问题;现象明明只有一位小数，但是最后出来很多位0.1 + 0.7 = 0.79999999999999959.999999999999999 不小于 60诸如此类问题原因计算机最终执行或识别的符号只有0和1，二进制计算机中有一套完善的转换机制，所有内容，不管是文字，字符，任何数据，图片，声音，视频，最终都会被解析成二进制计算机对于小数的计算，会产生误差解决主动保留n为小数...

原创 js中三大特殊数据、undefined，null，NaN、逻辑分支（选择结构，分支结构）

js中三大特殊数据、undefined，null，NaN非法的数值运算得到的结果特殊之处：是一个数值型的数据，但是不是一个数字NaN不等于任何值，和任何数据都不相等，NaN不等于NaN检测方法：isNaN(要检测的数据)true：检测结果为 NaN 或能转成 NaNfalse：检测结果不是 NaN 或不能转成 NaNundefined是：未赋值，类型是undefined；null是...

原创 数据类型转换方法、算术运算符、关系运算符、逻辑运算符、赋值运算符、一元运算符

数据类型的转换方法：强制转换（显示转换，主动转换） 字符转数值 parseInt(要转换的数据或变量) 从左向右依次检测，遇到第一个非数字的字符，停止转换 忽略小数点后所有的内容，...

原创 网页组成、计算机语言、web标准

原创 js行为、组成、常见数据类型、打印信息方式、变量语法

js写在哪内联（行内）：属性形式：事件触发不建议使用，结构和行为的分离，优化项目，便于管理为了测试方便内部：script双标签，包裹js代码不太建议内部，结构和行为的分离，非公共行为部分，简单行为，可以放在当前页面公共行为：好几个页面都要用到的行为，叫公共行为script标签可以放在哪？可以放在任何位置行业习惯：head标签内、body后：内部的最后；外边的最后；没有区别s...

原创 grid布局

插件来进行html的font-size的值的改变 适应插件 fiexible.js 进行适配步骤：1，先把html自身所带的控制视口的meta标签先删除2，引入flexible.js 在head标签里面 grid布局 针对的是子元素布局 1，形成一个网络结构(父元素添加) display：grid； ...

原创 媒体查询、mate标签设定 rem vw

媒体查询：由设备类型、检测设备特性表达式构成语法：@media 设备类型【all/screen】 and（条件表达式）{css表达样式}注：and两侧必须有空格 not放在设备类型的前面例如：@media all and （min-width：1024px） and （max-width：1200px）{body{background：orange；}}@media all ...

原创 怪异盒模型和弹性盒模型

box-sizing：属性值box-sizing：content-box；常规模型盒box-sizing：border-box；怪异魔核形怪异盒模型特点：padding和border都会在元素的宽高内部，不会把盒子撑大弹性盒子：布局方案作用：控制他最近的一层子元素，布局方式特点：a，弹性盒子里面的离他最近的一层子元素都可以添加大小b，如果想让弹性盒子里面的一个子元素左右上下居中，只需...

原创 文本阴影、控制背景图大小、元素变圆

文本阴影：text-shadow：x y 大小 颜色 注：如果想添加多个阴影，每一组以逗号隔开盒子阴影：box-shadow： x y 距离 大小 颜色 内阴影insideword-wrap：break-word 功能：尝试把长单词换到下一行显示，如果下一行仍有超出，自动短句word-break：break-all 功能:粗暴的短句background-or...

原创 新增html属性和css新增属性、结构伪类选择器、状态伪类、层级选择器

html属性：required 如果表单没有输入内容 禁止提交step 确定一个法定值例如：3 -6 -3 0 3 6 9autocomplete 自动提示信息 属性值no/offplaceholder 文本框的提示信息autofocus 自动聚焦pattern 属性值是一个正则表达式（高效的字符串处理规则）novalidate 取消验证list属性 必须...

原创 语义化结构标签、视频引入、播放形式

语义化结构标签:sectiona：更偏于划分区域。( 网页的外围结构… .更类似与div) article：更偏向于内容的展示 aside：侧边栏（在一旁的） header：网页头部或者是内容快头部 footer：网页的顶部或内容快的底部 ...

原创 3d属性类型

3d旋转：rotateZ（） rotate3d（x，y，z，度数） 注：x y z 一个矢量值 0是不旋转 1是旋转 例如：rotate3d（1，1，0，45deg）3d缩放：scaleZ（）scale3d（x，y，z）背面不可见：backface-visibility：hedden；perspective景深：值越大距离越远 （给父元素添加）通常为900到1200像素之...

原创 平面空间的元素和部分3d空间的元素

平面空间的元素变形：变形属性：transform transform的属性值为功能函数2d的功能函数：2d的位移： 2d的旋转： 2d的缩放： 2d的倾斜2d位移：transform：translate（x，y）或transform：translatex（x轴移动的距离）或transform：translateY(y轴移动的距离）2d的缩放：transform：scal...

原创 margin

margin：1.margin长在元素之外的 2.margin控制的是同级元素之间的位置关系 3.margin不会对盒子本身的宽高造成影响 4.给一个方向单一添加margin的值：margin-left/right/bottom/top 5.margin的设置方法：一个值是四周 两个值是上下 左右 三个值 上 左右 下四个值 上右下左 6.margin可以设置负值 7.margin常出现的b...

原创 列表、边框、线条类型、边框、透明、控制背景图、css模型盒padding

列表：ul ol dl 研究列表的符号 1.list-style-topy 值为 circle square none 重点是none清楚列表符号边框：长在元素的宽高之外 border：10px solid red；（简写） border-width：10px border-style：solid border-color：red常用的线条类型：solid...

原创 选择符的权重、css的层叠性、文本属性、浮动

千锋第五天笔记整理：选择符的权重：id＞class＞标签 四个数字表示权重id->0100 class->0010 标签->0001 伪类选择符->10 通配符->0 包含选择符的权重为权重之和例如：#box div{}就是100+1=101 .wrap 。con p {}就是10+10+1=21 群组选择符的权重是不会发生改变的保持原来的权...

原创 样式表权重关系、css语法、起名规范和方法、类型选择语法、群组选择符、包含选择符语法、伪类选择器、通配符

样式表的权重关系:内联样式表的权重最大!内部和外部样式的权重，和书写的前后顺序有关!(放在后而的会把放在前而的样式覆盖掉)！imoprtant权重性最高 直接加后面 不用空格css语法：选择符{属性：属性值;}选择符：就是给标签起的名字。一，类选择符：所有的html标签可以直接当作选择符进行应用。（div，p，em 等等等）特点：能选中当前结构里全部同名标签。二，id选择符：相当于身份...

原创 表格的html属性、表单、css作用、css语法、

千锋第三天学习内容：表格的html属性：width是宽 height是高 bordercolor是边框颜色 cellspacing=“”里面写相邻单元格边框的间距 cellpadding=“”里面写内容距离边框之间的距离align=“”水平对齐方式 属性值：left左center中right右valign=“”垂直对齐方式 属性值“”top上对齐 bottom下对齐 midd...

原创 html语法、各种标签

html语法：1.html标签分为单标签和双标签（成对出现)2.语法：双标签<标签名称 属性名=“属性值”> </标签名称>单标签：<标签名称 属性名=“属性值”html语法说明；a；在尖角号后面的第一个单词就是标签的名称。b：在标签后面，用空格隔开是属性。c：属性和属性值之间用等号链接。d：属性值放在引号里面“单双引号都可以”e：如果一个标签拥有多个属性的时...