前端学习笔记

<a href="xxxx" target='_blank'></a>  //新窗口打开 默认不打开新窗口

<!-- [if lt IE 9]>
     <h1> 您的版本过低</h1>
<![endif]-->

<style>
.p1{color:red}                        /*文本颜色*/
.p2{font-family: '华文中宋'}          /*字体类型*/
.p1{font-size: 26px}                 /*字体大小*/
.p1{font-weight: bold}               /*文字加粗*/
.p1{font-style: italic}              /*文字倾斜*/
.p1{color:red}/*文本颜色*/
.p1{color:red}/*文本颜色*/
.p1{color:red}/*文本颜色*/
</style>

<style>
     background-color: gary;                /*背景色*/
     background-image: url(xxx/xx.png)      /*背景图片*/
     background-repeat: no-repeat;          /*背景图片平铺方式*/
     /*合并运用（可省略其中属性） 背景色 背景图片 平铺方式*/
     background: gray url(xxx/xx.png) no-repeat; 
     background: url(xxx/xx.png) repeat-y;
     background: #aaccbb;
</style>

 var str = new String("sdsd");
 var str = String('sdg');
 var str = 'sdsds'; 

   //数组创建
 var arr = new Array(10);                  //方式1
 var arr = Array(1,true 'hello');          //方式2
 var arr = [1,true,'hello'];               //方式3（常用）
 console.log(arr[0]);
 console.log(arr.length);                 //数组长度：0~(length-1)
 /*
      for( ... in ...)   快速遍历(从头到尾遍历 无需判断)
 */
     for( var i in arr){}
//二维数组创建

var arr=[];

for(let i=0;i<10;i++){

var arr2=[];

for(let j=0;j<10;j++){

arr2.push(j);

}

arr.push(arr2);

}

//  创建对象
 var obj = new Object();
 var obj = Object();
 var obj = {};
 // 新增对象属性/方法
     obj.name = 'xxxx';
     obj.showName = function(){
         console.log(this.name);
     }
     console.log(obj['name']);
     console.log(obj.name);
     obj.showName();

  // 创建日期
   var d = new Date();
   console.log(d);    //Sat Oct 19 2019 23:50:02 GMT+0800 (新加坡标准时间)
   var d = new Date("2019/10/18");   //Fri Oct 18 2019 08:00:00 GMT+0800 (新加坡标准时间)
   var d = new Date("2019-10-18");
   var d = new Date("2019-10-18 10:30:18"); //Fri Oct 18 2019 10:30:18 GMT+0800 (新加坡标准时间)
   var d = new Date(2019,10,18,10,30,18);//Mon Nov 18 2019 10:30:18 GMT+0800 (新加坡标准时间)
   /*
       Date(number)
     1秒=1000毫秒
     number 参数单位 毫秒
     以 1970 年 1 月 1 日 0 时 0 分 0 秒 为参照物  1970年 Unix 诞生日
   */
   var d = new Date(1000);//Thu Jan 01 1970 07:30:01 GMT+0730 (新加坡标准时间)
/* 日期方法

set 设置

get 获取

周 06

月 011

*/
	d.setDate(5);
	d.getFate();// 5
	d.getDay(); // 6
	d.setMonth(4);
	d.getMonth();
	d.getHours();
	d.getMinutes();
	d.getSeconds();
	d.getTime();
	d.parse(&#39;2019-10-18&#39;);//1571356800000</code></pre></div></div><h4 id="bjdkk" name="BOM">BOM</h4><p>概念： BOM(Browser Object Model) 浏览器对象模型</p><h6 id="6dfsq" name="window-%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E6%96%B9%E6%B3%95">window 对象属性方法</h6><h6 id="105cu" name="%E8%AD%A6%E5%91%8A%E6%A1%86">警告框</h6><ul class="ul-level-0"><li>alert()

功能： 弹出警告框

格式：alert([String]);
confirm()

功能： 弹出警告框，带有取消和确定

格式：confirm([String]);

返回: true 或 false
prompt()

功能： 弹出带输入框的的提示框

格式： prompt([String],[String]); //prompt(“请输入”，‘985540932’);

参数：第一个参数，提示框显示的内容，第二个输入框默认参数

返回： 点确定 返回输入框内容，点取消，返回 null
Open*窗口
open()

功能： 打开新窗口（URL）

格式：open(‘www.baidu.com’,‘百度a’,‘width=400,height=400,top=200,left=200’)

参数： 参数1： URL 。参数2： 新窗口别名 。参数3 ：打开窗口的大小位置

注意：如有参数2，再次点击打开新窗口，则在已经打开的别名窗口打开，不会重复打开新窗口
opener()

功能： 打开当前窗口的父窗口的 window 对象 （IE不支持）

格式：opener.xxxx //

例子：opener.document.write(‘子窗口叫我输出’)； 在子窗口执行，在父窗口出效果
Location 对象
概念： 相当于浏览器上的地址栏

URL 统一资源定位符

[protocol]【协议】:[host]【主机名:端口号】/[pathname]【路径】?[search]【查询字符串】#[hash]【锚点】

例如：https://www.fivecc.cn/lyb/xxx.html?username=Five&age=22#3
hash : 【锚点】 用于页内跳转 ===> #flag3
host : 【主机名:端口号】 www.xxxx.com浏览器端口号 默认8080
hostname : 【主机名】域名/IP
href : 【URL】 location.href='https://www.fivecc.cn'
pathname : 【路径名】
port : 【端口号】默认8080
protocol : 【协议】 http: 网协议 file: 本地文件协议
search : 【查询字符串】跟在 ?xxx&use=five
assign()

功能： 跳转指定URL
reload()

功能： 重载当前URL

参数： 参数为true时，强制加载，从服务器源头重新加载，忽略缓存
replace()

功能： 用新URL 替换当前页面，可以避免产生跳转前的记录
History
保存用户上网记录
length : 返回当前history记录的条数
forward()

功能 ：【前进】 下一历史记录
back()

功能 ：【后退】 上一个历史记录
go()

功能 ：【跳转】

参数： 0 重载当前 2 前进2条记录 ，-2 后退2调记录
DOM
概念： DOM(Document Object Model) W3C 文档对象模型 ,中立与平台和语言的接口，它允许程序和脚本动态访问和更新文档的内容、结构和样式。

【注】 Dom 是打通 html css js壁垒的一个工具
DOM 树
DOM 节点分类
元素节点 : <div> </div> <span></sapn>
属性节点 ： title = '属性节点' value = '按钮'
文本节点 ： 哈哈哈 我是Five

【注】 JS 中 所有 DOM 节点都是对象

这些节点有三个常用属性， nodeName nodeType nodeValue
节点类型
nodeName
nodeType
nodeValue
元素
元素名称
1
null
属性
属性名称
2
属性值
文本
#text
3
文本内容 (不包括html)
元素节点属性
childNodes : 当前元素节点的所有子节点（包括元素节点 文本节点）    
firstChild : 当前元素节点的首子节点
lastChild : 当前元素节点 的 尾子节点
removeChild() : 删除子节点
parentNode : 当前 元素节点的父节点
previousSibling : 当前元素节点的前一个同级节点
nextSibling : 当前元素节点的 后一个同级节点
attribute : 当前属性节点的集合 ，【集合】不重复，无序
代码语言：javascript
复制
    // 封装 去掉空白节点 (实际 空白子节点 并未删除)

function removeSpaceNode(nodes){

var result = [];

for(var i = 0; i < nodes.length; i++){

// 保证是文本节点 且值为 空格

if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){continue;}

result.push(node[i]);

}

return result;

}

// 封装 去掉空白节点 (实际空白子节点删除， 从父元素上删掉)

function removeSpaceNode2(parent){

var nodes = parent.childNodes;

for(var i = nodes.length-1; i >= 0; i--){  //倒删 防顺序改变 跳删

if(nodes[i].nodeType == 3 && /^\s+$/.test(nodes[i].nodeValue)){

prarent.removeChild(nodes[i])

}

}

}
元素节点方法
document.getElementById()

功能 ： ID 标签

返回 ： 第一个符合条件的元素节点
document.getElementsByTagName()

功能 ： Html 标签

返回 ： 含有该标签的所有元素节点的数组
document.getElementsByClassName()

功能 ：类标签 (IE 低版本 不支持)

返回 ： 含有该类的所有元素节点数组
document.ElementsByName()

功能 ： name的值 （一般 在文本输入框 用这个属性）

返回 ： 符合条件元素节点的数组
document.createElement()

功能 ： 创建一个元素节点 span

返回 ： <span></span>
document.createTextNode()

功能 ： 创建文本节点

返回 ：
node.appendChild()

功能 ： 节点插入

返回 ：
insertBefore()

功能 ： 将插入的节点插入到旧节点

格式 ： 父节点。insertBefore([newNode],[oldNode])；
replaceChild()

功能 ： 替换元素节点

格式 ： parent.replaceChild([newNode],[oldNode]);
cloneNode()

功能 ： 克隆节点

格式 ： node.cloneNode()

参数 ： true 默认 false ,传true，就会复制元素节点的innerHTML （包括文本内容）

返回 ： 克隆的元素节点
代码语言：javascript
复制
   // IE 兼容函数封装  自定义 获取 className

function elementsByClass(parsent,classStr){

var nodes = parsent.getElementsByClassName('*')//找到当前所有节点

var result = []; // 记录符合条件的元素节点

for(var i = 0;i < nodes.length; i++){

if(nodes[i].className == classStr){

result.push(nodes[i]);

}

}

return result;

}

var oUl = document.ElementById('ul1');

var node = elementsClassName(oUl,'box');
获取Style
obj.style.xxx : 行间 CSS 样式获取方法
obj.getComputedStyle()

功能 ：获取当前 有效样式

格式： getComputedStylr(元素节点)[获取样式类型]；火狐/谷歌/safari

备注： 元素节点.currentStyle[获取样式类型]； IE
代码语言：javascript
复制
   //  获取当前样式的兼容函数 封装  getStyle()

function getStyle(elem,attr){

return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];

}

var dd = document.getElementsByClassName('div1');

getStyle(dd[0],backgroundColor);//注意 要确定唯一性 不能传数组对象 dd[0]
Attribute 系方法
操作当前元素节点中某个属性的

与 . 操作相比（obj.xxx = 'xxx'）
点操作 className 本操作 直接 class
支持 设置/查看 用户自定义 点操作不支持
removeAttribute() 点操作 无法 移除 只能置空
setAttribute() : 设置属性
getAttribute() : 查看属性
removeAttribute() ： 移除属性
层级结构
addEventListener
代码语言：javascript
复制
// 单击与双击

var tt;

btn.addEventListener('click',function(){

tt = setTimeout(function(){},300)

},false)  // false ===> 冒泡阶段

btn.adEventListener('dblclick',function(){

clearInterval(tt)

},true)  //true ===> 捕获阶段
函数
函数是对象 ，对象不一定是函数
apply call bind
apply 和call 可以改变 指向
当 没有传参数 或 null this 指向 默认为 window

f1(100,200) < => apply(null [100,200]) < = > call(null,100,200)
bind : 复制的意思 在复制的时候 改变指向

bind(null , 10,20);
代码语言：javascript
复制
 function f1(x,y){

console.log(x+','+y+'======>'+this);

}

f1(10,20);

var obj ={

age : 10,

sex : '男'

}

f1.apply(obj,[10,20]);

f1.call(obj,10,20);
this 指向
普通函数 ===> window
构造函数 ===> 当前实例对象
方法 ===> 实例对象
原型方法 ===> 实例对象
定时函数 ===> window
定时器
setInterval() ： 间歇
clearInterval() ： 清除
setTimeout() : 延时
代码语言：javascript
复制
    var timer= setInterval(function(){

clearInterval(timer); //停止

},1000);
事件 Event
事件基础
JS 事件 是由 访问 web 页面的用户 引起的一系列操作

当用户执行某些操作的时候，再去执行一系列代码，或者用来获取事件的详细信息，如鼠标位置，键盘key值等
事件处理函数
事件处理函数类型 分为：
鼠标点击事件
键盘事件
HTML 事件

事件处理函数 都会有 两个部分组成，on + 事件名称
事件对象
通过事件绑定的的执行函数可以得到一个隐藏的参数，

由浏览器自动分配的一个参数，这个参数就是Event 对象
e.clientX/Y : 浏览器可视区域 的 鼠标位置
e.pageX/Y : HTML页面区域 的 鼠标位置
e.offsetX/Y : 当前作用区域 的 鼠标位置
代码语言：javascript
复制
 oDiv.onclick = function(e){

var env = e || event;

console.log(en);

}
事件流（三阶段 W3C）
事件捕获阶段
处于目标阶段
事件冒泡阶段
事件默认行为以及阻止方式
JS 默行为 例如：
a 标签的跳转
Submit 按钮的提交
右键菜单
文本框的输入
…

阻止默认行为的方式
 event.preventDafault();

event.returnValue = false;

return false;

阻止冒泡事件

env.cancelBubble = true

env.stopPropagation()
 
DOM2级事件处理程序
事件委托机制
Cookie
HTTP ：超文本传输协议，用于从web服务器传输超文本到本地浏览器的传输协议，它是一个 无状态的协议。
 Cookie : 是指 缓存在本地客户端的数据
 Cookie的基本操作
document.cookie : 查询/设置 cookie， 赋值 即是 设置 cookie
代码语言：javascript
复制
      document.cookie = "user = five";// 设置cookie
      console.log(document.cookie); // 查询cookie
      var oDate = new Date();
      oDate.setDate(oDat.getDate()+3); //缓存3天
      document.cookie = "user = five; expiress="+oDate
      document.cookie = "user = five2";
      document.cookie = "user = LHL";
正则表达式 *
使用方式与方法
使用方式：
 1.字面量的方式
 2. 构造函数的方式
 使用方法：
test()
 功能 ： 用来检测字符串 是否含 有符合 规则的子串，有 返回true 没有则 false
 格式 ：reg.test(str);    
match() :【字符串的方法】： str.match(reg); // 返回 结果对象数组
search() : 【字符串的方法】： str.search(reg); //返回 第一个匹配的位置
split() :
replace() :
exec()
 功能 ：正则表达式方法，将匹配的结果放到数组里，没有则返回 null
正则表达式 表
字符
功能
样例
样例结果
.
除了换行符以外的所有单个字符
*
重复多次匹配
代码语言：javascript
复制
 var reg =  /abc/;  // 1.字面量的方式 
 var reg = new RegExp('abc'); //  2.  构造函数的方式
         console.log(reg.test('sab'));
ES6
新特性
let的使用
块级作用域{}
不存在变量提升
不允许重复声明
解构赋值
概念： 按照一定模式，从数组和对象中提取值，对变量进行赋值。
代码语言：javascript
复制
  //  数组 ：
    let [a,b,c] = [1,2,3];
  // 默认赋值
     [a=2,b] = [3]; // 3 undefined
     [a=2,b] = [,3]; // 2 3
     let c;
     [a=3]=[c];
  // 对象 ：
      let  {a,b} = {a:"aaa",b:"bbb"};
      let  {a:b} = {}
模板字符串
代码语言：javascript
复制
    //ES5
    var obj = { 'name': 'five','age': 22};
    console.log(obj.name+"的年龄"+obj.age);
    // ES6 
    let obj = { 'name': 'five','age': 22};
    console.log(`${obj.name}的年龄${obj.age}`);
箭头函数
this 的指向 ：指向定义时所在作用域，而不是执行时的作用域
代码语言：javascript
复制
    //ES5
    var f = funtion (a,b){ return a+b;}
    //ES6
    let f = (a,b) => 1;
    let f = (a,b) => { return a+b;}
   // ============this 指向=================//
    //ES5
     var obj = {
        name : 'Five',
        sayHello : function () {
             console.log(this)://{name: "Five", sayHello: ƒ}
        }
     }
//ES6

var obj = {

name : 'Five',

sayHello : () => {

console.log(this):// window{...}

}

}
var obj = {

name : 'Five',

sayHello : () => {

console.log(this):// window{...}

}

}
Set 结构
概念 ：它类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。

扩展运算符... ： Set转数组
代码语言：javascript
复制
   var set = new Set([1,2,2,3,4,2]);

var arr = [ ... set];
set.add() ： 增加
set.delete() : 删除
set.size() : 集合大小
set.clear()
代码语言：javascript
复制
     var set = new Set([1,2,3,4,2]);//结构
animation
匀速动画
代码语言：javascript
复制
 var speedX = 3;

var div = document.querySetector('div');

function move() {

var currLeft = parseInt(window.getComputedStyle(div).left)

}
继承 
过程
创建一个对象
proto 指向 父类原型 prototype
将this 指向这个对象
执行构造函数
返回这个对象
Ajax 
核心对象 XMLHttpRequest
局部刷新
get
post
get步骤
创建Ajax对象
代码语言：javascript
复制
     var  xhr  = new XMLHttpRequest ();
监听请求
代码语言：javascript
复制
          xhr.onreadystatechange  =  function (){

//   0 ===> xhr 对象已经创建

//   1 ===> xhr 对象已经调用open

//   2 ===> xhr 对象以发 Ajax 请求

//   3 ===> 已返回部分数据

//   4 ===>  数据已经全部返回完毕

if(xhr.readyState !== 4) {return;}

if(xhr.status >= 200 && xhr.status <= 300){

console.log('success!');

console.log(xhr.responseText);

}else {

console.log('请求失败')；

}

}
打开 这个对像
代码语言：javascript
复制
   xhr .opn('get','./test.txt', true)
发送请求
代码语言：javascript
复制
  xhr .send()
post步骤
创建Ajax对象
代码语言：javascript
复制
     var  xhr  = new XMLHttpRequest ();
监听请求
代码语言：javascript
复制
          xhr.onreadystatechange  =  function (){

//   0 ===> xhr 对象已经创建

//   1 ===> xhr 对象已经调用open

//   2 ===> xhr 对象以发 Ajax 请求

//   3 ===> 已返回部分数据

//   4 ===>  数据已经全部返回完毕

if(xhr.readyState !== 4) {return;}

if(xhr.status >= 200 && xhr.status <= 300){

console.log('success!');

console.log(xhr.responseText);

}else {

console.log('请求失败')；

}

}
打开 这个对像
代码语言：javascript
复制
   xhr .opn('get','./test.txt', true)
设定请求头
代码语言：javascript
复制
  xhr .setRequestHeader('Content-Type','application/-x-www-form-urlencoded');
发送请求
代码语言：javascript
复制
  xhr .send('username=Five&&password=123456');
JSON
JQuery *
JS 库
$ <===> jQuery
jquery 入门
AMD(异步模块)
CommonJS(同步模块)
gulp
gulp 用法
创建gulp 人物
第一个参数为任务名
第二个参数为 所依赖的其他任务（外部依赖导入），【没有可省略】
第三个参数（函数体）执行任务代码
代码语言：javascript
复制
   gulp.task('copy',['copy-html','copy-js','copy-css'],function(){  // 管道处理机制

gulp.src('./src/**/*.*')  //获取文件

.pipe(xxx1())        // 执行任务1

.pipe(xxx2())        // 执行任务2

.pipe(gulp.dest('./dist/xxx'))  //存储路径

})
gulp 常用方法
src() : 获取文件。类似输入流
dest() : 存储文件。类似输出流
watch() : 监听
server() : 服务器
gulp 常用插件
插件引入
代码语言：javascript
复制
 var XXX = require('gulp-xxx');
gulp-concat : 连接 JS
gulp-uglify : 压缩JS
gulp-sass : 编译 sass
gulp-minify-css : 最小化 css
gulp-rename : 文件重命名
gulp-connect : 热更新
gulp-plumber : 错误处理 （防打断）
其他
严格模式
严格模式下 浏览器对 JS 要求将会更加苛刻

‘‘use strict’’; 写到哪 那个区域下所有代码遵从 严格模式。（不要轻易全局模式下使用）

例如：
代码语言：javascript
复制
// 非严格模式下 可行 ， 未申明（var）变量 m在赋值时， 会默认当全局变量处理

function f(){

m=100

}

f();

// 严格模式下 可行 ， 未申明（var）变量 m在赋值时， 会报错

function f(){

"use strict";

m=100

}

f();
Math 对象函数
Math.rand() : 四舍五入
Math.random() : 随机函数产生 0~1
Math.max() : 返回最大 ，多个参数 Math.max(20,10,21,22);
Math.min() : 返回最小
Math.abs() : 返回 绝对值
Math.ceil() : 向上取整
Math.floor() : 向下取整
Math.pow() : x 的 y 次方 Math.pow(x,y)
Math.sqrt() : 开平方
Math.sin/cos/tan() : 正弦/余弦/正切 Math.sin(2*Math.PI)
…
 &it => ‘<’

&gt => ‘>’