JS 基础对象

news2024/11/27 0:57:58

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 对象

根据 id 获取单个 Element 对象

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

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

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

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

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

根据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>