Day78-Web APIs第一阶段

柔光的暖阳◎ 2023-03-02 05:26 6阅读 0赞

## 字符串转换为数组split(‘分隔符’) ##

![在这里插入图片描述][20200728081837293.png]

## 替换字符,‘a’替换为‘b’，replavce(会替换第一个字符) ##

![在这里插入图片描述][20200728081948230.png]

## 简单数据类型和复杂类型 ##

简单数据类型--  又叫基本数据类型,又叫值类型，string,number,boolean,undefined,null
        						存放到栈里面
        复杂数据类型-- ， 又叫引用数据类型，Object,Arry,Date等
        						栈里面存的是地址，真正的值存放在堆里面
        						一、Javascript组成

## JavaScript的实现包括以下3个部分： ##

1、核心（**ECMAScript）** ：描述了JS的语法和基本对象。  
2、文档对象模型 **（DOM）**：处理网页内容的方法和接口。 --Web APIs  
3、浏览器对象模型 **（BOM）**：与浏览器交互的方法和接口。 --Web APIs

## API ##

API，应用程序编程接口，是给程序员提供的一种工具。

## Web API ##

Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）  
比如：alert(弹出一个窗口)

## 文档、元素、节点 ##

文档：一个页面就是一个文档，DOM中用document表示  
元素：页面中所有标签都是元素，DOM使用element表示  
节点 网页中的所有内容都是节点（标签、属性、文本、注释等），DOM用node表示

## 获取元素 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]

## 事件三要素 ##

![在这里插入图片描述][2020072810312255.png]

## 改变元素的小案例二—innderText（非标准） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20200728104917878.png]  
![在这里插入图片描述][20200728104929936.png]

## 改变元素的小案例一—innderHTML（常用，w3c标准） ##

![innderHTML][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]

## 显示隐藏文本框内容—案例一 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][20200728181611398.png]

## 通过className改变元素样式 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 5]

![在这里插入图片描述][20200728182945367.png]  
又想保留之前的class：  
![在这里插入图片描述][20200728183215868.png]

## 操作元素的总结 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 6]

## 排他思想 ##

1.所有元素全部清除样式(干掉其他人)  
2.给当前元素设置样式(留下我自己)  
3.注意顺序不能颠倒,首先干掉其他人,再设置自己

[20200728081837293.png]: /images/20230208/3b19be290ac94d5693a6e78797f15ad9.png
[20200728081948230.png]: /images/20230208/8c01248539bf455dab0a350d3541c16b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70]: /images/20230208/c02131cdf4554ed99f32e0d09c164823.png
[2020072810312255.png]: /images/20230208/00741e66adbd402286d6a01940dec39f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 1]: /images/20230208/c4f130a3e46540c28ff1bfd93863a3a9.png
[20200728104917878.png]: /images/20230208/5d5dc409f11c44119683840eedb3d723.png
[20200728104929936.png]: /images/20230208/47f3a74d2882411097c25cbb714ae3cb.png
[innderHTML]: /images/20230208/0403dedabc1b4e96863463a067f81e2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 2]: /images/20230208/65e5dd7e107243c88807150417caf8f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 3]: /images/20230208/ac1c5f1c243c4b0b8ec61a9436440e68.png
[20200728181611398.png]: /images/20230208/bc136f8ba7ef46738bbf2df7aac35bf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 4]: /images/20230208/1197ca248ec5458baff14792606bcf5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 5]: /images/20230208/ee56f6b4bcce4430aaaab1a74fb789d5.png
[20200728182945367.png]: https://img-blog.csdnimg.cn/20200728182945367.png
[20200728183215868.png]: https://img-blog.csdnimg.cn/20200728183215868.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2020072821222743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21tbW1tbW1tbW16,size_16,color_FFFFFF,t_70