2020-11-24_JavaScript

JavaScript

JavaScript三种写法

1. <a href="javascript:alert('Hello')" ></a>
2. <script type="text/javascript">js代码</script>
3. <script type="text/javascript" src="js文件位置"></script>

js类型中的boolean

* 0、NaN、Undefined、空字符串、null均可以表示false；

JavaScript对象

1. 内部对象（包括本地对象、内置对象):
  	1. 本地对象可以new实例，通过实例调用方法函数；
  	2. 内置对象不能使用new关键字创建实例，方法调用也不需要实例调用；
2. 宿主对象：指的是BOM和DOM中的所有对象；
3. 自定义对象：

本地对象Date和String(重点而已)、了解Math

• Date
  1. getFullYear()/setFullYear();
  2. getDate()/setDate();
  3. getMonth/setMonth();
  4. getHours()/setHours();
  5. getMinutes()/setMinutes();
  6. getSeconds()/setSeconds();
• String
  1. toLowerCase();
  2. toUpperCase();
  3. substring();
  4. charCodeAt(index);
  5. fromCharCode();

BOM和DOM内置对象

• BOM(Browser Object Model)

  1.1 window:location表示地址栏；history历史记录；document窗口内容；navigator浏览器信息。

  1. 2 方法：

     1.2.1 alert(“警告框”)、confirm(“确认框”);

     1.2.2 setInterval();周期性

     1.2.3 setTimeout();

  1.2 location: href/pathname/…;

• DOM(Doucument Object Model）：通过程序解析结构化文档（xml，html）的时候，在内存中生成的包含当前结构化文档中所有内容的一个对象模型

  1. 查找

     • getElementById();

     • getElementsByName();

     • getElementsByTagName();

     • parentNode;

     • document.documentElement(获取html根节点);主要作用：clientWidht;clientHeight;

     • document.body(获取body节点);

  2. 创建和添加

     • document.createElement();
     • appendChild();(在父节点追加子节点)

  3. 删除

     • removeChild();父节点删除子节点；

  4. 文本操作

     • innerHTML：

       • 读取：获取标签内的所有内容（包含空格，html代码）

       • 赋值：设置标签的内容，如果包含html代码，那么代码会被浏览器解析

     • innerText:

       • 读取：读取标签内的纯文本
       • 赋值：设置标签的文本信息，如果包含html代码，那么代码不会被浏览器解析

  5. 常见实践

     1. onblur: 用户离开对象，失去焦点；
     2. onchange:用户改变对象的值；
     3. onclick:用户点击对象；
     4. onkeydown:按下键盘；
     5. onkeypress：按压键盘；
     6. onload:页面加载完成；
     7. onmousemove:鼠标指针在对象上移动；
     8. onmouseover：鼠标指针移动到对象上；
     9. onmouseout：鼠标指针移出对象；