JavaScript-qf

2019-03-20  本文已影响0人  Moquyun 
*****************************************************
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>

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);

Day02

类型转换

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{

}

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

}else{

}

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

}else{

}

//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和数组的值拼接

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

扩展

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
  1. 当知道要循环的次数时，用for循环；
  2. 不知道循环的次数时，使用while循环，配合break;

循环嵌套

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

day04

函数：

封装，抽象

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

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的函数，返回的是undefined，有return的，返回的是，return后的值

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

fn(){

}

有函数就有作用域

day06

//索引-增删改查
增：
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()//排序返回值：排序之后的数组

栈和堆

枚举

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

day07

ES5

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;
})

字符有索引，有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()

  1. 文档渲染中，document.write()打印到页面的最后
  2. 文档渲染结束，document.write()会重写整个页面


//十进制转其他
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);

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

简单模式(传参)
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);

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

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

day09

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

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

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

Day10

兼容到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不支持）

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

Day11

检测相对于浏览器的位置：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

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

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

day13

day14

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

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

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

    },
    nan:NaN,
    n:null

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

Day17

面向对象

创建对象

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

原型的概念

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

猜你喜欢

热点阅读