昨日内容回顾

JS基础介绍

JavaScript是一门前端语言，只是长得像Java，实际与Java无关。
JS基本使用
- 变量与常量
  
  定义变量使用var或let关键字，定义常量使用const关键字，常量不可修改绑定关系。
- 基本数据类型
  
  数字(Number)、字符(String)、对象之数组(Array)、对象之自定义对象(Object)
- 运算符
  
  四则运算、逻辑运算符
- 流程控制
  
  if语句、switch语句、while循环语句
- 函数
  
  使用function关键字定义、自带arguments关键字接收所有参数
- 内置对象
  
  时间对象、JSON对象

今日内容概要

BOM操作
DOM操作
jQuery类库

今日内容详细

BOM操作

BOM全称为Bowser of model，即浏览器对象模型，BOM操作就是对浏览器窗口的操作。

对浏览器窗口的操作使用window关键字，表意清晰的情况下window可忽略，直接写指令。

window.open(?url,?target,?features)  //打开新窗口，指定网址、引用名及窗口样式(尺寸、边距等)
window.close()  //关闭当前窗口
window.navigator.userAgent  //获取浏览器版本
window.history.forward()  //历史记录前进一页
window.history.back()  //历史记录后退一页
window.location.href  //获取当前页面所在的网址，也可以再加赋值符号和网址跳转
window.location.reload()  //刷新当前页面
window.alert()  //警告框
window.confirm()  //确认框，有返回值，true或者false
window.prompt()  //提示框，有返回值，为提示框中输入的结果
window.setTimeout(handler,?timeout,...arguments)
//设置定时任务，指定需要做的操作、倒计时时间(毫秒)，如果操作需要传参数，最后填入操作需要的参数
window.clearTimeout()  //清除定时任务
window.setInterval(handler,?timeout,...arguments)
//设置循环任务，指定需要做的操作、间隔时间(毫秒)，如果操作需要传参数，最后填入操作需要的参数。循环任务在结束之前会一直运行，若生成提示框则会造成提示框的重叠。
window.clearInterval()  //清除循环任务

DOM操作

DOM全称为Document of model，即文档对象模型，通过DOM可以访问HTML文件内的所有元素。

查找标签

关键字为get后加查找标签的方式：

document.getElementById()  //通过id
document.getElementsByClassName()  //通过类名
document.getElementsByTagName()  //通过标签名

对于一个标签元素，通过点的形式可以查看相关的标签元素：

parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

生成及编辑标签

let aEle = document.createElement('a')  //创建新标签
aEle.setAttribute('name','value')  //设置属性值
aEle.getAttribute()  //查看属性值
aEle.removeAttribute()  //删除属性
通过点的形式可以查看标签的属性，也可通过赋值改变标签对应属性，通过.appendChild可以为标签添加子标签。

操作CSS与class

1.js操作标签css样式
	标签对象.style.属性名 = ''
2.js操作标签class属性
	标签对象.classList.add()
  	标签对象.classList.contains()
    标签对象.classList.remove()
    标签对象.classList.toggle()  //在有与无之间切换

事件

常见的事件有onclick(点击)、onfocus(聚焦)、onblur(模糊)、onchange(变化)。

事件的本质为标签的属性，通过为事件关键字绑定(赋值)对应的函数实现对应的操作。可以直接在标签内添加对应事件，但一般推荐在最下方script标签内通过点的形式赋值。

this指代的就是当前被操作的标签对象本身，随着所在this所在位置变化其指代内容也会变化。

XXX. onl oad 等待XXX加载完毕之后再执行后面的代码。

jQuery类库

jQuery原则：write less，do more.

特点

加载速度快。
选择器更多更好用。
一行代码走天下。
支持ajax请求(重点)。
兼容多浏览器。

加载方法

通过script内的src属性导入HTML文件，又分为本地加载及CDN(内容分发网络)加载。

本地加载，直接将对应代码下载至本地，脱机也可使用。
CDN加载，适用范围更广，但速度稍慢。

使用方法

dollar($)符号之后直接书写jQuery语句。

js代码与jQuery代码对比
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

    $('p').first().css('color','yellow').next().css('color','blue')

标签对象与jQuery对象

1.不同的对象能够调用的方法是不同的，在编写代码的时候一定要看清楚手上是什么对象。

2.两者可以互相转换：
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]

标签：类库,jQuery,对象,标签,window,BOM,操作
From： https://www.cnblogs.com/akazukis/p/16960948.html

BOM操作、DOM操作与jQuery类库