Web阶段二 JS

最新推荐文章于 2022-09-19 19:06:59 发布

沐风游云

最新推荐文章于 2022-09-19 19:06:59 发布

阅读量100

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wdywxwxld/article/details/126852111

版权

一、思维导图

在这里插入图片描述

二、重点知识点

ECMAScript原始数据类型(基本数据类型)：
1. number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串。字符/字符串 “abc” “a” ‘abc’
3. boolean: true和false
4. null：一个对象为空的占位符
5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
  使用typeof运算符可判断数据类型
基本对象：
1. Function：函数(方法)对象
  1. 创建：
    1. var fun = new Function(形式参数列表,方法体); //忘掉吧
    2. function 方法名称(形式参数列表){
      方法体
      }
    3. var 方法名 = function(形式参数列表){
      方法体
      }
  2. 方法：
  3. 属性：
    length：代表形参的个数
  4. 特点：
    1. 方法定义时，形参的类型不用写，返回值类型也不写。
    2. 方法是一个对象，如果定义名称相同的方法，会覆盖
    3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关
    4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数
  5. 调用：
    方法名称(实际参数列表);
2. Array:数组对象
  1. 创建：
    1. var arr = new Array(元素列表);
    2. var arr = new Array(默认长度);
    3. var arr = [元素列表];
  2. 方法
    join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
    push()：向数组的末尾添加一个或更多元素，并返回新的长度。
  3. 属性
    length:数组的长度
  4. 特点：
    1. JS中，数组元素的类型可变的。
    2. JS中，数组长度可变的。
3. Boolean
4. Date：日期对象
  1. 创建：
    var date = new Date();
  2. 方法：
    toLocaleString()：返回当前date对象对应的时间本地字符串格式
    getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
5. Math：数学对象
  1. 创建：
    - 特点：Math对象不用创建，直接使用。 Math.方法名();
  2. 方法：
    random()：返回 0 ~ 1 之间的随机数。含0不含1
    ceil(x)：对数进行上舍入。
    floor(x)：对数进行下舍入。
    round(x)：把数四舍五入为最接近的整数。
  3. 属性：
    PI
6. Number
7. String
8. RegExp：正则表达式对象
  1. 正则表达式：定义字符串的组成规则。
    1. 单个字符:[]
      如： [a] [ab] [a-zA-Z0-9_]
      - 特殊符号代表特殊含义的单个字符:
        \d:单个数字字符 [0-9]
        \w:单个单词字符[a-zA-Z0-9_]
    2. 量词符号：
      ?：表示出现0次或1次
      *：表示出现0次或多次
      +：出现1次或多次
      {m,n}：表示 m<= 数量 <= n
      m如果缺省： {,n}:最多n次
      n如果缺省：{m,} 最少m次
    3. 开始结束符号
      ^:开始
      $:结束
  2. 正则对象：
    1. 创建
      1. var reg = new RegExp(“正则表达式”);
      2. var reg = /正则表达式/;
    2. 方法
      test(参数)：验证指定的字符串是否符合正则定义的规范
9. Global
  1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
  2. 方法：
    encodeURI()：url编码
    * 世界 = %E4%B8%96%E7%95%8C
    * 一个%一个字节
    decodeURI()：url解码
    encodeURIComponent()：url编码，编码的字符更多
    decodeURIComponent()：url解码
    parseInt()：将字符串转为数字
    * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
    isNaN()：判断一个值是否是NaN
    * NaN六亲不认，连自己都不认。NaN参与的==比较全部问false
    eval()：将 JavaScript 字符串作为脚本代码来执行
BOM方法
1. 与弹出框有关的方法：
  alert()：显示带有一段消息和一个确认按钮的警告框。
  confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
  * 如果用户点击确定按钮，则方法返回true
  * 如果用户点击取消按钮，则方法返回false
  prompt()：显示可提示用户输入的对话框。
  * 返回值：获取用户输入的值
2. 与打开关闭有关的方法：
  close()：关闭浏览器窗口。
  * 谁调用我，我关谁
  open()：打开一个新的浏览器窗口
  * 返回新的Window对象
3. 与定时器有关的方法：
  setTimeout()：在指定的毫秒数后调用函数或计算表达式。
  * 参数：
  * 1. js代码或者方法对象
  * 2. 毫秒值
  * 返回值：唯一标识，用于取消定时器
  clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
  setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
  clearInterval()：取消由 setInterval() 设置的 timeout。
核心 DOM - 针对任何结构化文档的标准模型
- Document：文档对象
  1. 创建(获取)：在html dom模型中可以使用window对象来获取
    1. window.document
    2. document
  2. 方法：
    1. 获取Element对象：
      1. getElementById()：根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
    2. 创建其他DOM对象：
      createAttribute(name)
      createComment()
      createElement()
      createTextNode()
  3. 属性
- Element：元素对象
  1. 获取/创建：通过document来获取和创建
    - document.getElementById(“id值”)：通过元素的id获取元素对象
  2. 方法：
    1. removeAttribute()：删除属性
    2. setAttribute()：设置属性
      操作Element对象：
    3. 修改属性值：
      1. 明确获取的对象是哪一个？
      2. 查看API文档，找其中有哪些属性可以设置
    4. 修改标签体内容：
      - 属性：innerHTML
        获取元素对象
        使用innerHTML属性修改标签体内容
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他5个的父对象
  - 特点：所有dom对象都可以被认为是一个节点
  - 方法：
    - CRUD dom树：
      - appendChild()：向节点的子节点列表的结尾添加新的子节点。
      - removeChild()：删除（并返回）当前节点的指定子节点。
      - replaceChild()：用新节点替换一个子节点。
  - 属性：
    - parentNode：返回节点的父节点。
响应式布局
同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
步骤：
1. 定义容器。相当于之前的table、
* 容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式：row
3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
* 设备代号：
1. xs：超小屏幕手机 (<768px)：col-xs-12
2. sm：小屏幕平板 (≥768px)
3. md：中等屏幕桌面显示器 (≥992px)
4. lg：大屏幕大桌面显示器 (≥1200px)
注意：
1. 一行中如果格子数目超过12，则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。
CSS样式和JS插件
1. 全局CSS样式：
  - 按钮：class=“btn btn-default”
  - 图片：
    - class=“img-responsive”：图片在任意尺寸都占100%
    - 图片形状
      - class=“img-rounded”：方形
      - class=“img-circle” ：圆形
      - class=“img-thumbnail” ：相框
  - 表格
    - table
    - table-bordered
    - table-hover
  - 表单
    - 给表单项添加：class=“form-control”
2. 组件：
  - 导航条
  - 分页条
3. 插件：
  - 轮播图
XML基本语法：
1. xml文档的后缀名 .xml
2. xml第一行必须定义为文档声明
3. xml文档中有且仅有一个根标签
4. 属性值必须使用引号(单双都可)引起来
5. 标签必须正确关闭
6. xml标签名称区分大小写
XML组成部分：
1. 文档声明
  1. 格式：<?xml 属性列表 ?>
  2. 属性列表：
    - version：版本号，必须的属性
    - encoding：编码方式。告知解析引擎当前文档使用的字符集，默认值：ISO-8859-1
    - standalone：是否独立
      - 取值：
        yes：不依赖其他文件
        no：依赖其他文件
2. 指令(了解)：结合css的
  - <?xml-stylesheet type="text/css" href="a.css" ?>
3. 标签：标签名称自定义的
  - 规则：
    - 名称可以包含字母、数字以及其他的字符
    - 名称不能以数字或者标点符号开始
    - 名称不能以字母 xml（或者 XML、Xml 等等）开始
    - 名称不能包含空格
4. 属性：
  id属性值唯一
5. 文本：
  - CDATA区：在该区域中的数据会被原样展示
    - 格式： <![CDATA[ 数据 ]]>
XML约束：规定xml文档的书写规则
- 作为框架的使用者(程序员)：
  1. 能够在xml中引入约束文档
  2. 能够简单的读懂约束文档
- 分类：
  1. DTD：一种简单的约束技术
    - 引入dtd文档到xml文档中
      - 内部dtd：将约束规则定义在xml文档中
      - 外部dtd：将约束的规则定义在外部的dtd文件中
        本地：
        网络：
  2. Schema：一种复杂的约束技术
    - 引入：
      1.填写xml文档的根元素
      2.引入xsi前缀. xmlns:xsi=“http://www.w3.org/2001/XMLSchema-instance”
      3.引入xsd文件命名空间. xsi:schemaLocation=“http://www.it.cn/xml student.xsd”
      4.为每一个xsd约束声明一个前缀,作为标识 xmlns=“http://www.it.cn/xml”
解析xml的方式：
1. DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树
  - 优点：操作方便，可以对文档进行CRUD的所有操作
  - 缺点：占内存
2. SAX：逐行读取，基于事件驱动的。
  - 优点：不占内存。
  - 缺点：只能读取，不能增删改
Jsoup：jsoup 是一款Java 的HTML解析器，可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API，可通过DOM，CSS以及类似于jQuery的操作方法来取出和操作数据。
- 快速入门：
  - 步骤：
    1. 导入jar包
    2. 获取Document对象
    3. 获取对应的标签Element对象
    4. 获取数据
  - 代码：
    //2.1获取student.xml的path
    String path = JsoupDemo1.class.getClassLoader().getResource(“student.xml”).getPath();
    //2.2解析xml文档，加载文档进内存，获取dom树—>Document
    Document document = Jsoup.parse(new File(path), “utf-8”);
    //3.获取元素对象 Element
    Elements elements = document.getElementsByTag(“name”);
    System.out.println(elements.size());
    //3.1获取第一个name的Element对象
    Element element = elements.get(0);
    //3.2获取数据
    String name = element.text();
    System.out.println(name);
对象的使用：
1. Jsoup：工具类，可以解析html或xml文档，返回Document
  - parse：解析html或xml文档，返回Document
    - parse(File in, String charsetName)：解析xml或html文件的。
    - parse(String html)：解析xml或html字符串
    - parse(URL url, int timeoutMillis)：通过网络路径获取指定的html或xml的文档对象
2. Document：文档对象。代表内存中的dom树
  - 获取Element对象
    - getElementById(String id)：根据id属性值获取唯一的element对象
    - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
    - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
    - getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
3. Elements：元素Element对象的集合。可以当做 ArrayList来使用
4. Element：元素对象
  1. 获取子元素对象
    - getElementById(String id)：根据id属性值获取唯一的element对象
    - getElementsByTag(String tagName)：根据标签名称获取元素对象集合
    - getElementsByAttribute(String key)：根据属性名称获取元素对象集合
    - getElementsByAttributeValue(String key, String value)：根据对应的属性名和属性值获取元素对象集合
  2. 获取属性值
    - String attr(String key)：根据属性名称获取属性值
  3. 获取文本内容
    - String text()：获取所有子标签的纯文本内容
    - String html()：获取标签体的所有内容(包括子标签的字符串内容（标签和文本）)
5. Node：节点对象
  - 是Document和Element的父类
快捷查询方式：
1. selector：选择器
  - 使用的方法：Elements select(String cssQuery)
    - 语法：参考Selector类中定义的语法
2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言
  - 使用Jsoup的Xpath需要额外导入jar包。
  - 查询w3cshool参考手册，使用xpath的语法完成查询
  - 代码：

//1.获取student.xml的path
String path = JsoupDemo6.class.getClassLoader().getResource("student.xml").getPath();
//2.获取Document对象
Document document = Jsoup.parse(new File(path), "utf-8");
		
//3.根据document对象，创建JXDocument对象
JXDocument jxDocument = new JXDocument(document);
		
//4.结合xpath语法查询
//4.1查询所有student标签
List<JXNode> jxNodes = jxDocument.selN("//student");
for (JXNode jxNode : jxNodes) {
	System.out.println(jxNode);
}
		
System.out.println("--------------------");
		
//4.2查询所有student标签下的name标签
List<JXNode> jxNodes2 = jxDocument.selN("//student/name");
for (JXNode jxNode : jxNodes2) {
	System.out.println(jxNode);
}
		
System.out.println("--------------------");
		
//4.3查询student标签下带有id属性的name标签
List<JXNode> jxNodes3 = jxDocument.selN("//student/name[@id]");
for (JXNode jxNode : jxNodes3) {
	System.out.println(jxNode);
}
System.out.println("--------------------");
//4.4查询student标签下带有id属性的name标签 并且id属性值为it
		
List<JXNode> jxNodes4 = jxDocument.selN("//student/name[@id='it']");
for (JXNode jxNode : jxNodes4) {
	System.out.println(jxNode);
}