JavaScript笔记整理(二)

JavaScript模糊知识点整理

数组的创建

1.使用new关键字和Array()来创建一个数组

构造函数方式:
var arr=new Arry(元素1,元素2,元素3,......,元素N);

2.使用中括号[]来创建

字面量方式
var arr=[元素1,元素2,元素3,......,元素N];

数组的索引

数组元素的下标从0开始,最大的下标是数组-1,使用lenght获取数组的长度

数组的遍历,使用for()

例1:var arr = [1,2,3,4,5,6,7,8,9,10]; 求出这个数组的和

// 声明变量存储和
    var sum =0;
    for(var i=0;i<arr.length;i++){
        // 循环输出所有的元素
       //  console.log(arr[i]);
         //让数组的每一个元素相加
          sum+=arr[i];
    }
    console.log(sum);

数组对象的属性和方法

数组属性

属性名描述
length获取数组的长度,如:arr,length 注意:最大下标值,数组长度-1

数组的方法

方法名描述
arr.sort();给数组排序,先数字后英文在中文
arr.reverse();反转数组元素
arr.join(str);将数组划分为字符串,数组元素以str分隔(默认是逗号)
arrconcat(arr1,arr2,…,arr3)合并数组,可以是多个,多个之间用逗号隔开
arr.pop()弹出arr数组最后一个元素,返回弹出的元素值
arr.push(data)给arr数组最后添加一个data元素,返回新数组的长度
arr.shift()弹出arr数组的第一个元素,并反弹出元素的元素值
arr.unshift(data)给arr数组最前面添加一个data元素,返回新数组的长度
arr.slice(start.end)分割数组,返回arr中atar到end之间的元素

for-in循环

严格模式

作用:消除js语法的不合理,提高编译器效率,增加运行速度

严格模式的调用:

use strict

ES5新增数组常见方法

方法名描述
arr.indexOf(item,start)方法可返回数组中某个指定的元素位置,索引位置从0开始,如果数组中没有找到指定元素则返回-1
arr.forEach(function(currentValue,index,arr))调用数组的每一个元素,并将元素传递给回调函数没有任何返回值
arr.map(function(currentValue,index,arr))返回一个新数组,数组中的元素为初始元素调用函数处理后的值
array.filter(function(currentValue,index,arr))创建一个新的数组,将函数执行一遍,只有在布尔值为true的时候才会返回该数据

字符串常见API

方法名描述
indexOf(data,start)返回某个数组或者字符串中规定字符或者字符串的位置
charAt(index)返回指定位置的字符,index为下标
substring(n,m)返回从指定位置,到结束位置(不包含)的字符串,如果不指定结束位置,则从开始位置到结尾
slice(n,m)字符串的分割
spilt("-")通过指定字符分割字符串,返回一个数组 '-'表示分割好
replace(“需要替换的字符串”,“替换之后的字符串”)将字符串中的一些字符替换为宁外一些字符
lastIndexOf()返回字符串最后出现的位置
toLowerCase()转成小写
toUpperCase()转成大写

对象

对象是一种大护具类型,而对象的值就是引用类型的实例

自带对象

字符串创建 var str = new String(‘1234’); // str.length

数组创建: var arr = new Array(1,2,3) // arr.push()

String()与Array()都是构造函数,通过他们new 出来的都是 对象如 str和arr

凡是.语法操作都是对象

this指向

this是js中的关键字,它代表当前对象

Math(数学对象介绍)

方法描述
Math.max(num1,num2,num3,…,numN)返回最大的一个数,可以写多个
Math.min(num1,num2,num3,…,numN)返回最小的一个数,可以写多个
Math.abs(num)返回绝对值
Math.ceil(num)向上取整,1.1、1.8
Math.floor(num)向下取整,1.1、1.8
Math.round(num)四舍五入
Math.pow(x,y)求x的y次幂 pow(2,2) 4
Math.sqrt(x)求x的平方根 sqrt(9) 3
Math.random()返回0~1之间的随机数

日期对象

方法描述
date.getFullYear()返回四位年份
date.getMonth()返回月份 (0 ~ 11) 注:0为1月,需要加1
date.getDate()返回一个月中的某一天 (1 ~ 31)
date.getHours()返回小时 (0 ~ 23)。
date.getMinutes()返回分钟(0~59)
date.getSeconds()返回秒(0-59)
date.getDay()返回一周中的某一天 (0 ~ 6)。0 为星期日
date.getTime();返回 1970 年 1 月 1 日至今的毫秒数(时间戳)

时间的转化

toLocaleString() 根据本地时间把Date对象转换为字符串

toLocaleTimeString() 可根据本地时间把 Date 对象的时间部分转换为字符串,并返回结果。

toLocaleDateString() 方法可根据本地时间把 Date 对象的日期部分转换为字符串,并返回结果。

延时器和计时器

setInterval() 定时器方法

描述:指定时间不断重复的执行js代码(一直执行)

语法: var t = setInterval(code,ms);

说明:

1、code指js代码,一般写函数(注:得加引号)

2、ms指毫秒 , 1s = 1000ms,间隔多少秒执行一次

3、使用setInterval()会返回一个唯一的标识,通过clearInterval()可以清除定时器

clearInterval()

功能:清除定时器

语法:clearInterval(t);

参数:t指定时器返回的唯一标示

setTimeout() 延时器方法

描述:打开网站等待指定时间后执行js代码(仅执行一次)

语法:var t = setTimeout(code,ms);

说明:

1、code指js功能代码,一般写函数(注:必须加引号)

2、ms指毫秒 1s = 1000ms

3、使用setTimeout()会返回一个唯一的标示,通过clearTimeout(唯一标示)可以清楚延时器

BOM浏览器对象

代表的是浏览器

window

document 文档对象模型

location

location.href 设置或获取地址

location.serach 获取?后面的参数

location.hash #后面的参数

location.reload 刷新浏览器

open()/close打开或关闭网页

onscroll窗口滚动条事件

scrollTop 获取滚动条距离顶部的高度

scrollLeft获取滚动条距离左侧的距离

onresize窗口大小改变时触发

onload 页面html加载完成时调用的事件

DOM 文档对象模型

整个HTML文档都属于

对象 document

获取页面的宽和高

window.innerHeight window.innerWidth

兼容的写法

document.documentElement.clientWidth

document.documentElement.clientHeight

获取节点

id获取

getElementById() 单个节点获取

class

getElementsByClassName() 获取的是个集合,以下标操作某一个节点

标签名称获取

getElementsByName() 获取到的是集合,以下标操作

getElementsByTagName() 获取到的是集合

万能标签

querySelector 获取的是单个标签对象

querySelectorAll() 获取所有的标签对象,只有一个符合条件的,返回的也是集合

DOM的基本操作

内置属性

定义:就是标签自带的属性

input中有type name class id

img的内置属性 src alt class id width height

非内置属性(自定义属性)

setAttribute(name,value)

给指定对象设置属性名和属性值

添加的属性都增加到了标签上

getAttribute(name)

获取指定对象的属性名的属性值

removeAttribute(name)

节点的公共属性

父级节点

parentElement parentNode

子节点

children

上一个兄弟节点

previousElementSibling

下一个兄弟节点

nextElementSlibing

第一个子节点

firstElementSibling

最后一个子节点

lastElementChild

返回节点名称

nodeName

元素内容设置

innerHTMl

节点的创建
  • 创建 document.createElement()
  • 追加父节点 .appendChild()
  • 追加到指定元素之前 父节点.insertBefore(新节点,旧节点)
  • 删除自己 remove()
  • 删除子节点 removeChild()
元素的尺寸
  • 最近有定位的父级元素 offersetparent
  • 获取元素左边框到父级元素的距离 offsetLeft
  • 获取元素上边框到父级元素的距离 offsetTop
  • 完全的宽度/高度 offsetWidth/offsetHeight (width+padding border)
  • 可视的宽度clientWidth/clientHeight (width+padding)
CSSDOM
  • 所有的操作都是行内样式
  • 一个单词和css中一样,两个单词的去掉-,第二个单词首字母大写
  • 获取 节点.style.属性 设置 节点.style.属性=’ ’ ;
  • 非行内样式 getComputedStyle(节点).属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值