4.JS内置对象
JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象
前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的, 具体见JS API 部分
内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
1.Math对象
随机数方法 random()
random() 方法可以随机返回一个小数,其取值范围是 [0,1)
举例:得到一个两数之间的随机整数,包括两个数在内
function getRandom(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
2.Date对象
Date 对象和 Math 对象不一样,他是一个构造函数,所以我们需要实例化后才能使用
- Date()方法的使用
获取当前时间必须实例化
var now = new Date(); console.log(now);
Date() 构造函数的参数
如果括号里面有时间,就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’,可以写成new Date(‘2019-5-1’)或者 new Date(‘2019/5/1’)
注意:
如果Date()不写参数,就返回当前时间
如果Date()里面写参数,就返回括号里面输入的时间
日期格式化
3.数组对象
1.数组对象的创建
创建数组对象的两种方式
- 字面量方式
- new Array()
2.添加删除数组元素的方法
3.数组排序
4.数组索引方法
5.数组转换为字符串
其他:
4.字符串对象
1.根据字符返回位置
2.根据位置返回字符(重点)
3.字符串操作方法(重点)
其他:
- replace() 方法用于在字符串中用一些字符替换另一些字符。
其使用格式如下:
replace(被替换的字符串, 要替换为的字符串);
- split()方法
split()方法用于切分字符串,它可以将字符串切分为数组。在切分完毕之后,返回的是一个新数组。
var str = 'a,b,c,d'; console.log(str.split(',')); // 返回的是一个数组 [a, b, c, d]
toUpperCase() //转换大写
toLowerCase() //转换小写
四.DOM
文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM树
注:
文档:一个页面就是一个文档,DOM 中使用 document 表示
元素:页面中的所有标签都是元素,DOM 中使用 element 表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示
1.获取元素
①.根据ID获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。
document.getElementById('id')
②根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
document.getElementsByTagName('标签名');
注:还可以获取某个元素(父元素)内部所有指定标签名的子元素.
element.getElementsByTagName('标签名');
③通过 HTML5 新增的方法获取
1. document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合 2. document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 3. document.querySelectorAll('选择器'); // 根据指定选择器返回
注意:
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);
④获取特殊元素(body,html)
1. doucumnet.body // 返回body元素对象 2. document.documentElement // 返回html元素对象
2.事件基础
事件三要素
- 事件源 (谁)
- 事件类型 (什么事件)
- 事件处理程序 (做啥)
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
常见的鼠标事件
4.操作元素
DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等
1.改变元素内容
element.innerText()//从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉 element.innerHTML()//起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
2.常用元素的属性操作
1. innerText、innerHTML 改变元素内容 2. src、href 3. id、alt、title
3.表单元素的属性操作
type、value、checked、selected、disabled
4.样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1. element.style 行内样式操作 2. element.className 类名样式操作
注意:
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高
操作元素总结
5.自定义属性的操作
获取属性值
element.属性 获取属性值。
element.getAttribute(‘属性’);
区别:
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性
设置属性值
element.属性 = ‘值’ 设置内置属性值。
element.setAttribute(‘属性’, ‘值’);
区别:
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
移除属性
element.removeAttribute(‘属性’);