JavaScript-qf

作者: Moquyun | 来源:发表于2019-03-20 14:07 被阅读0次

JavaScript-qf

*****************************************************
isNaN()带有隐式转换Number()方法，所以结果转为NaN，isNaN()如果是NaN就是true，否则为false

### DOM
* 选择器
    * 元素：id,className,name,tagName,querySelector,querySelectorAll
    * 父选子元素，子选父，第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
        * children:父选子元素(数组)
        * parentNode：子选父(元素)
        * firstElementChild:第一个一个子元素：
        * lastElementChild最后一个子元素;
        * nextElementSibling:下一个兄弟元素
        * previousElementSibling:上一个兄弟元素
* 节点：DOM每一个成分都叫节点，元素节点，文本节点，注释节点
    * 节点选择器：
        * childNodes:父选子
        * firstChild:第一个子
        * lastChild:最后一个子
        * previousSibling:上一个兄弟
        * netxSibling:下一个兄弟
    * 节点的操作
        * nodeType:节点的类型
        * nodeName:节点名字（元素为标签名）
        * nodeValue:节点的值（元素的的值为null）

* #### 属性

* 元素节点的操作属性
    * **内置**
        * 可见(点语法)：className,id,alt,href,type,value,name
            * attribute系列
        * 不可见
            inerHTML,innetText,TagName....
    * 自定义属性
        * 可见
            * Attribute系列(getAttribute,setAttribuute,removeAttribute)
        * 不可见
            * 将元素作为对象操作，操作对象的方法 oDiv.dateid = "1002"

* 属性节点的操作
    * 节点：attributes
        * 每个节点的类型是对象
        * nodeType,nodeName,nodeValue

* DOM元素的操作
    * 创建，插入





        









*****************************************************
* setInterval(参数1，参数2);
    * 参数1：回调函数
    * 参数2：毫秒数
    * 功能：每隔参数2的时间，执行一个参数1的函数
* 延时器
    * setTimeout(参数1，参数2);
    * 参数1：回调函数
    * 参数2：毫秒数
    * 功能：延迟参数2的时间，只执行一次参数1的函数
* 关闭定时器
    * clearInterval(参数)
* 关闭延时器
      * clearTimeout(参数)

---------------------------------------
* var d = new Date();

  * 获取日期
    * d.getFullYear()
  * 月份
    * d.getMonth()
  * 天
    * d.getDate()
  * 周
    * d.getDay()
  * 时
    * d.gethours()
  * 分
    * d.getMinutes()
  * 秒
    * d.getSeconds()
  * 毫秒
    * d.getMilliseconds()
  * 时间戳
    * d.getTime()
-------------------------------------------------------
* #### 数学对象(Math)
  * Math.round() //四舍五入
  * Math.random() //随机数

  * Math.abs(-4) //4 绝对值
  * Math.sqrt(9) //3 开方
  * Math.pow(5,3) //125 次方
  * Math.floor(5.999) //6  向下去整
  * Math.ceil(5.0001) //6 向上去整
  * Math.max(2,3,4,5,6,24,55) //55 只能检测多个单数据，最大值
  * Math.min(2,3,4,5,6,24,55) //3 最小值
  * Math.sin(弧度)  //正弦
    * Math.sin(Math.PI/180*90)
  * Math.cos(弧度)  //余弦
  * Math.PI()      //π圆周率
  * 如何角度转弧度
    * Math.PI/180*deg
  * sin方法如何使用：接收一个弧度

*****************************************************
循环中的关键字：break;(停止当前循环)，continue;(跳过本次循环,直接执行下一次)
*****************************************************
 1.indexOf(data,start);   //用于返回某个数组或者字符串中规定字符或者字符串的位置；

        var str = "abcdefg”;

        str.indexOf("a");    //0 返回当前查询字符所在的位置的下标，如无，返回-1，start表示从第几位开始查询。

2.charAt(index);         //返回指定位置的字符,index为下标

3.substr(n,m);           

4.substring(n,m);        //返回从指定位置n，到结束位置（不含）m 的字符串，如果不指定结束位置，则从开始位置到结尾

5.slice(n,m);            //同substring，需要注意和数组中方法slice()的相似

6.split("-");            //通过指定字符分割字符串，返回一个数组

7.replace("需要替换的字符串","替换之后的字符串")    //将字符串中的一些字符替换为另外一些字符。最好配合正则使用


************扩展************
function fn(){}
console.log(fn);//结果function
// 函数内部操作变量a时，会先找自己内部作用域是否存在这个变量a，有就操作，并且不会影响外面的同名变量a
// 函数内部操作变量a时，会先找自己内部作用域是否存在这个变量a，没有就去找外部作用域，在外部作用域能找到就操作，此时会影响外面的变量a
// 函数内部操作变量a时，会先找自己内部作用域是否存在这个变量a，没有就去找外部作用域，在外部作用域也没找到就报错


****************事件*************
onclick     单击
ondblclick  双击
onmousedown 鼠标按下
onmouseup   鼠标松开
onmouseover/onmouseenter  鼠标进入
onmouseout/onmouseleave   鼠标离开
onmousemove 鼠标移动
oncontextmenu

onkeydown 键盘按下
onkeypress 事件会在键盘按键被按下并释放一个键时发生
onkeyup 键盘松开

onload 事件会在页面或图像加载完成后立即发生。
onfocus 获取焦点事件
onblur  离开焦点事件
onchange  //事件会在域的内容改变时发生
oninput  //<input type="text" oninput="myFunction()">oninput 事件在用户输入时触发。

局部作用域内不声明可以改变全局的变量；

**后面**的case不在判断,直接执行自己的语句
//往下执行，上面不执行

Day01

document.querySelector("mark").style.background="blue";

标签

<script>

</script>
<script src=""></script>

数据类型
- 数值型(number):0123456789
- 字符型(string):只要放在""或''中，就是字符
- 布尔型(boolean):true/false
- undefined(undefined):undefined;
- 对象型(object):{}
- 数组型(array):[]
变量
- 创建变量(var)
  - var = 20;
- 检测变量的类型typeof
  - var = 2; alert(typeof a);
  - var = "2"; alert(typeof a);
  - var = false; alert(typeof a);
- 变量命名
  1. 前缀就能表示出这个变量的类型
  2. 开头必须为字母或者$或者_
  3. 关键字和保留字不能用做变量名。
- 赋值
  - 变量通过"="赋值
打印信息
1. 弹出框打印信息 暂停执行程序
  - alert(1); //BOM
2. 将信息打印到页面 会影响布局
  - document.write("222"); //DOM
3. 将信息打印到浏览器控制台; **
  - console.log(); //BOM
运算符:+ - * / %
- 在算术运算符中
隐式类型转换
- 加号两边只要出现一个字符，那么另外一个也会转换成字符，结果也是字符
- -*/% 会转成数值
关系运算符： > < >= <= != == ===
- 只要有一边出现数值，就是数值的比较
- 字符的比较规则，逐位比较，得到结果，停下
- ===不存在隐式类型转换（不仅比较值，还比较类型）
逻辑运算符：或or ||，且and &&，非not !

console.log(true || false); //t
console.log(false || true); //t
console.log(true || true); //t
console.log(false || false); //f

console.log(true && false); //f
console.log(false && true); //f
console.log(true && true); //t
console.log(false && false); //f

console.log(!false); //t
console.log(!true); //f

//1.被4整除，同时不能被100整除 2.被400整除
//结合关系运算符
var year = 2019;
console.log(year%4 == 0 && year%100 !=0 || year%400 ==0);

赋值运算符：= += -= *= /= %=
- 自增++
- 自减 --
- 前自增 ++a：先运算，后使用
- 后自增 a++：先使用，后运算

Day02

类型转换

显示类型转换(强制)：
字符和数值的转换
- 字符转数值
  - parseInt(取整)
    - NaN:不是一个数字的数值型数据，代表非法运算或转换结果
  - parseFloat();//转小数
  - Math.round();//四舍五入取整,严格转换
  - Number();//严格转换
- 数值转字符
  - toString 可以转换string
  - toFixed 四舍五入保留n位数值 转换string报错
- js中特殊的值
  - NaN：不等于自己（类型是number）
  - undefined(类型是undefined)
  - null(类型是object)
  - undefined两=等于null：被隐式转换

console.log(Nan == undefined) //false
console.log(Nan == null) //false
console.log(undifined == null) //true
console.log(undifined === null) //false

小数:浮点数，精度问题

console.log(0.1 + 0.6)
console.log(parseFloat((0.1 + 0.7).toFixed(1)))
console.log(0.2 + 0.6)

js程序结构

顺序结构
分支(选择)结构
循环结构
选择结构

if 语句名
() 条件
{} 执行语句1
else 语句名
{} 执行语句2

if(){

}else if(){

}else{

}

隐式类型转换
- if(布尔,计算结果也得是布尔其他转布尔)
  1. 数值：非0为true,0为false
  2. 非空字符为true,空字符为false
  3. undefined,NaN,null为false
  4. 对象为真
  5. 数组为真，空数组也为真
  6. 函数为true

//1. if(0) false
if(1){

}else{

}

//2.  if("")  fasle
if("1"){

}else{

}

if语句中布尔隐式转换

//true为1，false为0
console.log(1 + true); //2
console.log(1 + false);//1

console.log(1 + undefined);//Nan
console.log(1 + NaN);//Nan
console.log(1 + null);//1
console.log(1 + {});//1{}为拼接
console.log(1 + []);//1和数组的值拼接

多分支swich

switch(){
    case :
        break;
    case :
        break;
    default;
}

case的穿透特性:当上一个case判断成功之后，后面的case不在判断,直接执行自己的语句
阻止case的穿透:break
default
switch只能用来判断具体的值，不能用来判断范围

//switch穿透应用

扩展
- 缩写

//单分支
var a = 5;
//原
if(a > 0){
    console.log(1);
}
//简
if(a > 0) console.log(1);

//双分支
var n=0;
//原
if(n < 10){
    n = "0" +n
}else{
    n = n;
}
//简：
n = n<10 ? "0"+n : n;

变量简写
var a =10;
var b =10;
//简
var a=b=10;

//简，连续声明
//1
var a=10,b=20,c=30;
//2
var a,
b,
c;

//简-多次d打印
console.log(a,b,c);

||逻辑运算符,简单判断

// ||：只要先出现true就是true,只要出现0就是0,否则算后面
console.log(true || false);     //t
console.log(true || 0);     //t
console.log(1 || 0);     //1
console.log(true || 1);     //t

console.log(true || true);     //t
console.log(true || 3);     //t
console.log(1 || 3);     //1

console.log(false || true);     //t
console.log(false || 1);     //1
console.log(0 || 1);     //1

console.log(false || false);     //f
console.log(false || 0);     //0

var a = 0;
var b = false;
var c = a || b;
console.log(c)

&&逻辑运算符,简单判断

// &&：只要出现false就是false,只要出现0就是0,否则算后面
console.log(true && false);     //f
console.log(true && 0);     //0
console.log(1 && 0);     //0
console.log(true && 1);     //1

console.log(true && true);     //t
console.log(true && 3);     //3
console.log(1 && 3);     //3

console.log(false && true);     //f
console.log(false && 1);     //f
console.log(0 && 1);     //0

console.log(false && false);     //f
console.log(false && 0);     //f

var a = 0;
var b = false;
var c = a && b;
console.log(c)

day03

扩展

id选择器document.getElementById("txt")
- id选择器的值document.getElementById("txt").value
onclick

var btn = document.getSelementById("btn");

btn.onclick = function(){
    console.log("btn被点击了")
}

循环

循环的三要素
- 停止条件
- 声明计数器
- 改变计数器
循环的语句

//while(){}

//while   语句名
//()      停止条件
//{}      循环体(执行语句)

var i =0;
while(i<10){
    document.write(i + "<br/>");
    i++;
}

//do(){}while{}
    do    语句名   
    {}    循环执行语句1
    while 语句名
    ()    停止条件
    {}    循环执行语句2

//do-while和while区别：do-while永远都比while多执行一次
//do-while真正的执行语句，在do后

for循环

//for(){}
// for 语句名
// ()  条件组
// {} 循环的执行语句
//条件组，1 2 4 3 2 4 3

当知道要循环的次数时，用for循环；
不知道循环的次数时，使用while循环，配合break;

循环嵌套

多行多列时，外层循环控制行，内层循环控制列

day04

函数：

特点
- 选择使用
- 重复使用
- 忽略细节

封装，抽象

函数的创建
- 声明式
- 赋值式

//创建函数
function 声明关键字
fn   函数名
()   形参
{}   代码端

函数分类
- 有名函数 function fn(){}
  - 正常函数
- 无名函数 function(){}
  - 不能直接存在于代码中
  - 1可以作为赋值式创建函数的值存在
  - 2作为匿名函数的函数体存在
  - 3作为事件处理函数(程序)
  - 4作为参数使用
- 匿名函数 (function(){})()
  - 匿名函数特点，自动执行
函数的参数

function fn(){//找个变量存参数，这个叫形参

}

fn(a) //执行时发送参数 实参

当一个函数A作为参数，传到另一个函数B中，那么作为参数的这个函数A，叫回调函数

arguments

arguments.length;传入参数长度

js事件

<div id="box">
  div.box
</div>
<input id="inputid" type="text"  oninput="oninputs()"/>

var box = document.getElementById("box");
var txt = document.getElementById("txt");

box.onclick = function(){
  box.innerHTML="鼠标点击"
}
box.ondblclick = function(){
  box.innerHTML="鼠标双击"
}
box.onmousedown = function(){
  box.innerHTML="鼠标按下"
}
box.onmouseup = function(){
  box.innerHTML="鼠标松下"
}
box.onmouseover = function(){
  box.innerHTML="鼠标进入"
}
box.onmouseout = function(){
  box.innerHTML="鼠标离开"
}
box.onmousemove = function(){
  box.innerHTML="鼠标移动"
}
box.oncontextmenu = function(){
  box.innerHTML="鼠标右键"
}


/**键盘***/
inputid.onkeydown = function(){
  box.innerHTML="键盘按下"
  console.log(1);
}

inputid.onkeypress = function(){
  box.innerHTML="事件会在键盘按键被按下并释放一个键时发生";
  console.log(2);
}

inputid.onkeyup = function(){
  box.innerHTML="键盘松开";
  console.log(3);
}

input事件
事件会在页面或图像加载完成后立即发生。
function onloads(){
  alert('222');
}

inputid.onfocus = function(){
   box.innerHTML="获取焦点事件";
}
inputid.onblur = function(){
   box.innerHTML="离开焦点事件";
}
inputid.onchange = function(){
   box.innerHTML="事件会在域的内容改变时发生";
}

//<input type="text" oninput="oninputs()">oninput事件在用户输入时触发。
function oninputs(){
  box.innerHTML="事件在用户输入时触发。";
}

day05

return

让函数有返回值的关键字return:
- 让函数有返回值
- 立即结束当前函数

其实每个函数都有返回值，只不过，没有return的函数，返回的是undefined，有return的，返回的是，return后的值

使用场景
- 当函数需要有返回值的是时候，在加return
- 处理数据的函数，处理好的数据，需要再次使用或再次调用，得有返回值
- 实现功能的函数，不需要有返回值

var和function 提升，var优先function

fn(2)[4](5)[6](7); //15

fn(){

}

作用域:变量作用的区域，生效的区域

有函数就有作用域

作用域的分类
- 全局：不在任何函数内，就是全局作用域
- 局部：任何一个函数都是一个局部作用域
读取规则
- 局部可以使用全局，全局不能使用局部
变量的生命周期：
- 局部：朝生暮死，作用域开始的位置被声明，作用域结束被删除
- 全局：一直存在不删除
提升
- 所有使用var声明的变量，都存在提升，将声明提升到作用域一开始的位置，在原本应该赋值的位置在赋值
对象：代表了，任何意见可被描述的事物
- 创建
  - 字面量创建//var str="";var num = 123;
  - 构造函数 var num = new Number(1);
- 对象的组成
- 键值对
  - 键（key）
  - 值（value）
- 对象的意思
- 编程；存储数据

day06

数组Array
- 数组：一组数据，数据的组合
- 创建：
  - 字面量：var arr= [];
  - 构造函数：var arr2 = new Array();
索引-增删改查

//索引-增删改查
增：
arr[arr.length] = "abc";
删：
arr.length = 5;//减小长度从后删除数组
改：
arr[2] = "abc";
查：
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

数组的操作(数组的方法)

var arr =[1,2,3,4,5,6];
增：
arr.push(7); //在最后增加一个数组
arr.unshift("aaa"); 在最前面增加一个数组

删：
arr.pop();                //删除最后面一个数组
arr.shift();             //删除最前面第一位数组

arr.splice(m,n);        //从第m个数组索引**开始**，删除n个数组
arr.splice(a,b,value);  //从第a个数组索引开始，删除b个数组，在当前位置添加value数组(.splic(n,0,"",2,"")可实现替换数组,从splic第三个参数开始，可添加无穷大**个**函数)

截取slice
a = arr.slice(n,m);//从n索引开始到m-1索引结束，slice的截取结果在返回值上

排序sort:
var b =[3,7,9,2,1];
b.sort();//数值排序，从小到大排序，字符串比对方式，逐位比较，两位数以上，比较第一位大小
//sort的参数，是一个回调函数，回调函数接收两个参数，两个参数的差，返回
var arr4 = [100,87,65,34];
arr4.sort(function(a,b){
  //return a-b;//从小到大排序
  return b-a;//从大到小排序
})

//返回值
.push('a'); //返回值增加后的数组长度，length
.unshift("a"); //返回值增加后的数组长度，length

.pop(); //删除的最后一个数组值value
.shift()//删除的第一个数组值value

.splice(0,3,"a"....); //删除替换返回值：删除的数组值
.slice(0,3) //截取返回值:截取之后的新数组

.sort()//排序返回值：排序之后的数组

concat() 连接两个或跟多的数组，返回结果
join() 数组转字符串，指定分割符分割
js的两种类型
- 值传递类型：除了对象，大部分都是
- 引用传递类型：对象，数组

栈和堆

基本类型（值传递）：字符，数值，布尔
- 复制过程中，复制的是值
复杂类型（引用传递）：对象，数组，函数
- 复制过程中，复制的是地址（指针，引用）
  地址（指针，引用）指向一个值
对象的浅拷贝：只拷贝引用，不拷贝值，修改新数据，影响老数据
对象的深拷贝：

枚举

var obj = {}
for(var i in obj){
  obj[i]
}

day07

ES5

严格模式

开启
作用域第一行 "use strict"

全局变量声明时，必须加关键字(var)

 正常模式：a = 10;    console.log(a)    //10
 严格模式：a = 10;    console.log(a)    //a is not defined

this无法指向全局对象(window)

正常模式：function fn(){ console.log(this) }        //window
严格模式：function fn(){ console.log(this) }        //undefined

函数内不允许出现重名参数

 正常模式：function fn( a,b,b ){ console.log(a,b) }
         fn(1,2,3)        //1,3
 严格模式：function fn( a,b,b ){ }
  //报错：Duplicate parameter name not allowed in this context    在此上下文中不允许出现重复的参数名

4.arguments对象

  4.1 arguments对象不允许被动态改变
    正常模式：function fn(a){
                a=20;
                console.log(a);                //20
                console.log(arguments[0]);     //20
            }
            fn(10);

    严格模式：function fn(a){
                a=20;
                console.log(a);                //20
                console.log(arguments[0]);     //10
            }
            fn(10);
4.2 arguments对象不允许被自调用（递归）
    正常模式：function fn(a){
                if( a == 1 ){
                    return 1;
                }
                return arguments.callee(a-1) + a;
            }
            fn(3);            //6
    严格模式：function fn(a){
                if( a == 1 ){
                    return 1;
                }
                return arguments.callee(a-1) + a;
            }
            //报错：'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
            //报错："caller"，"arguments"，"callee"，不能在严格模式下使用

aaaaaa

新增的数组常见方法：以下说明中，红色为必选参数，蓝色为可选参数

1.indexOf(data,start);
    用于返回某个数组或者字符串中规定字符或者字符串的位置；
    var arr = ["a","b","c","d","e"];
    arr.indexOf("a");        //0
    //返回当前查询字符所在的位置的下标，如果查询不到，返回-1，start表示从第几位开始查询。

2.forEach(callback); 循环，遍历数组
    var arr = [2,3,4,5,6,7,8];
    arr.forEach(function(value,index,arr){
        console.log(value,index,arr);
        //函数中的三个参数分别代表，该项的值，该项下标，数组本身
    })

3.map(callback); 会遍历当前数组，然后调用参数中的方法，返回当前方法的返回值；
    3.1 执行次数和参数，参考forEach
        var arr = [2,3,4,5,6];
        arr.map(function(value,index,arr){
            console.log(value,index,arr);
        })
    3.2 返回值 及 应用
        map不会改变原有数组，而是将函数执行一次之后的返回值组成一个新数组，返回出来
        var arr = [2,3,4,5,6];
        var newArr = arr.map(function(value,index,arr){
            return value-1;
        })
        console.log( newArr );  //得到一个经过计算的数组

4.filter(callback); 同map方法，返回值为布尔值true 的时候，才会返回该数据
    4.1 同map的3.1
    4.2 filter不会改变原有数组，而是将函数执行一遍，只有在布尔值为true的时候才会返回该数据
        var arr = [2,3,4,5,6];
        var newArr = arr.filter(function(value,index,arr){
            return value > 3;
        })
        console.log( newArr );  //得到一个经过筛选的数组

ES5

var arr=[2,3,4,5,6]
indexOf查询参数的索引，没有返回-1
arr.indexOf(5); //3
//第二个参数设置起始的位置
arr.indexOf(4,2); //3

forEach()数组的遍历方法，只能用于数组
arr.forEach(function(value,index,self){
    //value 数值
    //index 索引
    //原数组
})

map(f())  1.和forEach一样遍历；2.有返回值，使用value修改数组
var a = arr.map(function(value,index,self){
    console.log(value,index,self);
    return xxx;//可以操作数组的value,index
})
console.log(a);//xxx,....

filter(f())1.和forEach一样遍历；2.有返回值-返回turn false过滤
arr.filter(function(value,index,self){
  console.log(value,index,self);
  //return 为false不保留    为ture保留返回--用来过滤，筛选 value>4;
})

字符的操作（非ES5）

字符有索引，有length,可以被遍历
4.字符串常见API（indexOf／charAt／substring／slice／split／replace）;

1.indexOf(data,start);   //用于返回某个数组或者字符串中规定字符或者字符串的位置；
    var str = "abcdefg”;
    str.indexOf("a");    //0 返回当前查询字符所在的位置的下标，如无，返回-1，start表示从第几位开始查询。

2.charAt(index);         //返回指定位置的字符,index为下标

3.substr(n,m);           

4.substring(n,m);        //返回从指定位置n，到结束位置（不含）m 的字符串，如果不指定结束位置，则从开始位置到结尾

5.slice(n,m);            //同substring，需要注意和数组中方法slice()的相似

6.split("-");            //通过指定字符分割字符串，返回一个数组

7.replace("需要替换的字符串","替换之后的字符串")    //将字符串中的一些字符替换为另外一些字符。最好配合正则使用

(w3s)[http://www.w3school.com.cn/jsref/jsref_obj_string.asp]

扩展：arr ="中国"; str.charCodeAt(0)；
str.fromCharCode(22266);u编码转汉字

day08

扩展
document.write()

文档渲染中，document.write()打印到页面的最后

文档渲染结束，document.write()会重写整个页面

DOMz操作属性
- innerHTML
  - 表示某标签的内容

数学对象(Math)
- Math.round() //四舍五入
- Math.random() //随机数
- Math.abs(-4) //4 绝对值
- Math.sqrt(9) //3 开方
- Math.pow(5,3) //125 次方
- Math.floor(5.999) //6 向下去整
- Math.ceil(5.0001) //6 向上去整
- Math.max(2,3,4,5,6,24,55) //55 只能检测多个单数据，最大值
- Math.min(2,3,4,5,6,24,55) //3 最小值
- Math.sin(弧度) //正弦
  - Math.sin(Math.PI/180*90)
- Math.cos(弧度) //余弦
- Math.PI() //π圆周率
- 如何角度转弧度
  - Math.PI/180*deg
- sin方法如何使用：接收一个弧度
进制
- 二进制：0 1
- 八进制：01234567
- 十二进制:0123456789
- 十六进制：0123456789abcdef

//十进制转其他
var mun = 254;
num.tostring(2) //转二进制
num.tostring(8) //转八进制
num.tostring(16) //转十六进制

//其他转十进制
var str ="110";
parseInt(str,2) //
parseInt(str,8) //
parseInt(str,16) //

其他转其他:先转为十进制
n.parseInt(str,2/8/16).tostring(2/8/16);

只有十进制十数值，其他进制：字符;

Date日期
- var d = new Date();
- 获取日期
  - d.getFullYear()
- 月份
  - d.getMonth()
- 天
  - d.getDate()
- 周
  - d.getDay()
- 时
  - d.gethours()
- 分
  - d.getMinutes()
- 秒
  - d.getSeconds()
- 毫秒
  - d.getMilliseconds()
- 时间戳
  - d.getTime()
Date日期设置

简单模式(传参)
new传参，如果只设置部分，没有设置的部分清零；

数值： new Date(年,月,日,时,分,秒) //new Date(2019,1,2,3,4)

多个参数，可以超过最大值，超过时进一位

字符 new("2020.12.8 8:8:8");

一个参数，不可以超过最大值，并且月份不能从0开始

复杂设置(安全)

//***参数数值***
var d = new Date();
console.log(d);

d.setTime(1000000000)

d.setFullYear(2020);
d.setMonth(8);
d.setDate(20);
d.setHours(20);
d.setMinutes(20);
d.setSeconds(20);
d.setMilliseconds(666);

console.log(d);

计时器
- setInterval(参数1，参数2);
- 参数1：回调函数
- 参数2：毫秒数
- 功能：每隔参数2的时间，执行一个参数1的函数
- demo
```
var t = setInterval(function(){
    console.log("hello")
},1000)
```
延时器
- setTimeout(参数1，参数2);
- 参数1：回调函数
- 参数2：毫秒数
- 功能：延迟参数2的时间，只执行一次参数1的函数
- demo
```
var t2 = setTimeout(function(){
    console.log("world")
},5000)
```

关闭定时器

关闭计时器

clearInterval(参数)

document.onclick = function(){
    clearInterval(t);
}

关闭延时器

clearTimeout(参数)

document.onclick = function(){
    clearTimeout(t2)
}

参数都是要关闭的定时器的返回值

==========================================================

day09

删除对象的属性 delete
关键字delete,用来删除对象的属性
delete obj.name;

this：指向，指针，指向当前函数的执行对象

什么是window对象，window对象是浏览器内置的一个对象，相当于BOM的一个抽象

window对象的常见方法：
- alert(要显示的文本); //弹出信息框
- prompt(提示信息); //弹出输入框，点击确定，返回字符串，点击取消，返回null
- confirm(对话框提示文字); //点击确定返回true，点击取消返回false
close(); //关闭浏览器（火狐不支持！），但都支持通过别的网页打开的新的网页关闭 //不允许关闭非脚本打开的页面

open(url,name,feature,replace);

url，可选，要在新窗口中显示的文档的URL
name，可选，声明了新窗口的名称
feature，replace自行扩展
谷歌会默认把系统自动打开的新网页阻止掉，但不阻止通过事件打开的网页

onload 事件
当文档加载完成后执行一些操作

window.onload = function(){
console.log("页面加载完成")
}

onscroll当页面发生滚动时执行一些操作

 window.onload = function(){
     console.log(1)            //当页面发生滚动时，打印1
 }

 onresize当窗口大小发生改变时执行一些操作

 window.onresize = function(){
     console.log(1)            //当窗口大小发生改变时，打印1
     var w = document.documentElement.srcollWidth;//可视区域宽度
     var h = document.documentElement.clientlHeight;//可视区域高度
 }
 页面滚动条距离顶部的距离
 document.documentElement.scrollTop

 页面滚动条距离左边的距离
 document.documentElement.scrollLeft

window对象下内置的子对象：
1. history对象：该对象包含浏览器访问过的url。
  - 该对象的属性：
  - history.length; //返回历史记录的数量
  - 该对象的方法：
  - history.back(); //后退，加载前一个url。
  - history.forward(); //前进，需要后退一下之后，才有前进的方向
  - history.go(num); //参数为正，前进相应的数目，为负，后退相应的数目，为0，刷新
2. location对象：包含当前url的相关信息，而history对象不能具体反映url的相关信息。
  - 该对象的属性：
  - location.href; //设置或返回完整的url
  - location.search; //返回url?后面的查询部分
  - location.hash; //是一个可读写的字符串，是url的锚部分（从#开始的部分）哈希
  - 该对象的方法：
  - location.reload(); //刷新页面的方法，一般情况下，传递一个true，不使用缓存刷新。缓存？
3. navigator对象：
  - navigator.appName; //返回当前浏览器的名称
  - navigator.appVersion;//返回当前浏览器的版本号
  - navigator.platform; //返回当前计算机的操作系统
  - 以上方法已经在逐渐被抛弃，出现一个新的属性替代这些属性：
  - navigator.userAgent; //返回浏览器信息

定时器：setInterval(函数或代码块,指定的时间(毫秒));
表示每隔指定的时间，执行一次函数
延时器：setTimeout(函数或代码块,指定的时间(毫秒))
表示在指定的毫秒数之后，只执行一次函数
功能：一定时间后调用
参数：两个参数，一个函数，一个毫秒
返回值：数字，当前定时器的唯一编号，用于关闭定时器

window.onscroll／onresize 事件

Day10

DOM中的选择器
- DOM:文档对象模型document
- DOM根元素document
- DOM中的每一个组成部分都叫：节点
- 节点：元素节点，文本节点，注释节点
1. 元素节点选择器
  - getElementById(id) //获取指定元素的ID元素
2. 标签选择器，返回值都是数组，使用必须索引解析或遍历
  - getElementsByTagName() //获取相同元素的节点列表，通过标签名选择元素，返回值是一个数组
3. name选择器
  - getElementsByName() //通过name值获取元素，返回值是数组，通常用来获取有name的input的值
4. class选择器，返回值都是数组，使用必须索引解析或遍历
  - getElementsByClassName() //通过class名获取元素，返回值是数组
注意：1.不是所有标签都有name值；2.在低版本的浏览器中，getElementsByName和getElementsByClassName有兼容性

JS缺德定律：好用的东西都有兼容性

ES5选择器：
document.querySelectorAll(); //强大到超乎想象，支持IE8+。ECMAScript借鉴了jQuery选择器的
//返回一个数组，哪怕只有一个元素
document.querySelector(); //#box .box input inpute[type=texxt]
//返回单个元素

兼容到IE 8 +

根据父级，选择子级：
    oDiv.children;        //返回一个数组

根据子级，选择父级：
    oSpan.parentNode;     //返回一个元素

// 父选子元素：
var achild = olist.children;
console.log(achild);

// 子选父元素：
var oparent = achild[2].parentNode;
console.log(oparent)
console.log(oparent == olist)

// 第一个子元素和最后一个子元素
console.log(olist.firstElementChild)
console.log(olist.lastElementChild)

// 兄弟元素选择器：
console.log(olist.previousElementSibling)
console.log(olist.nextElementSibling)

// 选择表兄弟元素：
var otwo = document.querySelector(".two");
// var bor = otwo.parentNode.nextElementSibling.nextElementSibling.firstElementChild.nextElementSibling

var bor = otwo.parentNode.nextElementSibling.nextElementSibling.children[1];

console.log(bor)

对象.childNodes //获取当前元素节点的所有子节点

对象.ownerDocument //获取该节点的文档根节点，相当与 document

对象.firstChild //获得第一个子节点。（IE7/8非空白节点，可能是注释节点）

对象.firstElementChild //获得第一个非空白的子节点。（IE7/8不支持）

对象.lastChild //获得最后一个子节点（IE7最后一个元素节点，IE8最后一个非空白节点，可能是注释节点）

对象.lastElementChild //获得最后一个非空白的子节点。（IE7/8不支持）

对象.nextSibling //获得下一个兄弟节点。（包含空白节点和注释，IE7/8包括注释节点，不包括空白节点）

对象.nextElementSibling //获得下个兄弟节点。（IE7/8不支持）

对象.previousSibling //获得上一个兄弟节点。（包含空白节点和注释。IE7/8包括注释节点，不包括空白节点）

对象.prveiousElementSibling //获得上一个兄弟节点。（IE7/8不支持）

节点的属性

  arr.nodeType;
  元素节点的节点名就是属性名（大写）
  文本就是#text
  注释节点就是comment
  arr.nodeValue;
  
内置：
  可见：
  看不见：innerHTML,innerText,TagName

改变元素的内容(innerHTML)，属性(value)，样式(width,height,background)
- 也就是对DOM进行增删改查
- DOM的属性操作，增删改查
- 什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等
- 元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。
- 内置属性可以直接通过点"."进行操作
- tagName //返回值是当前元素的标签名
- innerHTML／innerText //返回值是当前元素的内容
- id //返回值是当前元素的ID
- title //获取title的标签值，这个title是从document中获取的
- className //返回值是当前元素的class
- href //返回值是当前的href的值
- 以上这些属性既可以获取，也可以设置
- 非内置属性需要通过一些节点的方法进行操作，注意：节点的方法，前缀一定是节点
- getAttribute() //获取元素的属性
- setAttribute() //设置／修改元素的属性，低版本的IE不兼容;接收两个参数，属性名和属性值
- removeAttribute() //删除元素的属性，低版本的IE不兼容

============

Day11

事件驱动
- js控制页面的行为是由事件驱动的。
- 事件源(引发事件的元素)--事件处理程序(对事件处理的程序或函数)--事件对象
- 总结：事件就是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。
event

检测相对于浏览器的位置：clientX和clientY
    当鼠标事件发生时，鼠标相对于浏览器左上角的位置

检测相对于文档的位置：pageX和pageY
    当鼠标事件发生时，鼠标相对于文档左上角的位置。（IE7/8无）（类似于event.clientX和event.clientY）

检测相对于屏幕的位置：screenX和screenY
    当鼠标事件发生时，鼠标相对于屏幕左上角的位置

检测相对于事件源的位置：offsetX和offsetY
    当鼠标事件发生时，鼠标相对于事件发生元素左上角的位置

eve.stopPropagation();
eve.cancelBubble = true; //兼容IE

obox.scrollTop = obox.scrollHeight

元素对象.scrollIntoView() 将元素滚动到可见位置
obox.scrollIntoView()
js的缺德模式，兼容问题

console.log(e.offsetX,e.offsetY)  //鼠标事件发生时，相对于事件源的坐标
console.log(e.clientX,e.clientY)  //鼠标事件发生时，相对于可视区域的坐标
console.log(e.pageX,e.pageY)  //鼠标事件发生时，相对于文档的坐标
console.log(e.target)          //事件源
console.log(e.type)          //事件类型
console.log(e.button)          //事件类型
console.log(e.screenX,e.screenY)  //鼠标事件发生时，相对于显示器的坐标

键盘事件

var code = e.keyCode || e.which;
        // console.log(code)
        // if(e.keyCode == 65){
        //     console.log("按下了a")
        // }
        // console.log(e.ctrlKey)
        // console.log(e.shiftKey)
        console.log(e.altKey)

day12

事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；
DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
元素.onclick = function(){}
DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；
非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。
oDiv.addEventListener('click',fn,false);
oDiv.removeEventListener('click',fn ,false);

句柄:函数名
删除事件监听式绑定的事件，必须通过，绑定的事件处理函数的名字来删除

事件冒泡：当触发子元素的某个事件时，会依次向上触发所有父元素的相同事件

//兼容阻止事件冒泡
//funct
if(stopPropagation){
    e.stopPropagation
}else{
    e.cancelBubble = ture;//IE
}

day13

什么是事件委托
- 将多个相同子元素的相同事件委托给页面上现存的共同的父元素，利用了事件冒泡的原理，配合事件源找到真正点击的元素，做事件处理

day14

函数的方法:bind()
- function fn(){}
- fn.bind()
bind方法的作用：
语法：
- 函数.bind(参数)
  - 参数用来改变原函数的this的指向，返回新函数，新函数中的this指向这个参数
- 函数.bind(参数1，参数2。。。。。。)
  - 参数1用来改变原函数的this的指向，返回新函数，新函数中的this指向这个参数1
  - 往后所有的参数，用来向改变之后的新函数中传参
执行结果：
- 函数.bind(参数);执行之后，得到的返回值，是新函数
- 这个新函数，是被改变之后的老函数

bind第一个参数改变原函数的this的指向，往后所有的参数占用新函数传参

var obj = {}
function fn(a,b,c){
  console.log(this,a,b,c);
}

var newFn = fu.bind(obj,1,2);
newFn(3);//3传给c

call()
apply()

day15

对象序列化
- JSON.parse(str);(字符转对象)

    var obj = {name:"admin",age:18};
    var str = JSON.parse(obj);
    console.log(typeof str);
    console.log(str);

JSON.stringify(obj);(对象转字符)

var obj = {
    name:"admin",
    age:18,
    fn:function(){

    },
    nan:NaN,
    n:null

};
var str = JSON.stringify(boj);
console.log(typeof str);
console.log(str);

ES6

let声明变量

不存在提示

    console.log(a);
    let a = 10;
    console.log(a);

不允许重复声明

    let a = 10;
    let a = 20;
    console.log(a)

块级作用域：花括号内就是一个作用域

    if(true){
        let a = 10;
    }
    console.log(a);

暂时性死区

    if(true){
        console.log(a);
        var a = 10;//let
        console.log(a);
    }

    var ali = document.querySelectorAll("li");
    for(var i=0;i<ali.length;i++){
        ali[i].onclick = function(){
            console.log(i)
        }
    }

le和const的特点一样
- const声明的是常量，不允许修改的是内存中的指针
  - 值传递：指针就是指
  - 对象传递不允许修改指针
ES6新增字符串的操作
- str.codePointAt()
- str.formCodePoint()
- str.repeat(n)重复次数
- str.includes("a")//是否存在,返回boolean
- str.startsWith()//首位是否存在,返回boolean
- str.endsWidth()//最后是否存在,返回boolean

ES6字符串的拼接方式``(变量${})

var a = "haha",
b = "ffff";
var str = `只是拼接${a}拼接"${b}"`;
console.log(str);
//${}支持变量：函数。。。。

Day17

面向对象

创建对象

当一个函数被new执行时，如果这个函数内没有return，那么new会自动返回一个函数同名对象
当一个函数被new执行时，这个函数中的this就不指向window了，指向将来被new出来的对象(通过this预使用将来new出来的对象)
这种通过大驼峰式命名的函数，将来只能通过new执行，这种函数叫自定义的构造函数
通过构造函数创建出来的对象，又叫实例
每个实例都继承了构造函数身上的方法和属性，和？
面向对象的三大特点：封装，继承，多态

原型的概念

原型对象：函数身上的prototype，这是一个对象类型的属性
在prototype内有一个属性叫constructor，指向prototype所在的函数
原型链：__proto__，指向当前类型的父级类型
一个对象在访问自身属性或方法时，如果自己身上没有，那么会顺着原型链依次向上找寻，找到了，就执行，找不到，就报错
通过new执行的构造函数得到的实例的__proto__指向的是，当前构造函数身上的prototype对象
- 把属性写在构造函数内
- 把方法写在构造函数的原型对象上

JavaScript-qf
局部作用域内不声明可以改变全局的变量； Day01 document.querySelector("mark")...

JavaScript-qf

Day01

数据类型

变量

Day02

类型转换

js程序结构

多分支swich

day03

循环

循环嵌套

day04

函数分类

函数的参数

arguments

js事件

day05

return

var和function 提升，var优先function

作用域:变量作用的区域，生效的区域

对象：代表了，任何意见可被描述的事物

day06

数组Array

day07

day08

DOMz操作属性

数学对象(Math)

进制

Date日期

Date日期设置

day09

Day10

DOM中的选择器

Day11

day12

day13

day14

day15

Day17

面向对象

创建对象

原型的概念

相关文章

JavaScript-qf

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读