JS 基础对象

JS 对象

JSON-基本语法

• 定义

var 变量名 = '{"key1":value1,"key2":value2}';

实例：

var userStr = '{"name":"Joker","age":18,"addr":["BeiJing","Shanghai","Hongkong"]}';

• JSON 字符串转为 JS 对象

var jsObject = JSON.parse(userSter);

• JS 对象转为 JSON 字符串

var jsonStr = JSON.stringify(jsObject);

BOM-浏览器对象模型

• JS Window 浏览器窗口对象
• JS Screen 屏幕对象
• JS Location 地址栏对象
• JS History 历史记录
• JS Navigator 浏览器对象
• JS 弹出窗
• JS Timing
• JS Cookies

1. Window

• 介绍：浏览器窗口对象
• 获取：使用window.xxx获取,其中window.可以省略。window.alert("Hello"); alert("Hello");
• 属性
  • history：对 History 对象的只读引用；
  • location： 用于窗口或者框架的 Location 对象；
  • navigator： 对 navigator 对象的只读引用。
• 方法
  • alert() : 显示带有一段消息和一个确认按钮的警告框；
  • confirm() : 显示带有一段消息及一个确认按钮的和取消按钮的对话框；
  • setInterval(): 按照指定的周期（以毫秒计）来调用函数或计算表达式；
  • setTimeout(): 在指定毫秒数后调用函数或者表达式。

2. Location

• 介绍：地址栏对象
• 获取：使用window.location获取,其中window.可以省略。window.location.属性; location.属性;
• 属性：
  • href： 设置或返回完整的 URL： location.href = "https"//www.google.com";

DOM-文档对象模型

• 将标记语言的哥哥组成部分封装成对应的对象：

  • Document 整个文档对象
  • Element 元素对象
  • Attribute 属性对象
  • Text 文本对象
  • Comment 注释对象

• JavaSpript 通过 DOM 就能对 HTML 进行操作：

  • 改变 HTML 元素的内容；
  • 改变 HTML 元素的样式 CSS；
  • 对 HTML DOM 事件做出反应；
  • 添加和删除 HTML 元素。

• DOM 是 W3C 的标准，定义了方位 HTML 和 XML 文登的标准，有 3 部分：

  1. Core DOM - 所有文档类型的标准模型：

     • Document 整个文档对象
     • Element 元素对象
     • Attribute 属性对象
     • Text 文本对象
     • Comment 注释对象

  2. XML DOM - XML 文档的标准模型(Core DOM 的子集)

  3. HTML DOM - HTML 文档的标准模型

     Core DOM 的扩展，在 Core DOM 的基础上进行扩充，将 HTML 标签封装成对象比如：

     • Image是封装自 <img>
     • Button是封装自 <input type='button'>

• 获取 Element 对象

  1. 根据 id 获取单个 Element 对象

  var h1 = document.getElementById("h1");
  

  2. 根据标签名获取 Element 对象数组

  var divs = document.getElementsByTagName("div");
  

  3. 根据name属性值获取 Element 对象数组

  var hobbys = document.getElementsByName("hobby");
  

  4. 根据c;ass属性值获取 Element 对象数组

  var clss = document.getElementsByClassName("cls");
  

JS 事件监听

事件绑定

• 方式 1：通过 HTML 标签中的事件属性进行绑定

  <input
      type="button"
      onclick="on()"
      value="Button"
  />
  <script>
      function on() {
          alert("clicked!");
      }
  </script>
  

• 方式 2：通过 DOM 元素属性绑定

  <input
      type="button"
      id="btn"
      onclick="on()"
      value="Button"
  />
  <script>
      document.getElementById("btn").onClick = function () {
          alert("clicked!");
      };
  </script>
  

常见事件

• onclick 点击
• onblur 元素失去焦点
• onfocus 元素获取焦点
• onload 某个页面或图像被完成加载
• onsubmit 等表单提交时处罚该事件
• onkeydown 键盘按键被按下
• onmouseover 鼠标移动到某元素之上
• onmouseout 鼠标从某元素移开