孤梭の个人博客

DOM简介「1.1什么是DOM」文档对象模型(Document Object Model ，简称DOM)，是W3C组织推荐的处理扩展标记语言(HTML或者XML)的编程接口。 W3C已经定义了一系列的DOM接口，通过这些接口可以改变网页的内容，结构和样式。 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的DOM编程接口 对于HTML，DOM使得HTML形成了一颗DOM树，包含文档，元素，节点。 我们获取过来的DOM元素是一个对象（Object），所以称为 文档对象模型 「1.2DOM树」 文档：一个页面就是一个文档，DOM中用document表示 元素：页面中所有标签都是元素，DOM中用element表示 节点：网页中所有内容都是节点(标签，属性，文本，注释)，DOM中使用node表示 DOM把以上内容都看作是对象 获取元素「2.1如何获取页面元素」DOM在实际开发中主要用来操作元素 有如下几种方式 根据ID获取 根据标签名获取 通过HTML5新增方法获取 特殊元素获取 「2.2根据id」12345678910111 ...

内置对象概述JavaScript 中的对象分为3种：自定义对象 、内置对象、 浏览器对象前面两种对象是JS基础内容，属于ECMAScript;第三个浏览器对象属于JS独有的，JS API讲解内置对象就是指 js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而非必要的功能(属性和方法),内置对象最大的优点就是帮助我们快速开发。 JavaScript提供了多个内置对象：Math，Data，Array，String等 「查文档」学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习。MDN:https://developer.mozilla.org/zh-CN/ Math对象「Math对象」不是构造函数，它具有数学常数和函数的属性和方法，跟数学相关。 属性. 方法名 功能 Math.PI 圆周率 Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入，就近取整，注意-3.5 结果是 -3 Math.abs() 绝对值 Math.max()/Math.min() ...

简单数据类型和复杂数据类型「简单类型（基本数据类型、值类型）」：在存储时变量中存储的是值本身，包括string ，number，boolean，undefined，null 「复杂数据类型（引用类型）」：在存储时变量中存储的仅仅是地址（引用），通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等； 「堆栈」堆栈空间分配区别： 1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面 2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。 简单数据类型的存储方式 值类型变量的数据直接存放在变量（栈空间）中 复杂数据类型的存储方式 引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中 「简单类型传参」 函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。 1234 ...

对象的概念「对象」在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。 对象是由属性和方法组成的 属性：事物的特征，在对象中用属性来表示（常用名词） 方法：事物的行为，在对象中常用方法来表示（常用动词） 「为什么需要对象」 保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组，如果保存一个的完整信息呢？ 为了更好地存储一组数据，对象应用而生；对象中为每项数据设置了属性名称，可以访问数据更语义化，数据结构清晰，表意明显，方便开发者使用。 123456var obj = { "name":"fan", "sex":"male", "age":18, "height":155} 创建对象的三种方式 利用字面量创建对象 利用 new object 创建对象 利用构造函数创建对象 「1. 利用字面量创建对象」使用对象字面量创建对象： 就是花括号 { } 里面包含了 ...

函数「1.函数的概念」封装了一段可被重复调用执行的代码块，通过函数可以实现大量代码的重复使用。函数是一种数据类型。 「2.函数的使用」函数的使用分为两步：声明函数和调用函数 声明函数 1234567891011121314// 1. 通过function关键字定义函数 -- 命名函数  function 函数名() {    函数体代码  }  // 1.1 function 是声明函数的关键字，必须小写  // 1.2 函数名 命名为动词形式 例: getSum  // 2. 通过函数表达式定义函数 ---匿名函数  var fn = function() {};  // 2.1 fn是变量名，不是函数名  // 2.2 fn是变量，只不过变量存储的是函数  // 2.3 函数表达式创建的函数可以通过 变量名() 来调用  // 2.4 函数表达式也可以定义形参和调用传入实参。 12345// 匿名函数使用的有第二种方式- -匿名函数自调用( function() { alert(123);})(); 调用函 ...

「1. 数组的概念」一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。数组中可以存放任意类型的数据 「2. 创建数组」 利用new关键字创建数组 12var 数组名 = new Array([n]);//[]代表可选 若写n，则代表数组的长度var arr = new Array();//创建了一个名为 arr 的空数组 利用数组字面量创建数组 1234567// 1. 使用数组字面量方式创建空的数组var 数组名 = [];//若写n，则代表数组的长度 //2. 使用数组字面量方式创建带初始值的数组//3. 声明数组并赋值称为数组的初始化var arr =['1','2','3','4'];var arr2 = ['fan',true,17.5];//数组中可以存放任意类型的数据 「3. 访问数组元素」索引(下标):用来访问数组元素的序号。索引从 0 开始 123456// 定义数组va ...

H5简介「1. 什么是HTML5」 定义：HTML5定义了HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的HTML。 两个概念： 是一个新版本的HTML语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指：HTML5、CSS3、JavaScript,这也是广义上的HTML5 「2. HTML5拓展了哪些内容」 语义化标签 本地存储 兼容特性 2D、3D 动画、过渡 CSS3特性 性能与集成 HTML5新增「1. 什么是语义化」语义化是指用HTML写出符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 「2. 新增了哪些语义化标签」 header — 头部标签 nav — 导航标签 article — 内容标签 section — 块级标签 aside — 侧边栏标签 footer — 尾部标签 「3. 新增多媒体音频标签」多媒体标签有两个，分别是音频 audio和视频video。 audio 标签说明 可以在不使用标签的 ...

元素的显示与隐藏让一个元素在页面中隐藏或显示出来 共有三个属性 属性 属性值 display none | display visibility hidden | visible overflow visible | hidden | scroll | auto display属性隐藏后会脱标，不占有原来位置 visibility属性隐藏后不会脱标，继续占有原来位置 overflow属性针对溢出，visible | hidden | scroll | auto overflow属性值 描述 visible 不剪切内容不添加滚动条 hidden 隐藏超出对象尺寸的内容 scroll 总分是显示滚动条 auto 超出内容自动显示滚动条，不超出不显示 精灵图技术「概述」 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。 为了有效地 ...

流程控制在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。 分支结构js语言提供了两种分支结构语句 if语句 switch语句 「if 语句」1234//条件成立执行代码，否则什么也不做if(条件表达式){ //条件成立执行代码语句} 语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由多个语句组成，一般情况下，会被分割成一个一个的语句。 123456//执行思路，如果if里面的条件表达式结果为真，true，则执行大括号里面的执行语句//如果if条件表达式结果为假，则不执行大括号里的语句，执行if语句后面的代码//演示if (3>2){ alert('前端路漫漫');} 「if else语句（双分支语句）」语法结构 123456789//条件成立，执行if里代码，否则执行else里代码if(条件表达式){ ...

定位基础定位就是将盒子定在某一位置，定位=定位模式+位偏移。 定位模式和位偏移都属于属性 定位模式用于指定一个元素在文档中的定位方式 边偏移就是决定该元素的最终位置。 定位模式由position属性设置，属性值分为四个 属性 属性值 语义 position static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 边偏移有四个属性 top left right bottom 属性 属性值示例 描述 top top: 50px; 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom bottom: 50px; 下端偏移量，定义元素相对于其父元素下边线的距离 left left: 50px; 左端偏移量，定义元素相对于其父元素左边线的距离 right right: 50px 右端偏移量，定义元素相对于其父元素右边线的距离 12345选择器 { position: relative; top；0px； left: 0p ...