❤️‍JavaScript（二）

• BOM操作
• DOM操作
• jQuery类库

❤️‍BOM操作

BOM（Browser object Model）是指浏览器对象模型，它的功能就是让javascrip能和浏览器进行“交流对话”；操作浏览器部分功能的API。比如让浏览器自动滚动；

?事件：js是以事件驱动为核心的一门语言

?事件的三要素：事件源、事件、事件驱动程序。

举个例子：
我们用手去按开关，灯亮了。这件事情里；事件源是：手、事件：按开关、事件驱动程序是：灯的开和关。

以上我们的到了一个结论：谁已发的后续事件，谁就是事件源。

?总结：

• 事件源：已发后续事件的HTML标签
• 事件：js已经定义好的了（下图）
• 事件驱动程序：对样式和HTML的操作，也就是DOM

?常见的事件：

代码演示：

window.open ()   打开一个浏览器窗口
window.open(window.open('http://www.baidu.com/' ,"目标"，"窗口的大小")   
window.close()		关闭浏览器窗口
navigator.userAgent
	 标识自己是一个浏览器
history.forward()  
	 前进一页
history.back()  
	 后退一页
window.location.href
	 获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location.reload()
	 刷新当前页面

?提示框：

alert()		进入界面窗口弹出的警告框
confirm()	确认框，点击过后会有一个返回值
prompt()	提示框

?计时器相关操作(*)：

1.setTimeout () 定时任务

 function showMsg(){
        alert('代开页面后弹出来的弹窗。')
 } 
    let t =setTimeout(showMsg,3000)  //等待3000毫秒过后弹出的弹窗
    clearTimeout(t)  //立刻取消定时任务
    
2.循环定时任务

let s;  //提前申明好变量，方便后面使用
   function func(){
        alert('代开页面后弹出来的弹窗。')
   }
   s =setInterval(func,3000)  //每隔3000毫秒后弹出弹窗
    function inner(){
       clearInterval(s)	//取消定时任务
    }
    setTimeout(inner,9000)

?小知识点：

1.js中变量名的命名风格推荐使驼峰体
2.js代码查找到的标签如果需要反复的使用可以用变量接收，规律是
		xxxEle
3.js中如果变量名中有下划线，执行的的时候会自动将其变为驼峰体

❤️‍DOM操作

DOM（Document object Model）是指文档对象模型，DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

?DOM就是由节点组成的。

既然DOM操作是通过js代码来操作标签，所以我们徐亚搜先学习如何查找标签之后才能给标签绑定一些js代码（DOM操作）

?1.解析过程：

	HTML加载完毕过后，渲染引擎会在内存中吧HTML文档生成有DOM树，getElementById是获取内存中DOM上的元素节点。然后操作的时候修改的是该元素的"属性"。

?2.DOM的数据结构如下：

在上图我们可以看到，在HTML中，一切都是节点：

元素节点：HTML标签

文本节点：标签中的文字（eg：标签中的空格，换行）

属性节点：标签的属性

?DOM的作用：

• 找对象（元素节点）
• 设置元素的属性值
• 设置元素的样式
• 动态创建和删除元素
• 时间的触发响应：事件源、事件、事件的驱动程序

?5.DOM节点的获取：

方式一：通过id获取单个标签
var div = document.getElementByid("d1");

方式二：通过 类名 获得 标签数组，所以有s
var arr1 = document.getElementsByClassName("c1")

方式三：通过标签名获得标签数组，所以有s
var arr2 =document.getElementsByTagName("span") 

获取标签的其他方式：

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

❤️‍操作节点

//js代码创建一个标签
let aEle = document.createElement('a');

//js代码操作标签属性
只能添加默认的属性
aEle.href ='http://www.baidu.com/'

兼容默认的属性和自定义的属性
setAttribute() 
getAttribiute('age')
removeAttribute('age')

//js代码操作标签文本
aEle.innerText = '标签内添加的文本'

//js代码查找div标签并将a追加到div内部
 let divEle=document.getElementByTagName('div')[0]
 divEle.appendChild(aEle)

在标签中使用到的小方法：
.innerText	获取标签内部所有的文件内容
.innerText='文本'	替换/设置标签内部的文件（不识别标签语法）

推荐：
.innerHTML	获取标签内部所有的标签，包含文本
.innerHTML="文本"	替换/设置标签内部的文本（识别标签语法）

❤️‍获取值操作

1.针对用户输入和用户选择的标签（可以拿到用户输入的名字）
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files  filelist[文件对象，文件对象。。]
    标签对象.files[0]  想要获取的文件对象

❤️‍class和css操作

1.js 操作标签css样式
	标签对象.style.属性名
2.js操作标签class属性
标签对象.classList 当前标签都有哪些样式类
标签对象.classList.add() 添加一个类属性
标签对象.classList.contains() 判断标签内是否有这个值
标签对象classList.remove()	移除某个类属性
标签对象classList.toggle()	如果有这个类属性就删掉如果没有就加上

❤️‍事件

事件简单的理解为通过js代码给HTML标签上绑定一些自定义的功能

?常见的事件：

onclick		用户点击某个对象时调用的事件句柄
ondblclick	用户双击某个对象时调用的事件句柄
onfocus		元素获得焦点   //输入框
onblur		元素失去焦点	应用场景：表单验证，,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证
onchange	域的内容被改变		应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击，使用的对象是form。

?绑定事件的多种方式：

方式一：
    function showMsg(){
        let msg=confirm('按按按，按什么按');
        console.log(msg)
    }
    <button onClick="showMsg">
    
方式二：
    <input type="button" value="快快快" id="d1">

        <script>
            function showMsg() {
                let msg = prompt('你确定要这样吗?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('谁在那里点我!!!')
            }
        </script>
        

事件函数中的this关键字
	this指代的就是当前被操作的标签对象本身
    如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
    
onload方法
	xxx.onload 等待xxx加载完毕之后在执行后面的代码

注意：

this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参。

❤️‍事件实战案例

事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能

常见事件
	onclick        当用户点击某个对象时调用的事件句柄
 	onfocus        元素获得焦点            
	onblur         元素失去焦点              
	onchange       域的内容被改变    
	......
 
绑定事件的多种方式
	<!--绑定事件的方式1-->
    <button onclick="showMsg()">快按我</button>
    <!--绑定事件的方式2-->
    <input type="button" value="快快快" id="d1">

        <script>
            function showMsg() {
                let msg = prompt('你确定要这样吗?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('谁在那里点我!!!')
            }
        </script>
     
事件函数中的this关键字
	this指代的就是当前被操作的标签对象本身	
 	如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
 
onload方法
	XXX.onload 等待XXX加载完毕之后再执行后面的代码

❤️‍jQuey类库

?简介：

1.jQuery是一个轻量级的，兼容多浏览器的javascrip库

2。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的特点：

1.jQuery核心js文件才几十kb，所以加载速度很快

2.有许多的DOM选择器，用起来很方便，比如要找某个MOD元素，js代码需要好几行，jQuey只要一行就能搞定

3.链式表达式，jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

4.事件，样式，动画支持。jQuery还简化了js操作css代码，并且代码的可读性也比js要强。

5.还支持Ajax操作。

6.兼容各种浏览器。

7.拥有这丰富的第三方插件。

?使用前准备：

	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	https://www.bootcdn.cn/
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js

?什么是 CDN？

内容分发网络
举个栗子：
	我们在国内想要和国外的计算机进行数据的传输，可是因为距离太远，数据拿取不方便，这时就能在或外建立一些服务器，将传输的数据资源进行保存，下次你想使用的时候，这边的服务器就用以就近原则将数据传给你，当然数据存在这些服务器中是会收费的。
    

jQuery导入之后是需要使用关键字才可以使用

morning的关键字就是jQuery，但是这样输入有点麻烦，就可以简写成 $

jQuery语法：$(selector).action()

jQuery封装了js代码，让编写变为更加的简单了但是有的时候js代码更快

js代码与jQuery代码对比：

let pEle=document.getEleementsByTagName('p')[0]

pEle.style.color='red'
'red'
pEle.nextElementSibling.style.color='geen'


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

❤️‍标签对象与jQuery

1.不同的对象能够调用的方法是不同的
	在编写代码的时候一定要看清楚手上的是什么对象
2.两者是可以进行互相转换的
	标签对象转jQuery对象
    	$(标签对象)
     jQuery对象转标签对象
    	jQuery对象[0]