API application Interface 应用接口
webAPI 使用JS完成一些有实际意义的工作——JS运行在浏览器中,可以增删查改浏览器允许其操作的数据。
操作文档(document):页面上看到的 Document Object Model DOM
操作窗口浏览器(browser) Browser Object Model BOM
1.文档对象
window.document 可以省略window document 代表看到的整个对象
1.如何找到某个或某些结点
document.querySelector(...) 参数是CSS中的选择器语法,使用字符串表示
1.元素选择器 p 2.ID选择器 #some-id 3.类选择器 .some-class
document.querySelector("htnl"); //找出html元素,一般找的都是符合条件的第一个
2.关于属性
1.html中的所有属性,全部表现查找出来的JS对象的属性
<img src='dog.jpg'>
var img = doument.querySelector('img');
img.src 查找或修改
2.标签的内容文字也是其属性,记作textContent
3.关于class 属性,当然也可以修改。使用classList属性代替
img.classList.add('一个类') img.classList.remove('一个类') img.classList.contains('一个类')
setTimeout(要执行的动作——一个函数,时间——单位ms) 只执行一次
setInterval(要执行的动作——一个函数,时间——单位 ms)每隔some time 执行一次
1.如何在文档树中定位结点 document.querySelector() document.querySelectorAll()
2.修改结点本身的属性
直接属性、textContent、classList
3.定时器的使用
4.变更树的结构
通过html修改某个结点的子孙 element.innerHTML =''
将内容作为普通文本来显示:
body.innerText 或者 body.textContent
完全按照结点的方式处理:
1.创建一个元素(结点) 文档树之外的结点
var e = document.createElement('img');
属性可以正常的赋值
e.id = ''; e.classList.add(...);
2.找到树中添加位置的父节点
var parent = document.querySelector('body');
parent.appendChild(e); //把e作为parent的最后一个孩子添加上去
事件驱动
当某事发生时,谁们 应该做些什么
事件源(用户) 事件 处理对象(按钮) 处理步骤(处理函数)
用onclick给btn赋值多个属性时,最后的属性会覆盖前面的,这时就需要使用addEventListener
事件的冒泡
阻止向上冒泡
JS的用法
1.js判等:== 与 === 有什么区别呢?
==会把不同类型转换成相同的类型。如果是不同的类型,使用===就直接返回false了。
var a = '0' ; var b = 0;
alert((a == b) + '__' +(a === b) )
最后输出的结果是 true __false
2.JS中的对象(关联数组)——JAVA中对象或者Map<String,Object>
(1)字面量定义:使用大括号 var o = {};
var o ={'name': '小怪','age':22'}
(2)访问属性(根据key对应value)
key无序,不是按照定义时的顺序
(3)可以随时添加新的Key
(4)数据类型可以是函数
(5)类似方法的定义和使用
o.自我介绍 = function(){console.log( `我叫${this.name},我的性别是${this.gender}` ) }
这里的this不能省略
(6)Java 中的类和对象封闭——定义时,属性数量、属性名称、方法数量、方法名称已经全部固定死了
JS中的更灵活。类的目标是对对象做限制,JS中不需要限制,所以没有类的概念。
但构造方法(初始化对象的过程是需要的)
1.变量没有类型,数据有类型
2.数据类型:数、字符串、布尔值、异常值(undefined、null)、数组(列表)、关联数组(对象)、函数
3.如何定义关联数组(对象)
(1)字面量——直接使用大括号 {key: value, key: value,....}
(2)使用构造方法的方式function Person(){... } var p = new Person()...
(3)使用对象中的属性: p.name p['name']
(4)易错的地方: p = person(); p = new person(); p = person;