JavaScript知识简单整理

概述

概念：一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了

功能

可以来增强用户的html页面的交互过程，可以控制html元素，让页面有一些动态效果，增强用户的体验

JavaScript = ECMAScript + BOM + DOM

ECMAScript：客户端脚本语言的标准

基本语法

与html结合方式

内部JS
- 定义
  基本的对象
  - Function对象：描述一个函数对象
    - 创建：
      - 方式一
        
        var fun = new Function(形参列表, 方法体);
      - 方式二
        
        function 方法名称(形参列表) { 方法体 }
      - 方式三
        
        var 方法名 = function(形参列表) { 方法体 }
    - 方法：
    - 属性：
      - length：形参的个数
    - 特点：
      - 方法定义时，形参的类型不用写，返回值类型也可不写
      - 方法是一个对象，如果定义名称相同的方法，会覆盖
      - 在JS中，方法的调用只与方法的名称有关和参数列表无关
      - 在方法声明中，有一个隐藏的内置对象（数组），arguments，封装所有的实际参数，类似于Java中的可变长参数。
        
        function fuc() { /* 查看隐藏参数的长度 */ alert(arguments.length); } //求一个函数所有参数的和 function sum() { var result = 0; for(int i = 0; i < arguments.length; i++){ if(typeof(arguments[i]) == "number") result += arguments[i]; } return result; }
    - 调用：
      - 方法名称(实际参数列表)
  - Array对象：数组对象
    - 创建：
      - var arr = new Array(元素列表);
      - var arr = new Array(默认长度);
      - var arr = [元素列表];
    - 方法
    - 属性
    - 特点
      1. JS中数组的元素的类型是可变的
  - JS中的自定义对象
    - 对象的定义
```
var obj = new Object();  // 对象实例（空对象）
obj.Attr = value;        // 定义一个属性
obj.func = function (){}  // 定义一个函数
```
    - 对象的访问
```
alert(obj.Attr);
alert(obj.fuc());
```
  - 花括号形式的自定义对象
```
var obj = {
    Attr1: value1,       // 定义一个属性
    Attr2: value2,       // 定义一个属性
    func: function() {}  // 定义一个函数
} // 对象实例
```
  JS中的事件
  - onload：加载完成事件，页面加载完成之后，常用与做页面JS代码的初始化操作
  - onclick：单击事件，常用按钮的点击响应事件
  - onblur：失去焦点事件，常用语输入框失去焦点后验证其输入内容是否合法
  - onchange：内容发生改变事件，常用于下拉列表和输入框内容发生改变后的操作
  - onsubmit：表单提交事件，常用于表单提交前，验证所有表单项是否合法
  事件注册
  
  事件的注册
  
  告诉浏览器，当时间响应后要执行那些代码，叫做事件注册或者事件绑定
  - 静态注册事件：通过html标签的属性直接赋予时间响应后的代码，这种方式我们称为静态注册
  - 动态注册事件：事先通过JS代码得到标签的DOM对象，然后再通过DOM对象.事件名=function(){} 这种形式赋予事件
    
    动态注册基本步骤：
    1. 获取标签对象
    2. 标签对象事件名 = function(){}
  onload事件
```
    OnloadEvent
    
```
  onclick事件
```
    OnloadEvent
    



    
    
```
  onblur事件
```
    OnblurEvent
    



    用户名：

    密码：
```
  onchange事件
```
    OnchangeEvent
    



    请选择你的英雄：
    

    请选择你的英雄：
    
```
  onsubmit事件
```
    OnsubmitEvent
    



    
        
    

    
        
    
```
  DOM模型
  
  DOM全称是 Document Object Model 文档对象模型
  
  吧文档中的标签，属性，文本转换为对象来管理。
  
  DOM模型，体现在 document 对象。Document文档，由一个树状结构保存。
  1. Document管理了所有的HTML对象内容
  2. document他是一种树状结构的文档，有层级关系。
  3. 把所有的标签都对象化
  4. 可以通过document访问所有的标签对象
  Document对象的方法介绍
  
  document.getElementById(elementId)
  - 通过标签的ID属性查找标签dom对象，elementId是标签的ID属性值
  document.getElementByName(elementName)
  - 通过标签的name属性查找标签的dom对象，elementName标签的name属性值
  document.getElementByTagName(tagname)
  - 通过标签名查找标签dom对象，tagname是标签名
  document.createElement(tagName)
  - 通过给定的标签名。创建一个标签对象，tagName是要创建的标签名
  节点的常用属性和方法
  
  节点就是标签对象
  
  方法
  - getElementByTagName(tagname) 方法
  通过具体的元素节点调用该方法，可以回去当前节点的制定标签名子节点
  - appendChild(oChildNode) 方法
    
    增加一个子节点，oChildNode是要增加的子节点
  属性
  - childNodes：当前节点的所有子节点
  - firstChild
  - lastChild
  - parentNode：当前节点的父节点
  - nextSibling：当前节点的下一个节点
  - previousSibling：当前节点的上一个节点
  - className：获取或设置标签的 class 属性值
  - innerHTML：获取/设置其实标签和恶结束标签中的内容
  - innerText：获取/设置其实标签和恶结束标签中的文本

网页前端

JavaScript知识简单整理

概述

概念：一门客户端脚本语言

功能

JavaScript = ECMAScript + BOM + DOM

ECMAScript：客户端脚本语言的标准

基本语法

与html结合方式

基本的对象

JS中的事件

事件注册

事件的注册

onload事件

onclick事件

onblur事件

onchange事件

onsubmit事件

DOM模型

Document对象的方法介绍

节点的常用属性和方法

方法

属性

相关

网页前端video播放m3u8(HLS)

标签