3-javaScript(贰)

1. 内置对象

JavaScript中的对象分为4种:内置对象、自定义对象、浏览器对象、DOM对象。

1.1 Math

Math.PI 圆周率

常用方法

Math.random()  //生成随机数
Math.floor()   //向下取整
Math.ceil()    //向上取整
Math.round()   //取整,四舍五入
Math.abs()     //绝对值
Math.max()     //最大值
Math.min()     //最小值
Math.sin()     //正弦
Math.cos()     //余弦
Math.pow()     //求指数次幂
Math.sqrt()    //求平方根

1.2 Date

Date()是构造函数;想要使用Date的方法,必须实例化new一个日期对象

var date = new Date();
date.getTime() // 获取1970年1月1日至今的毫秒数 (没什么用)
date.getMilliseconds() //返回毫秒
date.getSeconds()  // 返回0-59
date.getMinutes()  // 返回0-59
date.getHours()    // 返回0-23
date.getDay()      // 返回星期几 0周日 6周6
date.getDate()     // 返回当前月的第几天
date.getMonth()+1    // 返回月份,从0-11
date.getFullYear() // 返回4位的年份

1.3 Array

var arr = [1, 3, 4, 6, 8];
// 基本方法
Array.isArray(arr) //判断是否为数组
arr.valueOf()      //返回数组对象本身
arr.reverse()      //翻转数组
// 数组增删方法
arr2.push(60, 70, 80);    //从最后添加一个或多个值
arr2.pop();               //从最后删除一个值
arr2.unshift(11, 22, 33); //从开始添加一个或多个值
arr2.shift();             //从开头删除一个值
// 位置方法
arr.indexOf(3);     //返回数组中指定元素的第一个值的索引,不存在返回-1
arr.lastIndexOf(7)  //从后向前找指定元素的第一个值的索引,不存在返回-1 
// 数组转化字符串
arr.join("")        //数组转化为字符串,以参数分割;无参数时输出结果为 1,2,3,4,6,8

1.3.1 排序方法

sort()

  • 没有指定参数
var arr = [1, 3, 4, 6, 8];
arr.sort() // 默认排序顺序是在将元素转换为字符串,然后按照UTF-16代码单元值序列排序
  • 指定参数

如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;

如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。!不兼容所有浏览器

如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。

arr.sort(function compareFunction(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  return 0;
})

要比较数字而非字符串,比较函数可以简单的以 a 减 b,如下的函数将会将数组升序排列

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

1.3.2 拼接与截取

concat()

把参数拼接到当前数组、 或者用于连接两个或多个数组

var arr1 = ["zx", "aq"]
var arr2 = arr1.concat("asd")

slice(start,end)

  • 从start开始截取元素,到end结束,包括start,不包括end,返回新数组,start,end是索引;

  • 不会改变原数组

var arr2 = [1,2,3,4,5];
arr2.slice(0,3) //取[1,2,3]

splice(start,length)

  • 从start开始截取元素,截取length个,返回新数组,start是索引,length是个数

  • 会改变元素的数组

var arr2 = [1,2,3,4,5];
arr2.splice(0,3) //取[1,2,3]

1.3.4 迭代与过滤

forEach()

用于调用数组的每个元素,并将元素传递给回调函数;传一个参数 value是数组值,两个参数 index是索引号

var arr3 = [1, 2, 3, 4, 5]
arr3.forEach(function (value,index) {
    console.log(value);
    console.log(index);
});

every(): 判断回调函数中的表达式是否全部满足,如果满足,返回值就是true,只要有一个不满足就是false

arr3.every(function (value) {
    return value<3; //返回false
});

some(): 判断回调函数中的表达式是否有一个满足,如果至少一个满足,返回值就是true

arr3.some(function (value) {
    return value<3; //返回 true
});

filter(): 根据指定条件过滤元素,返回新数组

arr3.filter(function (value) {
    return value>3; //返回新数组[4,5]
});

map(): 根据数学运算,返回新数组

arr3.map(function (value) {
    return Math.pow(value,2); //返回新数组[1,4,9,16.25]
});

1.3.5 清空数组

  1. 推荐 arr = []
  2. arr.length = 0
  3. arr.splice(0, arr.length)

1.4 String

var str = 'abc';
str = 'hello';

当重新给str赋值的时候,常量'abc'不会被修改,依然在内存中

重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变

由于字符串的不可变,在大量拼接字符串的时候会有效率问题

1.4.1 取值方法

charAt(0)        //获取指定位置处字符
str[0]          //HTML5,IE8+支持 和charAt()等效

1.4.2 操作方法

// 拼接与截取
concat()        //拼接字符串(不常用);一般用+
//截取字符串 不会改变原字符串
slice(start, end)         //从start位置开始,截取到end位置,end取不到
substring(start, end)     //从start位置开始,截取到end位置,end取不到
substr(start, length)     // 从start位置开始,截取length个字符
// 位置方法
indexOf()         //返回指定内容在元字符串中的位置,如果没有,返回-1;(从前往后,检索到第一个就结束)
lastIndexOf()     //返回指定内容在元字符串中的位置,如果没有,返回-1;(从后往前,检索到第一个就结束)
// 字符串操作
trim()            //去除字符串前后的空格
toUpperCase()     //转换大写
toLowerCase()     //转换小写
search()          //方法用于检索字符串中指定的子字符串,返回子字符串的起始位置
replace(old, new) //替换字符串 new替换old; 只能替换找到的第一个
// 字符串转数组
split("")         //数组的元素就是以参数的分割的; 无参时整个字符串变成只有一个元素的数组

1.5 基本包装类型

当基本数据类型String/Number/Boolean直接调用方法的时候,javaScript会把String/Number/Boolean类型的变量

包装成对应的临时对象,再调用内置对象String/Number/Boolean方法,最后销毁临时对象

Number/Boolean的基本包装类型基本不用,容易引起歧义

2. DOM操作

api 对象暴露给外界的一些操作方法的集合

2.1 获取DOM元素

  1. 通过id获取DOM元素;获取的是一个具体的DOM元素

var div1 = document.getElementById("div1")

  1. 通过选择器获取单个元素;获取的是同选择器的第一个元素

var div3 = document.querySelector(".div1")

!!以下方法获取的都是由元素构成的伪数组,使用时要加上[索引号]; 例:[0]

伪数组有length属性,可以遍历;伪数组没有普通数组的内置方法

  1. 通过类名获取元素

var div2 = document.getElementsByClassName("div2")[0]

  1. 通过标签名获取元素

var h1 = document.getElementsByTagName("h1")[0]

  1. 通过name名获取元素

var input1 = document.getElementsByName("input1")[0]

  1. 通过选择器获取所有元素

var div4 = document.querySelectorAll(".div2")[0]

2.2 事件触发

事件三要素: 事件源、事件类型(触发方式)、事件处理程序

触发方式的写法

  1. 内部书写所有
<button onclick="alert(999)">点击弹框</button>
  1. 行内触发方法: 写一个js方法,行内调用
<button onclick=fn1()>点击弹框</button>
<script>
    function fn1() { alert(888) }
</script>
  1. html外书写
<button class="btn1">点击弹框</button>
<script>
    var btn1 = document.getElementsByClassName("btn1")[0]
    btn1.onclick = function () {
        alert(666)
    }
</script>

2.3 获取/修改元素的属性

<style>
    .div1 {
        width: 200px;
        height: 100px;
    }
    .div2 {
        width: 350px;
        height: 250px;
    } 
</style>
<div class="div1">222</div>
<script>
    var div1 = document.getElementsByClassName("div1")[0]
    div1.onclick = function () {
        document.getElementsByClassName("div1")[0].style.width = "300px"
        this.style.height = "200px"
        // 也可以修改类名
        this.className = "div2"
    }
</script>

表单默认属性也可以修改

  • value 用于大部分表单元素的内容获取(option除外)
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性checked 复选框选中属性
  • selected 下拉菜单选中属性
  • checked

3. DOM属性操作与事件

3.1 阻止a链跳转

三种方法,与事件触发的三种写法相同,不同的是方法最后加上return false

3.2 新事件

  1. 鼠标事件

获取/失去焦点 onfocus/onblur

鼠标双击 ondblclick

鼠标移入/移出 onmouseover/onmouseout

鼠标进入/离开 onmouseenter/onmouseleave

区别: onmouseenter/onmouseleave强调进入;不支持冒泡

冒泡:子元素事件执行,会递归执行所有父元素的触发事件

  1. 键盘事件

键盘按下/抬起 onkeydown/onkeyup

  1. 浏览器事件

页面加载完成后执行 window.onload

滚浏览器滚动条执行 window.onscroll

3.3 文本内容属性

// 只获取文本内容;修改时不会解析标签
document.getElementsByTagName("div")[0].innerText
textContent
// 会获取标签内容;修改时会解析标签
document.getElementsByTagName("div")[0].innerHTML

3.4 元素的属性操作

以下方法均可对自定义属性和原始属性操作

  1. 获取元素属性
document.getElementById("box1").getAttribute("mytest")
  1. 设置属性
document.getElementById("box1").setAttribute("id", "box2")
  1. 移除属性
document.getElementsByTagName("div")[1].removeAttribute("id")

3.5 元素的样式设置

  • 对象.style
  • 对象.className
  • 对象.setAttribute("class","class名")
<style>
    .box2 {
        color: violet;
    }
</style>
<div id="b1">2222</div>
<script>
    document.getElementById("b1").setAttribute("class", "box2")
</script>
  • 对象.setAttribute("style","样式")

document.getElementById("b1").setAttribute("style", "color: red")

  • 对象.style.setProperty("CSS属性","CSS属性值")

document.getElementById("box1").style.setProperty("background-color","red")

  • 对象.style.cssText

document.getElementById("box1").style.cssText = "background-color:red; width:80px"

4. 节点*

HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点 document
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
  1. 节点类型

    document的节点类型 9、标签的节点类型 1、属性的节点类型 2、文本的节点类型 3

  2. 节点名称

    document的节点名称 #document、标签的节点名称 大写的标签名、属性的节点名称 属性名、文本的节点名称 #text

  3. 节点值

    document的节点值 null、标签的节点值 null、属性的节点值 属性值、文本的节点值 文本的内容

  4. 节点之间的关系

    父节点--parentNode

    父元素节点--parentElement

    子节点--childNodes:标签节点、文本节点、注释节点 得到的是伪数组

    子元素节点--children :标签节点

    总结:firstChild、lastChild、previousSibling、nextSibling获取到的都是文本,如果没有就是文本节点名称#text,

    firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签,如果没有就

    是空

  5. 节点的插入

    node.insertBefore(newnode,existingnode);此方法可在已有的子节点前插入一个新的子节点

    参数newnode是要插入的节点对象,existingnode是要添加新的节点前的子节点。

posted @ 2021-05-14 22:00  recreyed  阅读(53)  评论(0编辑  收藏  举报