js对象、属性、函数、方法

对象、属性、函数、方法的区别？

console：这是一个对象，无前后缀

.length：这是对象的一个属性，点做前缀

alert（）：这是一个函数，括号做后缀，函数是在对象外定义的

.log（）：这是对象的一个方法，对象和函数的结合体，点做前缀，括号做后缀，方法就是对象内定义的函数

js对象

• 对象的规范：**console：**这是一个对象，无前后缀

1.console

console：控制台，js的内置对象，控制输出到控制台的中的数据

• .log（输出的内容）:控制台输出方法

  • console.log（‘输出的内容’）；：括号表示调用函数，引号是定义字符串类型，引号中的内容是给函数的参数
  • 控制台输出的内容会全部显示在浏览器的console中，console.log的执行不会打断程序的运行
  • console是js中的内置对象，通过.可以调用它内置的log“方法”，console是对象，log是对象中的函数。

• .dir(标签对象):获取标签变量的详细对象信息

2.document

Document：文档对象模型

属性：

• .documentElement：获取html元素

  • .clientWidth/Height:获取不带滚动条的浏览器宽度，其实就是html元素，根标签的宽高

  • .scrollTop：获取滚动条已经动高度，不是只读的，可以修改值来规定滚动条滚动了多少

  • document.documentElement.scrollTop= 500;//使打开页面时滚动栏距离顶部的值为500
    

• .body：获取body元素

方法：

• .write():文档写入，将结果写入到文档中，我们可以在网页上看到写入的数据，会替换掉页面原来的内容

• .getElementById(“id名”)：根据id获取元素节点,由于id是唯一的，所以直接返回单元素

• .getElementsByClassName(“类名”)：根据类名获取元素节点，类名可以重复，所以返回的是元素数组

• .getElementsByTagName(“标签名”)：根据标签名获取元素节点，标签名可以重复，所以返回的是标签数组

  • .getElementsByTagName("*"):获取html文件中所有的标签，封装为一个类数组对象

• .querySelector(“选择器”)：根据选择器获取元素，只会获取一个元素，单选，所以返回的是单元素，注意加选择器的前缀

• .querySeletorAll(“选择器”)：根据选择器获取元素，能够获取所有符合选择器条件的元素，多选，所以返回元素数组

• .createElement(“标签名”):用于创建一个指定tagname的html元素，创建出来的节点是孤儿标签，它没有被挂载到dom树上面

• .createTextNode(“文本内容”):创建一个孤儿文本节点。

3.window

window：BOM，浏览器对象模型

• .onload:页面加载完毕事件，延迟运行事件，当页面资源、结构全部加载完成之后，才会执行这个函数表达式

• .hasOwnProperty(属性名):方法，检查对象中是否有该属性，返回布尔值

• .innerWidth/Height:窗口的内宽高，包含竖直/水平滚动条宽度

• .outerWidth/Height:窗口的外宽，包含竖直/水平滚动条宽度

  • 窗口全屏时没有边框，如果窗口不占全屏，会有边框，这时outerWidth/Height会稍大于innerWidth/Height

• scorllY:表示在垂直方向已滚动的像素值，但在获取窗口卷动高度时常与document.documentElement.scrollTop属性一起获取滚动值，是只读的，不能赋值

•    var scrollPX=window.scrollY||document.documentElement.scrollTop;//短路运算，如果第一个有值，则赋值第一个，否则赋第二个值
  

• .navigator:获取本浏览器的信息对象

• .history：获取浏览器的操作会话历史对象

• location:获取当前网址

  • .href：获取当前页面网址

  • .href=“网址”：跳转到某个页面

  • .reload(true):强制刷新

  • search：获取当前浏览器的GET请求参数

    • 比如访问http://www.baidu.com?a=1&b=2

    •    window.location.search;//"?a=1&b=2"
      

4.math

10个常用方法

Math:数学对象，存放一些数学运算的方法，比如幂计算方法.pow()和开根号计算方法.sqrt()

• Math.abs(-1):求绝对值，abs就是absolute的缩写，绝对的意思

• Math.ceil(1.2):2,向上取整

• Math.floor(1.9)：1,向下取整

• Math.round(1.5):2，四舍五入

  • Math.round(-1.5),-1，负数比较特殊，只要比-1.5小就是舍，只要比-1.5大一点点，比如-1.51得到的结果就是-2

• Math.PI:得到圆周率

• Math.sqrt(4):2，求开平方

• Math.pow(3,2):求幂次方，3的2次方

• Matn.random():随机数，获取包含0，但不包含1的随机小数

  • 求n-m之间的随机小数：Math.random()*(m-n)+n;
  • 求n-m之间的随机整数,包含m：Math.round(Math.random()*(m-n)+n);

• Math.min(1,2,3):求最大值

• Math.max(1,2,3):求最小值

  • 不能够求数组中的最大值，需要用展开运算符…转换一下

  • Math.min(...[1,2,3]);//结果为3 
    ...能够将数组展开为1,2,3
    
    //两个数组拼接成一个数组，再加数据项，也可以用...展开运算符
    var ary1=[1,2,3];
    var ary2=[5,6,7];
    
    var newary=[...ary1,...ary2,10];//结果就是拼接够的数组
    

5.array

Array：数组对象，内置了一些关于数组处理的方法

• .isArray（）：判断对象是不是一个数组

6.number

• Number.Max_safe_integer:获取数字整型的最大安全范围
• Number.Min_safe_integer：获取数字整形的最小安全范围

7.object

• .getOwnPropertySymbols(“对象变量名”)：获取对象中所有唯一数据类型的键值对
• .getPrototypeOf(“对象名”)：获取对象名对象的原型

8.navigator

Navigator：导航栏的意思，能够通过这个对象获取浏览器的相关属性和标识

• .appName:获取浏览器的官方名称
• .appVersion：获取浏览器版本
• .userAgent:浏览器的用户代理，(含有内核信息和封装壳信息)
• .platform：用户的操作系统

9.history

window.history对象就封装了操作浏览器会话历史

• 常用的操作就是模拟浏览器回退键

• history.back()方法，等于点击浏览器的回退键

• history.go(-1),等同于history.back

//实现超链接回退到上一页面 
<a href="javascript:history.back();"></a>

js函数

• 函数的规范：alert（）：这是一个的函数，括号做后缀

1.输入输出函数

1.1alert()

alert()：警告函数，弹出警告框

• alert（‘弹出的内容’）；：括号表示调用函数，引号是定义字符串类型，引号中的内容是给函数的参数
• alert的特点：浏览器在遇到一个alert语句时，就会暂停程序的执行，直到用户点击了alert语句中的确定按钮，程序才会继续执行。

1.2confirm()

confirm()：弹出确认框

• 存在返回值，如果用户点击确定，返回true，用户点击取消，返回false

1.3prompt()

prompt（‘请输入’）：弹出输入框，括号中的文本是提示文本

• 存在返回值，点击确定返回值是输入的字符串型内容，如果内容为空，返回空字符串
• 点击取消，返回null

2.类型判断函数

2.1.typeof

typeof：类型判断，typeof是一个操作符，不是函数，在使用时不用将判断的值用括号括起来。它是特殊的函数，因为它后缀没有括号，而是直接输入值。

• 使用规范：typeof+要测试的数据；

  typeof 5;//number
  typeof '慕课网';//String
  
  //输出变量类型
  var a= 11;
  console.log(a)//11
  console.log(typeof a);//number
  

• 使用方式：

  • 在浏览器repl环境下，直接输入typeof 5;
  • 在html编辑器中需要用输出语句比如console.log(typeof 5);

2.2isNaN()

isNaN（）：判断数据是否为NaN，返回布尔值，有缺陷，只要使用Number（）函数转换结果为NaN,则它的返回结果就为true

3.类型转换函数

3.1Number()

• Number（）：函数，是系统的内置函数，可以将其他类型转换为数字类型
  • 如果转换的数据不是纯数字，则转换之后的值是NaN
  • 空字符串会转为0
  • e会转为科学计数法中的e
  • 布尔值：true：会转为1 ，false：会转为0
  • undefined会转为NaN
  • Null会被转为0
  • Number（'1+1‘）结果是NaN

3.2parseInt()

• parseInt（）函数，功能是将字符串转为整数
  • 注意：parseInt（）会自动截取字符串第一个非数字之前的数值作为整数，点也算是非数值
  • 如果字符串中第一个字符不是数字，则直接转为NaN数值
  • parseInt不会四舍五入
  • parseInt也常用来净化，比如将100px转为100

3.3parseFloat()

• parseFloat（）函数，功能是将字符串转为浮点型

• parseFloat与parseInt的区别就是parseFloat会认为字符串中第一个小数点儿也是合法的

• parseInt和parseFloat转换true和float时转的值也是NaN

3.4String()

• String（）函数将数字、布尔值、undefined和null转为长度相同的字符串。
  • 科学计数法和非10进制数字会转为10进制值

3.5Boolean()

• Boolean()函数，将其他值转为布尔值
  • 数字转布尔值：0和NaN是false，其他是true
  • 字符串转布尔值：空字符串""是false，其他都是true
  • undefined和null转布尔值：转为fasle

4.Date()

• new Date():获取当前本机时间
• Date
  • .prase():将日期对象转为时间戳，精确到秒

5.定时器函数

setInterval():设置定时器，该函数可以重复调用一个函数，设置一个具体的固定的时间间隔。

• var a=0;
  setIntervat(function(){
  		//这个函数将自动以固定时间间隔被调用。
  		console.log(++a);//每两秒会输出一个++a的结果
  },2000)
  

• （）:括号内有两个参数，

  • 第一个参数：匿名函数，要执行的函数
  • 第二个参数：间隔时间，以毫秒为单位，2000就是2秒

clearInterval():清除定时器函数，可以清除一个定时器

• 根据定时器的变量名来清除定时器，如果传入的定时器变量名是undefined是不会报错的

  • var timer=setInterval(function(){
    
    },2000)
    clearInterval(timer);//清除timer定时器。
    

6.延时器函数

• setTimeout()函数可以设置一个延时器，当指定时间到了以后，会执行函数一次，不再重复执行

setTimeout(function(){
	//函数体会在两秒之后执行一次,只会执行一次
},2000)

• clerTimeout()函数可以清除延时器

7.eval()

eval()：执行函数

• var str=arr.join("+");//将数组中各项用+连字符连接，组成新的字符串
• eval(str);//eval会将字符串作为数学运算执行

8.dir()

dir():获取标签的详细信息

js方法

• 方法规范：**.log（）：**这是对象的一个方法，对象和函数的结合体，点做前缀，括号做后缀

1.String常用方法

String常用方法都不会改变原字符串，都需要新变量去接收新字符串

• .charAt():得到指定位置字符
  • 字符串中字符从左到右从零开始编号，通过输入编号获取指定位置的字符。
  • 如果输入的位置在字符串中没有，则返回空字符串。
• .substring（）：提取子串
  • 使用方式：substring（5,10）；截取字符串中从第5位开始到第10位结束的字符串，不包括第10位，即符合左闭右开原则。
  • substring如果省略第二个参数，那么就会从第一个参数开始截取到字符串的结尾
  • substring中的两个参数，第一个参数可以大于第二个，系统会自动调整小的数值到前面
• .substr（）：提取子串
  • substr（5,10）：截取字符串中从位置5开始，长度为10的子串
  • substr中的第二个值可以省略，表示到字符串结尾。
  • substr中第一个值可以是负数，表示从倒数第几个字符开始
• .slice（）：提取子串
  • slice（5,10）：与subString相同，同样是截取位置5到10但不包括10的子串
  • slice的参数可以是负值
  • slice中的第一个参数必须小于第二个参数
• .toUpperCase()：将字符串全部转为大写
• .toLowerCase():将字符串全部转为小写
• .indexOf（）：检索字符串
  • 返回某个指定的字符串值在字符串中首次出现的位置
  • 如果要检索的字符串值没有出现，就返回-1
  • 检索的不管是字符还是字符串，都需要用引号包裹
• .lastIndexOf(“子串”)：获取子串最后一次出现的位置，没有出现返回-1
• .replace(“好的”,“坏的”)：找到字符串中第一次出现的”好的“字符串，并替换为"坏的"
  • 如果想替换所有的，需要使用正则
• str.split():字符串以括号中的分割符进行分割，分割成数组
  • split():字符串不分割，存成一个数组中的一个数据项
  • split(""):将字符串每一个字符都分为一个数据项，得到一个数组
  • split("😊:将字符串按：进行分割，得到一个数组
• str.includes():与数组的用法相同，都是返回布尔值类型

2.toString()

.toString（）方法，将值转为String类型

• 几乎所有的值，都有toString（）方法，功能是将值转为字符串
• 纯数字在调用.方法时，数字需要用括号括起来。

3.toFixed()

.toFixed():保留指定位数的小数

4.Math.random()

• Math.random（）：随机数，会随机获取一个0-1之间的小数，小数位数不固定
  • .random()*10:获得0到10之间随机的小数
  • parseInt（Math.random（）*10）：获取0-9之间的随机整数
  • parseInt（Math.random（）*（b-a+1）+a）:随机获取[a,b]区间的整数

5.数组常用方法

5.1.数组判断方法

• Array.isArray():判断对象是不是array数组类型，返回boolean值

5.2.数组头尾操作方法

数组的头尾操作方法不需要再用=来接收，会自动修改原来的数组

• .push():在尾部插入元素

  • 参数是要推入的项，多个项用，隔开

• .pop():在尾部删除元素

  • pop里面不需要带参数
  • 删除数组的最后一项，并返回删除项的值，用变量来接收

• .unshift():在头部插入元素

  • 参数是要推入的项，多个项用逗号隔开

• .shift():在头部删除元素

  • shift里面不需要带参数
  • 删除数组的最后一项，并返回删除项的值，用变量来接收

5.3截取、替换数组方法

• .splice（index，content,new content）:拼接，用于替换数组中的指定项，也可以用作在指定位置插入新项，还可以用来删除指定项
  • 第一个参数是指定位置，第二个参数是删除连续项的个数，后面多个参数是替换的数据
  • splice会以数组形式返回被删除的项
  • arr.splice(n):如果只写第一个参数，就是删除从n开始删除后面的所有项，如果n是0，则返回的结果是与原数组一模一样的数组，但与原数组的空间地址不同，原数组变为空数组。
  • arr.splice（n,m）:如果只写两个值，表示删除从n开始的m项
  • arr.splice(arr.length-1,1):在arr的末尾删除一项
  • arr.splice(0,1):删除arr头部的一项
  • arr.splice(arr.length,0,5):在arr的末尾插入一个5
  • arr.splice(0,0,5)：在arr的开头插入一个5
  • arr.splice(3,2,‘X’,‘Y’,‘Z’);
    • 3表示从arr数组中的下标为3的数据项开始替换
    • 2表示连续替换两项,表示从3开始，删除两项，再插入后面要替换的值
    • ‘X’,‘Y’,‘Z’：这是插入的值，插入到删除两项后下标为3的数组位置
  • arr.splice(2,0,‘X’,‘Y’,‘Z’);
    • 0代表不删除原来数组中的数据项，而是插入到该位置数据的前面，自己占到下标为2的位置
  • arr.splice(2,4);
    • 表示删除从下标2开始，后面连续的4项，因为后面没有写要修改的值，所以没有插入新值
• .slice(截取起始位置，截取结束位置)：截取数组，与字符串的slice（）方法相似，[a,b),截取从下标a开始，到下标b-1的数组，需要用一个新的变量接收截取的结果。
  • arr.slice(a，b):表示截取从下标a开始，到下标b结束，不包括下标b的子数组
  • • .slice(n)：如果第二个参数不写，则是从索引n开始一直到最后。
    • .slice(0)():表示将数组全部的复制一份
    • .slice(-3,-2):slice可以跟负数索引，但是第一个值
  • slice可以是负值，表示倒数第几个。

5.4字符串数组转换方法

• .toString():将数组转为字符串，不改变原数组，需要新变量接收字符串

• .join(),使数组转为字符串，括号里面是各数据项之间以什么作为连接符，默认是逗号

  • .join():以逗号为连接符将数组转为字符串
  • .join(’’):空字符串代表两个数据项之间没有连接符
  • .join(😃;以冒号为连接符将数组转为字符串
  • .join(！):以！为连接符将数组转为字符串

• .split(拆分标准):使字符串转为数组，括号中的参数是以什么字符拆分字符串，一般不能留空

  • .split():将整个字符串转为只有一项的数组
  • .split(’’):空字符串表示将字符串中每一个字符拆分为单独一个数组项
  • .split(-):以-为拆分标准将一个字符串拆分成一个数组
  • .split(!):以！为拆分标准将一个字符串拆分为一个数组

5.5数组字符串其他常用方法

• .concat()方法可以合并连接多个数组
  • .concat（）不会改变原数组，所以我们需要定义一个新变量去接收合并后的新数组
  • var d=a.concat(b,c):a数组连接b数组，再连接c数组，得到的新数组赋值给d数组
  • var d=a.concat(b,5,6,7):a先连接数组b，再在后面拼接5,6,7
• .reverse()方法用来将数组中的全部项置反
  • .reverse()方法更改原来的数组
• .indexof（）方法是搜索数组中的元素，并返回它首次出现的位置，如果没有该元素则返回-1
• .includes（）方法的功能是返回数组中是否存在指定的值，返回的是boolean值

 <script>

        var ary = [1, 2, 3, 4, 5];
        // 数组倒置

        console.log(ary.reverse()); //[5,4,3,2,1];
        //数组转字符串

        str = ary.join();//"5,4,3,2,1";
        console.log(str);
        var str2 = ary.join("");//"54321";
        console.log(str2);
        var str3 = ary.join("-");//"5-4-3-2-1";
        console.log(str3);

        //数组替换、删除、添加数据项
        ary.splice(1,2,6);//返回值是splice截取的值[4,3]
        console.log(ary);//[5,6,2,1]
        ary.splice(1,2);//纯删除没替换数据，返回截取的值[6,2]
        console.log(ary);//[5,1]
        console.log(ary.splice(1,0,3,2,1));//[]空数组
        console.log(ary);//纯添加，将3,2,1插入到下标为1的数据项前面，使3的下标成为1，返回结果：[5,1,3,2,1]

        //字符串转数组，转换完之后数组中的数据项是字符串类型
        var array1=str.split();//由于没给分割条件,将整个字符串转为数组中的一个数据项
        console.log(array1);//['5,4,3,2,1']
        var array2=str.split("");//空字符串代表字符串中每一个字符都分割开，用逗号隔开,字符串中的逗号也会被分割为一个字符
        console.log(array2);//['5',',','4',',','3',',','2',',','1']
        var array3=str.split(",");//根据逗号分割字符串，逗号扔掉
        console.log(array3);//['5','4','3','2','1']
        
        //数组拼接
        var a=[1,2];
        var b=[3,4,5];
        var c=[8,8];
        var con=a.concat(b,c);//a后面拼接b，b后面拼接c，得到的结果需要一个新的变量来接收
        console.log(con);//[1, 2, 3, 4, 5, 8, 8]
        //push、pop、shift、unshift
        var arrr=[1,2,3,6];
        console.log("--------------------------------------");
        console.log(arrr.pop());//4，返回的是pop出来的值
        console.log(arrr);// [1, 2, 3]，修改的是原数组
        console.log(arrr.push(2));//4，返回的是当前数组长度
        console.log(arrr.shift());//弹出首个数据项
        console.log(arrr.unshift(6));//添加到首个数据项
        console.log(arrr.indexOf(2));//1，返回数组中第一次出现2的下标
        console.log(arrr.includes(22));//false，返回布尔值，判断arrr中是否存在22


    </script>

5.6遍历

• .forEach()：遍历数组中的每一项

arr.forEach(function(item,index){
	console.log(item,index);
})

• item表示数组中数据项
• index表述数组索引值

.map():遍历数组中的每一项,并且返回一个在原数组基础上映射后的新数组，原数组不改变

• <script>
      var arr=[1,23,45,9,4];
      //item表示数据项    index表示对应的数组下标
     var newarr= arr.map(function(item,index){
          return item++;
      });
      newarr;//新数组是在原数组的基础上每一项加1
  
  </script>
  

6…Sort()

• .Sort()：js中的内置排序方法，用于数组的自动排序

  • .Sort():直接使用sort方法默认排序是按首字符（0-9）的顺序排序，101排在2前面

  • 想要实现从小到大排序需要添加函数表达式

    • alert(arr.sort(function (a,b){
                  return a-b;
              }));
      

  • 想要实现从大到小排序需要添加函数表达式

    • alert(arr.sort(function (a,b){
      		return b-a;
              }));
      

7.节点方法

7.1.appendChild()

.appendChild():方法是用来将孤儿节点过载到DOM树已经存在的节点上的

• 使用document.createElement()方法，创建一个节点，口号内是标签名
• 创建出来的节点是孤儿节点，因为没有挂载到DOM树上面
• 必须继续使用appendChild()或者insertBefore()将孤儿节点插入到DOM树上
  • 任何已经在DOM树上的节点，都可以调用appendChild()方法，它可以将孤儿节点挂载到它内部，成为它的最后一个子节点

父节点.appendChild(孤儿节点)

7.2.insertBefore()

.insertBefore()方法是将孤儿节点插入到父节点的标杆节点之前

父节点.insertBefore(孤儿节点，标杆节点)

7.3.removeChild()

.removeChild:删除一个子节点

父节点.removeChild(要删除的节点);

节点的增删改移动？

创建：创建出来的节点是孤儿节点，需要放到父节点中

//创建一个元素
  document.createElement("标签名");
//创建一个文本节点
document.createTextNode("文本内容");

添加到父节点：

//将所有孤儿节点添加到父节点所有子节点的后面
父节点.appendChild("孤儿节点变量名");

//插入到父节点指定子节点的前面
父节点.insertBefore("孤儿节点名","指定子节点名");

删除：只有父元素能够删除子元素，自己不能删自己

//通过父元素删除里面的子节点
父节点.removeChild("子节点")

克隆：克隆旧节点，克隆到的新节点是孤儿节点

var newNode=旧节点.clone();//克隆旧节点，不克隆它里面的子节点           浅克隆
var newNode=旧节点.clone(true);//克隆旧节点，克隆它里面的子节点		深克隆

8.添加事件方法

addEventListener()方法

• addEventListener：给节点添加事件监听器

• obox.addEventListener('click',function(){
  	//事件的处理函数体
  },true);
  

  • （）:括号内分为三部分
  • 第一部分：事件名，在DOM0级事件名的基础上去掉on前缀，比如onclick改为click
  • 第二部分：执行的函数体
  • 第三部分：布尔值，true监听捕获阶段，false监听冒泡阶段
  • 如果嵌套盒子中，所有方法即设置了冒泡阶段，又设置了捕获阶段，外层嵌套的盒子会先执行捕获阶段，等执行到最内层盒子时，它的两个阶段的执行顺序按照书写顺序执行，接下来再由内向外执行嵌套盒子的冒泡阶段事件
  • 嵌套盒子事件先执行捕获事件，执行完所有盒子的捕获事件以后，再由内向外执行冒泡事件
  • 最内层盒子事件执行顺序按书写先后顺序执行
  • 同名事件按书写顺序执行

e.stopPropagation()

• e.stopPropagation():停止事件传播方法，事件传播遇到这个方法就会停止

9.Date常用方法

date日期对象：13个方法：

• 八个,获取年月日时分秒毫秒星期等单个数据的方法：
  • .getFullYear():得到年份
  • .getMonth():得到月份0-11，获取的月份，比真实月份少1
  • .getDate():得到日期1-31
  • .getHours():得到小时数0-23
  • .getMinutes():得到分钟数0-59
  • .getSeconds():得到秒数0-59
  • .getMilliSeconds():得到毫秒0-999
  • .getDay():得到星期0-6，0代表星期日，1-6代表星期1-6
• 三个，获取日期时间字符串的方法：
  • .toLocaleString():获取本地的日期时间字符串
  • .toLocaleDateString():获取本地的日期字符串
  • .toLocaleTimeString():获取本地的时间字符串
• 两个，将日期对象转为时间戳的方法：
  • Date.prase():将日期对象转为时间戳，精确到秒
  • .getTime():转为时间戳，精确到毫秒

10.节点属性方法

当我们想要给某节点甚至一个自己写的属性时，如果这个属性是非css3官方的，不能直接通过赋值的方法创建属性，而是使用setAttribute()和getAttribute方法,移除属性需要使用removeAttribute()方法

node.setAttribute()

• 设置节点的属性有两种方法，第一种是用点的方式创建，第二种是用.setAttribute()的方式创建属性
• 当创建的节点属性是标签自带的，则使用两种方法时是无区别的
• 当创建的属性不是html规范属性时，就有区别了
  • 通过点设置的非html规范属性，只会添加在节点的对象中，不会添加在结构上，用getAttribute获取不到该属性
  • 通过setAttribute设置的非html规范属性，只会添加在结构是哪个，不会添加在对象中，用obj.属性名的方式获取不到该属性

//使用点设置属性
box.index=1;
box.getAttribute("index");//null，因为设置的是非html官方属性，不会显示在结构上，但是在对象中能够看到index：1属性
//使用setAttribute设置属性
box.setAttribute("outer",2);
box.getAttribute("outer");//2,能够获取结构上的属性值
<div class="box" outer="2">//这个非html规范属性被设置在了html结构上
box.outer;undefined;//undefined，非规范属性没有被定义在节点对象中

• node.setAttribute('data-n',123);属性名为data-n,属性值为123
  

  • 第一个参数：属性名

  • 第二个参数：属性值

node.getAttribute()

• node.getAttribute(‘属性名’)：获取指定属性名的属性值

node.removeAttribute()

• node.removerAtribute(‘属性名’)：移除指定属性

11.正则表达式方法

• 正则表达式可以“打点”调用哪些方法

  • .test():测试某个字符串是否匹配正则表达式，返回布尔值

  • .exec():根据正则表达式，在字符串中进行查找，返回结果数组或者null

    • 直接检索字符串，匹配到第一个符合正则表达式规范的字符，就会返回这个数组
    • 数组内容为返回字符、字符所在下标、父串内容
    • +表示贪婪查询，会尽可能多的获取更长的子串
    • g表示全局搜索，在表达式后面加上g使得每次检索的结果可以逐条遍历

        <script>
            var str="121abcsd21234a345";
            
            var regexp=/\d/;//只检索第一个符合条件的字符
            var regexp1=/\d+/;//+贪婪检索，尽可能多的检索连续符合条件的字符串
            var regexp2=/\d+/g;//g全局检索，开启遍历，每次检索都会从上一个符合条件的字符后面开始
            var result;
            // 遍历出所有符合正则表达式的字符串数组
            while(result=regexp2.exec(str)){
                console.log(result);
            }
            //['121', index: 0, input: '121abcsd21234a345', groups: undefined]
        </script>
    

11.字符串相关正则方法

• .search():在字符串中根据正则表达式进行查找匹配，返回首次匹配到的位置索引，不存在则返回-1
• .match():在字符串中根据正则表达式进行查找，返回一个所有符合条件的字符串数组，找不到返回null
• .replace():使用替换字符串替换掉匹配到的子字符串，可以使用正则表达式
• .split():分割字符串为数组，可以使用正则表达式

12.硬绑定this指向方法

call和apply能够指定函数的上下文，并且立即执行函数

    fun.call(xiaoming);//调用fun函数，并且以小明为指定上下文对象
        fun.apply(xiaoming);//调用fun函数，并且以小明为指定上下文对象

• call和apply的区别
  • 当函数有形参时，使用call方法指定上下文，传实参时，用逗号从后面罗列
  • 但函数有形参时，使用apply方法指定上下文，传实参时，使用数组的形式包裹实参
  • 如果传入参数的格式弄错，可能就不能正确传入到形参中了，甚至会报错

        fun.call(xiaoming,50,89);//50和80是传给函数的实参
        fun.apply(xiaoming,[50,80]);//[50,80]是传给函数的实参

• 什么时候用call，什么时候用apply
  • 当传递的实参是数组或者类数组变量时，如arguments，用apply
  • 传递的参数是逗号罗列时，用call

bind能生成一个新的绑定了指定this的函数，不执行它

        var obj={
            age:18,
            test:function(a,b){
                console.log(this.age,a,b);
            }
        }

        setTimeout(obj.test.bind(obj,1,2),1000);

//将将指定函数中的this绑给他的第一个参数,并且返回一个新的this指向已经定死的硬绑定函数!!

13.判断对象所属的构造函数

13.1instanceof

• instanceof:属于

• instanceof关键字：用来判断一个实例对象，是否属于后面这个类

          function Fn(){}
          var fnn=new Fn();
          console.log(fnn instanceof Fn);//true,判断fnn属于Fn类吗
          console.log(fnn instanceof Array);//false,判断fnn属于Array类吗
          console.log(fnn instanceof Object);//false,万物皆对象，所有的实例原型链都是Object基类
  

13.2 in和hasOwnProperty

• in检测私有和作用域链范围，hasOwnProperty检测私有范围

• “name” in “arr”:检测某个对象是否有某个属性或方法（不管公有私有）

• arr.hasOwnProperty(“name”):检测某个对象是否存在某个私有属性或方法

• 公有还是私有，是相对来说的，主要看针对的对象是谁

•         function Fn(name, age) {
              this.name = name;
              this.age = age;
          }
          var f1 = new Fn("lili", 18);
          Fn.prototype.name="haha";
          "name" in f1;//true
          "toString" in f1;//true
          
          f1.hasOwnProperty("name")//true
          f1.hasOwnProperty("toString")//false
        		Fn.prototype.hasOwnProperty("name");//true
          
  

13.3.getPropertypeOf()

• Object.getPropertypeOf(“对象名”):获取该对象的原型

14.ES6新增方法

字符串6个，数组7个，对象4个。

字符串新增的常用方法有6个：

• .includes(“ab”,2):判断字符串中是否包含某些字符或连续字符串，返回布尔值
  • 第一个参数：想判断的字符串
  • 第二个参数：开始搜索的位置
  • 字符串的引用：网址参数键值对拼接，判断是否已经存在问号
• .padStart(5,“ab”)/.padEnd(5,“ab”):
  • .padStart从开头/.padEnd从结尾，补全字符串长度，原字符串长度大于或等于目标长度，则不进行补位
  • 第一个参数：补全以后字符串应该有的长度
  • 第二个参数：想用什么字符进行补位
  • 如果省略第二个参数，默认使用空格补全长度
  • 常应用在规范显示日期格式
• .trimStart()/.trimEnd():清除字符串的首或尾空格，中间的空格不会清除
• .trim():首尾空格都清除
  • trim常用于表单提交的数据格式验证

数组的常用新增方法7个：

• arr.includes（“a”，3）:判断数组中是否有某个成员，判断标准是基本严格等于（===），但认为NaN全等于NaN
  • 第一个参数：检测是否包含某个数据项
  • 第二个参数：从第几项开始检测
  • 应用：去重
• Array.from():将其他数据类型转换成数组
  • 第一个参数：要遍历的对象
  • 第二个参数： 回调函数，作用类似于数组的map方法，用于对每个元素进行操作，将处理后的值放入返回的数组
  • 第三个参数：修改this指向，箭头函数无法修改this指向
  • 参数类型可以是：
    • 所有可遍历的，但是可遍历的使用展开运算符更方便:[…str]
    • 拥有length属性的任意对象，只会转换length值个数据项。对象不够length值个键值对，用undefined填充
• arr.find()/findIndex():find找到某个值/findIndex找到某个值对应索引
  • find(10)：找到满足条件的某一个值，立即返回
  • findIndex：找到满足条件的某一个值，立即返回它的索引
  • 第一个参数：回调函数，与forEach里的回到函数用法相同，函数体内写查找条件
  • 第二个参数：改变this指向，箭头函数无法修改this
  • 应用：数据的筛选
• arr.keys():得到的是索引的可遍历对象，可以遍历索引值。
• arr.values():得到的是数据项的可遍历对象,可以遍历数据项值。
• arr.entries():得到的是数据项+索引组成的可遍历对象，遍历出索引，值组成的数组
  • 可以用解构赋值的方式，单独获取索引或数据项：for(var [key,value] of arr){}

对象的新增常用方法4个：

• Object.assign(obj1，obj2):合并对象， 将obj2中的内容，合并到obj1对象中，不会生成新的对象，改变第一个传入的对象，

  • 可以合并多个对象
  • 剩余运算符，{…obj}的形式是生成一个新对象
  • 如何用Object.assign（）合并出一个新对象，第一个参数传空对象
  • 第一个参数叫目标对象**(Target)，第二个参数叫源对象（Source）**
    • 基本数据作为源对象：与对象的展开相似，先转换成对象，再合并
    • 同名属性的替换：后面的会覆盖前面的
  • 应用：合并默认参数和用户参数3

• Object.keys():获取对象的键组成的数组

• Object.values():获取对象的值组成的数组

• Object.entries():获取对象的键和值组成的二维数组

  • 与数组类似方法的区别

    • 数组是实例的公有方法，返回的是遍历对象
    • Object是构造函数的静态方法，返回结果是数组

  • keys是ES5的方法，values、entries是ES6新增的方法

  • 应用：可以获取对象所有的键值对后，用for…of遍历这些二维数组。

js属性

1.长度判断属性

1.1.length

.length：长度，判断字符串的长度，其中的每个汉字、标点符号、英文单词、都算一个字符长度

2.获取文本属性

2.1.innerText

.innerText:获取标签内文本属性

var otext=obtn.innerText;//获取纯文本

obtn.innerText="<h1>好好</h1>"；//将输入的文本不管是不是标签都会显示在页面上

2.2.innerHtml

.innerHtml:带有文字的标签+文字

var otext=omain.innerHtml;//获取带有文字的标签加文字

omain.innerHtml="<h1>好好</h1>";//将标签渲染成样式后，再显示到页面上

3.获取输入框内容属性

.value：获取输入框中的内容，也就是属性值

var ocontent=otext.value;

4.事件对象属性

4.1.鼠标位置属性

​ 只针对于onmouseXX时间对象的属性

• e.clientX:鼠标指针相对于浏览器窗口左上角的水平坐标

• e.clientY:鼠标指针相对于浏览器窗口左上角的垂直坐标

• e.pageX：鼠标指针相对于整个网页的水平坐标，整个网页的xy轴会随着滚动条的滚动而放大缩小

• e.pageY：鼠标指针相对于真个网页的垂直坐标

• e.offsetX：鼠标指针相对于事件源元素的水平坐标，事件源就是触发这个事件的盒子

• e.offsetY:鼠标指针相对于事件源元素的垂直坐标

//获取鼠标指针相对于事件源元素的水平垂直坐标
oBox.onmouseover=function(e){
	oInfo.innerHtml='offsetX/y'+e.offsetX+","+e.offsetY
    				+'clientX/y'+e.clientX+","+e.clientY//获取鼠标指针到浏览器窗口的xy值
    				+'pageX/y'+e.pageX+","+e.pageY;//获取鼠标指针到网页左上角的xy值
}

4.2字符码键码属性

只针对于onkeyXX事件对象的属性

e.charCode和e.keyCode属性

• e.charCode属性常用于onkeypress事件，表示用户输入的字符的“字符码”。
• e.keyCode属性常用于onkeydown事件和onkeyup，表示用户按下的“键码”
• e.charCode字符码
  • 数字0-9：48-57
  • 大写字母A-Z：65-90
  • 小写字母a-z: 97-122
• e.keyCode键码
  • 数字0-9:48-57
  • a-z:不区分大小写65-90
  • 四个方向键：左37、上38、右39、下40
  • 回车键：13
  • 空格键：32

4.3鼠标滚轮属性

只针对于.onmousewheel事件

• e.deltaY:鼠标滚轮方向，向下滑返回正值，向上滑返回负值

4.4事件委托属性

• e.target:触发此事件的最早的元素，即事件源元素，表示用户真正点击的那个元素
  • tagName：获取标签名
• e.currentTarget:事件处理程序附加到的元素，表示真正执行了事件处理的元素

5.节点关系属性

5.1.childNodes

• ols.childNodes：获取ols节点的子节点数组

5.2.childElementCount

• ols.childElementCount：获取ols子节点的个数

5.3firstElementChild

• ols.firstElementChild：获取ols的第一个元素子节点

5.4lastElementChild

• ols.lastElementChild：获取ols的最后一个元素子节点

5.5firstChild

• ols.firstChild:获取ols节点的第一个子节点，可能是文本节点，也有可能是元素节点

5.6lastChild

• ols.lastChild:获取ols节点的最后一个子节点，可能是文本节点，也有可能是元素节点

5.7nextElementSibling

• ols.nextElementSibling：获取ols节点的后一个兄弟元素节点

5.8nextSibling

• ols.nextSibling：获取ols节点的后一个兄弟节点，可能是文本节点，也可能是元素节点

5.9previousElementSibling

• ols.previousElementSibling：获取ols节点的前一个兄弟元素节点

5.10previousSibling

• ols.previousSibling：获取ols节点的前一个兄弟节点，可能是文本节点，也可能是元素节点

js事件

1.文档对象事件

1.鼠标监听事件

1.1鼠标点击事件

.onclick:鼠标单击时会触发的事件，一次单击代表鼠标摁下并松开的过程，只摁下不松开不会触发单击事件

.ondblclick:鼠标双击时触发的事件

//鼠标单击事件
obox.onclick=function(){
	alert.(1);
}
//鼠标双击事件
obox.ondbclick=function(){
	alert.(2);
}

1.2鼠标进入事件

.onmouseover：鼠标划上时会触发的事件

.onmouseenter:鼠标进入某个对象是触发的事件，与onmuseover相似

//鼠标划上
obox.onmouseover=function(){
	alert(2);
	this//指定就是当前绑定的元素
}

1.3鼠标离开事件

.onmouseout:鼠标离开时会触发的事件

.onmouseleave：鼠标离开时会触发的事件与onmouseout相似

//鼠标离开
obox.onmouseout=function(){
	alert(3);
	this;
}

1.4鼠标移动事件

.onmousemove:鼠标移动时会触发的事件

//鼠标移动
obox.onmousemove=function(){
	alert(3);
	this;
}

1.5鼠标摁下事件

.onmousedown:当鼠标摁下某个对象时触发的事件

1.6鼠标松开事件

.onmouseup:当鼠标松开时触发的事件

1.7鼠标滚轮事件

.onmousewheel:当鼠标滚轮滚动是触发的事件

2.键盘监听事件

2.1.onkeypress

.onkeypress：当某个键盘的键被按下（系统按钮如上下左右箭头和功能键无法得到识别）

2.2onkeydown

.onkeydown：当某个键盘的键被按下（系统按键可以识别，并且先与onkeypress触发）

2.3onkeyup

.onkeyup：表示当某个按键被松开时触发的事件

3.表单监听事件

3.1onchange

onchange：当用户改变域内的内容时触发

3.2onfocus

onfocus：当某元素获得焦点时触发

3.3onblur

onblur：当某元素失去焦点时触发

3.4onsubmit

onsubmit:当表单被提交是触发

3.5onreset

onreset：当表单重置时触发

3.6oninput

oninput:当正在表单元素中输入东西时触发

4.页面监听事件

4.1onload

onload：当页面加载完成时触发的事件

window.onload=function(){
	alert("页面加载完毕啦");
}

4.2onunload

onunload:用户关闭页面之前触发的事件

window.onunload=function(){
	confirm("你是否要关闭页面");
}

5…addEventListener()

• addEventListener：给节点添加事件监听器

obox.addEventListener('click',function(){
	//事件的处理函数体
},true);

• （）:括号内分为三部分
• 第一部分：事件名，在DOM0级事件名的基础上去掉on前缀，比如onclick改为click
• 第二部分：执行的函数体
• 第三部分：布尔值，true监听捕获阶段，false监听冒泡阶段
• 如果嵌套盒子中，所有方法即设置了冒泡阶段，又设置了捕获阶段，外层嵌套的盒子会先执行捕获阶段，等执行到最内层盒子时，它的两个阶段的执行顺序按照书写顺序执行，接下来再由内向外执行嵌套盒子的冒泡阶段事件
• 嵌套盒子事件先执行捕获事件，执行完所有盒子的捕获事件以后，再由内向外执行冒泡事件
• 最内层盒子事件执行顺序按书写先后顺序执行
• 同名事件按书写顺序执行

6.e.stopPropagation()

• e.stopPropagation():停止事件传播方法，事件传播遇到这个方法就会停止

2.浏览器对象事件

浏览器对象就是window

1.onresize

window.onresize事件就是窗口改变事件，当窗口大小发生改变时会触发这个事件

2.onscroll

window.onscroll事件是滚动条改变事件，当滚动条距离顶部的距离改变时，就会触发这个事件