JS-进阶(对象、BOM、DOM、事件)

  • 认识对象:JavaScript中“一切皆对象”,如字符、数值、函数、数组等都是对象。JavaScript提供了自定义对象和内置对象。
    • 现实世界中的事物都可以做对象。
  • 属性和方法
    • 属性:成员变量,表示对象的状态
    • 方法:就是对象的行为(做什么)
  • 创建和删除
    • 创建:new关键字创建对象,然后赋值给变量。使其可以访问对象的属性和方法
    • 删除:delete关键字,使对象和属性方法断开联系。使之不能操作(返回true和false)
  • 内置对象:JavaScript提供了很多的内置对象,可以直接实例化然后进行调用。如Math、String、Date等;
    • Date对象:用于获取日期和时间。
      • toLocaleString():把Date对象转换为字符串
      • getHours()、getMinutes()、getSeconds():获取时分秒
      • getMilliseconds():获取毫秒
    • Math对象:一些数学函数
      • random():获取0~1之间的随机数
      • round(x):四舍五入的取整
      • sqrt(x):x的平方根
    • String对象:操作字符串
      • split(字符串,分隔符):分割为数组
      • length:获取字符串的长度
      • search(substr):搜索子串
      • charAt(index):返回索引处的值
  • Array数组:可以存放各种类型的数据,一般进行批操作。
    • 名[key] = value进行赋值
    • 常用length和toString()方法
    • 二维数组:数组中的数组。数组中的每一个索引都是一个新的数组。

  • BOM:用于操纵浏览器的行为和特征。 window是浏览器的窗口、整个BOM的核心
  • window
    • navigator:浏览器程序
    • screen:屏幕
    • location
    • history
    • document
  • window对象表示整个浏览器窗口,用于获取浏览器窗口的大小、位置,或设置定时器等。
  • screen对象用于获取用户计算机的屏幕信息,如屏幕分辨率、颜色位数等。
  • location对象用于获取和设置当前网页的URL地址。
  • history对象主要用于页面前进和后退(以前是用于关于历史记录方面,但是出于隐私不再允许)
  • document对象用于处理网页文档,通过对象可以访问文档中的所有元素。

  • DOM:表示和处理文档的应用程序接口,可用于动态访问、更新文档的内容、结构和样式。
  • 访问节点:DOM中每一个节点都是一个对象。都具有一些属性和方法。JavaScript通过使用节点的属性和方法可以访问指定的元素和相关元素,以得到文档中的各个元素。
    • 访问指定元素:
      • getElementById():获取指定元素的对象引用
      • getElementByTagId():获得指定标签的元素对象集合
  • 访问相关元素
    • children:可以访问子元素列表,如序列中得(li,document.getElementById(). children)
    • parentNode
    • childNodes :元素节点的子节点数组
    • firstChild
    • lastChild
    • previousSibling:前一个兄弟节点
    • nextSibling
  • 元素对象的常用操作
    • 创建节点
      • createElement
      • createTextNode
    • 节点操作
      • appendChild
      • removChild
      • insertBefore
  • 元素属性与内容操作
    • innerHTML
    • className:设置和获取类
    • style

事件:用户访问页面时执行的操作
事件处理一般分三步:发生、启动处理程序、处理程序作出反应。
事件调用:JavaScript中调用、html中调用
鼠标事件
键盘事件
表单(焦点)事件
页面事件

HTML 事件是发生在 HTML 元素上的事情,可以是浏览器行为,也可以是用户行为,时间发生时可以做一些事情(执行一些代码)
HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

<some-HTML-element some-event="JavaScript 代码">
//点击事件,修改元素,和修改自身
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?button>
<button onclick="displayDate()">现在的时间是?button>
<button onclick="this.innerHTML=Date()">现在的时间是?button>
可以直接执行 JavaScript 代码,调用 JavaScript 函数,指定自己的事件处理程序
//常见的HTML事件
onchange    HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout  用户从一个HTML元素上移开鼠标
onkeydown   用户按下键盘按键
onload  浏览器已完成页面的加载

你可能感兴趣的:(网页设计)