Another Dimension

学习Ajax一、原生Ajax AJAX AJAX（Asynchronous JavaScript AND XML），就是异步JS和XNL。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势为无刷新获取数据。AJAX不是新的编程语言，而是将现有标准结合在一起使用的新方式。 XML介绍 XML可扩展标记语言，被设计用来传输和存储数据。现在已被JSON取代 AJAX的特点： AJAX的优点： 可以无需刷新页面与服务器端进行通信 允许根据用户事件来更新部分页面内容 AJAX的缺点： 没有浏览历史，不能回退 存在跨域问题（同源） SEO不友好 （SEO搜索引擎优化） AJAX的使用 express基于Node.js平台，快速、开放、极简的Web开发框架。 发送文件的方法是response.sendFile(_dirname+'文件路径')，可以发送文件，比如html页面1234567891011121314//1.引入express const express = require("express") //2.创建应用对象 const app = express() ...

javascript学习笔记08——本地存储一、 本地存储sessionStorage和localStorage 本地存储的特征 数据存储在用户浏览器中 设置，读取方便，甚至页面刷新不丢失数据 容量较大，sessionStorage约5M，localStorage约20M 只能存储字符串，可以将对象JSON.stringify()编码后存储 window.sessionStroage 生命周期为关闭浏览器窗口 在同一个窗口（页面）下数据可以共享 以键值对的形式存储使用, 存储数据：sessionStorage.setItem(key,value); 获取数据：sessionStorage.getItem(key); 删除数据：sessionStorage.removeItem(key); 删除所有数据：sessionStorage.clear() window.localStorage 生命周期是永久生效，除非手动删除，否则关闭页面也会存在。\ 可以多窗口（页面）共享（同一个浏览器可以共享） 以键值对的形式存储 存储数据：localStorage.setItem(key,val ...

javascript学习笔记07——PC端网页特效,移动端网页特效一、PC端网页特效 元素偏移量offset系列 oofset翻译过来就是偏移量，使用offset系列相关属性可以动态得到该元素的位置（偏移），大小等。 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度和高度） 注：返回的数值不带单位 offset系列常用属性 offset系列属性 作用 element.offsetParent 返回作用该元素带有定位的父级元素 如果父亲都没有定位则返回body element.offsetTop 返回元素相对于带有定位父亲元素上方的偏移量,如果没有父元素或者父元素没有定位，则以body为准 element.offsetLeft 返回元素相对带有定位父元素左边框的偏移量,如果没有父元素或者父元素没有定位，则以body为准 element.offsetWidth 返回自身包括padding、边框、内容区的宽度，返回数值不带单位 element.offsetHright 返回自身包括padding、边框、内容区的宽度，返回内容不带单位 offse ...

javascript学习笔记——事件高级,BOM浏览器对象模型 注册事件（绑定事件） 删除事件（解绑事件） DOM事件流 事件对象 阻止事件冒泡 事件委托（代理，委派） 常用的鼠标事件 常用键盘事件 一、事件高级 注册事件（绑定事件）：给元素添加事件 注册事件的两种方式：传统方式 , 方法监听注册方式 传统方式： 以on开头的事件，如onclick 特点: 注册事件的唯一性 同一个元素，同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。 方法监听注册方式： addEventListener() 是一个方法 。 IE9之前的IE浏览器不支持，可以使用attachEvent()代替 特点：同一个元素，同一个事件可以注册多个监听器 按照注册顺序依次执行 eventTarget.addEventListener(type,listener,useCapture) 将指定的监听器注册到eventTatget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 type: 事件类型字符串，比如click,mouseover等。 listener: 事 ...

javascript学习笔记——Web APIs，DOM一、Web APIs Web APIs包含DOM(页面文档对象模型)，BOM(浏览器对象模型)。 JS基础学习ECMAScript 基础语法为后面做铺垫，Web APIs是JS的应用，大量使用JS基础语法做交互效果。 API 和 Web API API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。 Web API 是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）; 二、DOM DOM(文本对象流模型)，是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中所有标签都是元素，DOM中使用element表示 节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 获取元素 获取页面中元素可以使用以下方法 根据ID获取 根据标签名获取 通过HTML5新增的方法获取 特殊元素获取 通过ID获取 使用getElementById()方法可以获取带有I ...

javascript学习笔记——JS内置对象,JavaScript中的数据类型一、JavaScript内置对象 JavaScript中的对象分为三种：自定义对象，内置对象，浏览器对象 自定义对象和内置对象是JS 基础内容，属于ECMAScript；第三种浏览器对象属于JS独有的 （JS API） 内置对象：JS自带的一些对象，这些对象供开发者使用，并提供一些常用的或是最基本而非常用的功能（属性和方法）。 内置对象的最大优点就是帮助我们快速开发 JS中提供的内置对象：Math、Date、Array、String等 Math数学对象 不是一个构造函数，所以不需要 new 来调用，而是直接使用里面的属性和方法 常用的方法和属性123456Math.PI //圆周率Math.floor(); //向下取整Math.ceil(); //向上取整Math.round(); //四舍五入 特殊情况Math.round(1.5)结果为2 Math.round(-1.5)结果为-1Math.abs(); //取绝对值Math.Max(); //Math.main() 随机数 ...

javascript学习笔记——数组，函数，作用域，对象二、JavaScript数组 数组：数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存放在单个变量名下的方式。 数组创建的方式： 利用new创建数组12var 数组名=new Array();var arr=new Array(); //创建一个空的新数组 利用数组字面量创建数组1234//1.利用数组字面量的方式创建数组var 数组名=[];//2.利用数组字面量的方式创建带初始值的数组var 数组名=['小白','小黑','大黄']; 获取数组元素: 数组索的引 索引：用来访问数组元素的序号（数组下标从0开始） 数组可以通过索引访问、修改、设置对应的数组元素。 数组的长度：使用“数组名.length”可以访问数组元素的数量（数组长度） 数组中新增元素 通过修改length长度新增数组元素 通过修改数组索引新增数组元素 可以通过修改数组索引的方式追加数组元素 不能直接给数组名赋值，否则会覆盖掉以前的数据。 冒泡排序 JavaScript中的 ...

javascript学习笔记——JS运算符一、JS运算符 运算符：（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。 JavaScript中常用的运算符： 算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符 算数运算符（+ , - , * , / , %） 直接用浮点数进行算数运算可能会出现问题，浮点数的精度问题，浮点数值的最高精度为17个小数，但在进行算数运算时其精确度远远不如小数。1console.log(3.4+1.2); //得到的结果是 0.30000000000000004 表达式与返回值 表达式：是由数字，运算符，变量等以能求得数值的有意义排列方法所得的组合。（由数字，运算符，变量组成的式子）。 返回值：表达式最终都有一个结果返回给我们，我们称为返回值。 递增和递减运算符 递增（++） 放在变量前面时为前置递增运算符（++age类似于 age=age+1）先自加1，后返回值 放在变量后面时称为后置递增运算符 先返回原值，后自加1 递减（–） 放在变量前面时为前置递减运算符 先自减1，后 ...

javascript学习笔记——初始js，JS变量，数据类型一、初识JS JavaScript历史 布兰登.艾奇 1995年诞生Javascript JavaScript是什么 Javascript是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script是脚本的意思） 脚本语言：不需要编译，运行过程由JS解释器（js引擎）逐行来进行解释并执行 现在也可以基于Node.js技术进行服务端器编程 JavaScript的作用 表单动态校验（密码强度检测）（JS产生最初的目的） 网页特效 服务端开发（Node.js） 桌面程序（Electron） APP(Cordova) 控制硬件-物联网（Ruff） 游戏开发（cocos2d-js） JS脚本语言-编程类语言 实现业务逻辑和页面控制（决定功能） 浏览器执行JS介绍 浏览器分为两个部分：渲染引擎和JS引擎 渲染引擎： 用来解析HTML和CSS，俗称内核，比如chrome的内核时blink,老版本的webkit JS引擎：也称为JS解释器，用来读取网页中的JavaScript代码，对其处理后运行。比如chro ...

CSS基础语法学习——伸缩布局一、伸缩布局（CSS3） 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向； 侧轴：与主轴垂直的轴称作为侧轴，默认是垂直方向 方向：默认主轴从左向右，默认侧轴从上到下。主轴与侧轴并不是固定不变的，通过flex-direction可以交换 flex-direction: row | row-reverse |column | column-reverse row:横向，从左到右 row-reverse: 横向，从右到左 column: 竖向，从上到下 column-reverse: 竖向，从下到上 justify-content 调整主轴对齐 值 描述 理解 flex-start 默认值，项目位于容器的开头。让子元素从父容器的开头开始排序 让子元素从父元素开头开始 flex-end 项目位于容器的结尾 让子元素从父容器的后面开始排序 center 项目位于容器的中心 让子元素在父元素的中间显示 space-between 项目位于各行之间留有空白的容器中 左右的盒子贴近父盒子，中间的平均分布空白区域 s ...