jQuery引入

【一】什么是BOM/DOM

• BOM，浏览器对象模型，它使得JavaScript有能力与浏览器进行对话
• DOM，文档对象模型，可以通过它访问HTML文档的所有元素
• 他们是JavaScript与浏览器以及网页内容进行交互的核心

【1】BOM#

概述#

• 浏览器对象模型（BOM）则是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。

示例#

-- 打开新的浏览器窗口
window.open('https://www.baidu.com','','height=400px,width=400px') 

-- 获取当前页面的URL地址
window.location.href

-- 返回历史记录中的上一页
window.history.back()

-- 获取浏览器信息
navigator.userAgent

【2】DOM#

概述#

• 文档对象模型（DOM）是一个编程接口，它以树状结构来表示 HTML 或 XML 文档。
• 在 DOM 中，每个HTML元素、属性、文本节点等都被视为一个对象，通过JavaScript可以创建、查询、修改和删除这些对象。

示例#

-- 通过元素ID获得DOM元素对象
document.getElementById('d1')

-- 根据CSS选择器或伪类选择DOM元素对象。
element.querySelector/pseudo-class

-- 向指定元素添加子元素。
element.appendChild(newElement)

-- 设置元素属性值。
element.setAttribute(name, value)

-- 获取或设置元素内的文本内容或HTML内容
element.innerText/innerHTML

【3】总结#

• DOM 和 BOM 是 JavaScript 开发中两个不可或缺的部分，分别负责对网页内容和浏览器环境进行深层次的操作，使得前端开发者能够实现丰富的交互功能和动态效果。

【二】Window对象

• Window对象是JavaScript中表示浏览器窗口的全局对象，它提供了一系列方法来操作和管理窗口。

【1】open()#

• 打开新窗口或者获取对一个已经存在的窗口的引用。
• 第一个参数是目标网址，第二个参数可以为空，第三个参数为窗口的大小

window.open('https://www.baidu.com','','width=400px,height=400px')

【2】close()#

• 关闭当前窗口

【3】setTimeout()#

• 在指定的时间延迟后执行一次指定的函数或这一段代码

setTimeout(function index() {
    console.log('hello word')
},300)

【4】setInterval()#

• 以固定的时间间隔重复执行指定的函数或者一段代码

setInterval(function(){
    console.log('hello word')
},3000)

【5】alert()#

• 显示一个带有确定按钮和消息的警告框

window.alert('你不要过来啊')

【6】confirm()#

• 显示一个带有指定消息和两个按钮（确认和取消）的对话框。
• 点击确认返回true
• 点击取消返回false

window.confirm('你好吗')

【7】prompt()#

• 显示一个带有指定消息和一个文本输入框的对话框。
• 点击确认后会返回输入框里面的内容

window.prompt('你叫什么名字')

【8】innerHeight属性#

• 返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

window.innerHeight
906

【9】innerWidth属性#

• 返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

window.innerWidth
1707

【三】Window子对象

• 如果是window的子对象，window可以不写

【1】window.document#

• 此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
• 通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。

var divEle = document.getElementById('d1')

【2】window.location#

• 此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
• 通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。

window.location
Location {ancestorOrigins: DOMStringList, href: 'http://localhost:63342/python28/%E5%89%8D%E7%AB%AF…258j31kgcq6oe8abplj7uvs&_ij_reload=RELOAD_ON_SAVE', origin: 'http://localhost:63342', protocol: 'http:', host: 'localhost:63342', …}

// 获取当前页面的完整 URL（包括协议、域名、路径等）。
window.location.href*

// 获取当前页面的协议部分（例如 'http:' 或 'https:'）。
window.location.protocol

// 获取当前页面的主机（域名和端口号）部分。
window.location.host

// 获取当前页面的主机名部分。
window.location.hostname

// 获取当前页面的端口号部分。
window.location.port

// 获取当前页面的路径部分。
window.location.pathname

// 获取当前页面的查询参数部分（即 URL 中问号后面的内容）。
window.location.search

// 获取当前页面的片段标识部分（即 URL 中井号后面的内容）。
window.location.hash

// 将当前页面重定向到指定的 URL。
window.location.assign("http://example.com");

// 重新加载当前页面。
window.location.reload()*

【3】window.history#

• 此子对象用于操作浏览器的历史记录，包括向前和向后导航

// 返回当前会话的历史记录条目数。
window.history.length

// 加载上一个历史记录。相当于用户点击浏览器的后退按钮。
window.history.back()*

// 加载下一个历史记录。相当于用户点击浏览器的前进按钮。
window.history.forward()*

// 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。
window.history.go()

// 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

// 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。
window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【4】window.navigator#

• 此子对象用于提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。

// 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。
window.navigator.userAgent*
    
// 返回操作系统平台，如 "Win32"、"MacIntel" 等。
window.navigator.platform*

// 返回浏览器的厂商或供应商名称。
window.navigator.vendor;

// 返回浏览器的首选语言，通常是用户操作系统的默认语言。
window.navigator.language;

// 返回一个布尔值，表示浏览器是否启用了 cookie。
window.navigator.cookieEnabled;

// 返回一个包含浏览器插件列表的 PluginArray 对象。
window.navigator.plugins;

【四】弹出框

• 弹出框是网页开发中常用的交互组件，用于显示警告、确认或提示信息，并与用户进行互动。
• 常见的弹出框类型包括警告框、确认框和提示框。

// 警告框
alert("这是一个警告框！");

// 确认框
confirm("你确定要删除吗？")

// 提示框
prompt("请输入您的姓名：", "默认值");

【五】计时器

• 计时器在网页开发中经常用于实现定时触发某些操作的功能。
• 根据需求，可以使用不同的方法来触发定时器。

【1】过一段时间触发(setTimeout)#

• 如果需要在经过一定的时间后触发某个操作
• 就可以使用setTimeout函数来设置定时器
• 时间参数的单位为毫秒

setTimeout(function index() {
    console.log('hello word')
},3000)

【2】每隔一段时间触发一次(setInterval)#

• 如果需要每隔一段时间就执行一段代码
• 就可以使用setInterval函数来设置定时器

setInterval(function index() {
    console.log('hello word')
},3000)

【3】清除定时器(clearTimeout/clearInterval)#

• 用于清除计时器函数

var timer = setTimeout(function() {
  // 在延迟后执行的操作
}, 5000); // 延迟5秒后执行

// 如果需要取消定时器
clearTimeout(timer);
-------------------------------------------
var timer = setInterval(function() {
  // 每隔一段时间执行的操作
}, 2000); // 每2秒钟执行一次

// 如果需要取消定时器
clearInterval(timer);

【六】查找标签

• 直接查找标签和间接查找标签是在Web开发中常用的两种方式。
• 操作页面的时候需要用到document对象

【1】直接查找标签#

// 根据元素的ID属性直接获取到对应的HTML元素。
var divEle = document.getElementById('d1')

// 根据标签名称获取匹配的所有元素。注意这里拿到的是一个数组
document.getElementsByTagName('div')

// 根据类名获取匹配的所有元素。注意这里拿到的是一个数组
document.getElementsByClassName('d3')

【2】间接查找标签#

// 父节点标签元素
parentElement

//父节点标签元素
parentElement     

// 所有子标签
children      

// 第一个子标签元素
firstElementChild  

// 最后一个子标签元素
lastElementChild   

// 下一个兄弟标签元素
nextElementSibling  

// 上一个兄弟标签元素
previousElementSibling   

【七】节点操作

• 节点操作是指文档对象模型DOM对节点进行创建，获取，修改，删除等操作

【1】创建节点#

// 创建一个具有指定标签名的元素节点。
document.createElement('img')

// 创建一个包含指定文本内容的文本节点。
document.createTextNode('你好啊')

// 创建一个空的文档片段节点，可用于高效地插入多个节点。
createDocumentFragment()

【2】获取节点#

// 根据元素的id属性获取对应的元素节点。
getElementById(id)

// 根据元素的标签名获取一组元素节点。
getElementsByTagName(tagName)

// 根据元素的类名获取一组元素节点。
getElementsByClassName(className)

// 使用CSS选择器获取匹配的第一个元素节点。
querySelector(selector)

// 使用CSS选择器获取匹配的所有元素节点。
querySelectorAll(selector)

【3】修改节点#

// 将一个节点作为父节点的最后一个子节点添加到指定节点。
node.appendChild(childNode)

// 从父节点中移除指定子节点。
parent.removeChild(childNode)

// 使用新节点替换旧节点。
node.replaceChild(newNode, oldNode)

// 在参考节点之前插入新节点。
node.insertBefore(newNode, referenceNode)

【4】属性操作#

// 获取指定属性的值。
element.getAttribute(attribute)

// 设置指定属性的值。
element.setAttribute(attribute, value)

// 移除指定属性。
element.removeAttribute(attribute)

【5】文本操作#

// 获取或设置节点的文本内容。
node.textContent

// 获取或设置节点的HTML内容。
node.innerHTML:

案例#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">div1
  <p>p1</p>
  <span id="s1">span1</span>
</div>
</body>
</html>

// 通过DOM操作动态的创建img标签
  let imgEle = document.createElement('img')
  let divEle = document.getElementById('d1')
  imgEle.src='111.png'
  divEle.appendChild(imgEle)
  imgEle.setAttribute('name','green')
  imgEle.setAttribute('title','妹子')

// 设置a标签在p标签上面
<script>
    let divEle = document.getElementById('d1')
    let aEle = document.createElement('a')
    let pEle = document.getElementById('p1')
    aEle.setAttribute('href', 'https://www.baidu.com')
    aEle.innerText='跳转百度'
    divEle.insertBefore(aEle,pEle)
</script>

【八】获取值操作

【1】获取属性值#

• 可以使用getAttribute()方法来获取HTML元素的属性值。
• 该方法需要传入属性名作为参数，并返回属性对应的值。

let srcValue = aEle.getAttribute('href')

【2】获取文本内容#

• 可以使用innerText、innerHTML或textContent属性来获取一个元素的文本内容。
• 这些属性会返回元素内包含的文本，但存在一些差异：
• innerText：返回元素的纯文本内容，不包括HTML标记。
• innerHTML：返回元素的HTML内容，包括HTML标记。
• textContent：返回元素及其所有子元素的文本内容，包括隐藏元素和注释等。

divEle.innerHTML
'div1\n    <p>p1</p>\n    <span id="s1">span1</span>\n<a href="https://www.baidu.com">跳转百度</a>'

divEle.innerText
'div1\n\np1\n\nspan1 跳转百度'

divEle.textContent
'div1\n    p1\n    span1\n跳转百度'

【3】获取用户输入值#

• 对于表单元素（如input、select、textarea等）
• 可以通过获取其value属性来获取用户输入的值。

inputEle.value // '这是输入的内容'

【4】获取文件#

• 当用户选择了一个或者多个文件之后
• 通过files属性可以获取这些文件的信息
• files属性返回一个filelist对象

fileEle.files

【九】属性操作

【1】class属性操作#

介绍#

• .classList() 是JavaScript中用于获取HTML元素的类名列表的方法。
• 它返回一个DOMTokenList对象，该对象包含了元素的所有类名。

使用示例#

let divEle = document.getElementById('d4')
divEle.classList // ['c1', 'bg_green', 'bg_red', value: 'c1 bg_green bg_red']

// 添加类名
classList.add("newClass");

// 移除类名
classList.remove("oldClass");

// 切换类名（如果存在则移除，否则添加）
classList.toggle("active");

注意事项#

• classList是只读的，不能直接赋值。
• classList是一个动态的列表，会实时反映元素的当前类名状态。
• 可以通过遍历classList来访问每个类名，或者使用length属性获取类名数量。
• classList方法在大多数现代浏览器中都得到了支持。
• 如果需要兼容旧版浏览器，可以考虑使用polyfill库来模拟classList功能。

【案例】标签样式#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d4 {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="d1">div1
    <p id="p1">p1</p>
    <div id="d4" class="c1 bg_green bg_red"></div>
</div>
<script>

</script>
</body>
</html>

类属性操作#

// 获取div标签
let divEle = document.getElementById("d4");

// 查看当前标签下的所有类
divEle.classList

// 移除某个类
divEle.remove('bg_green)
              
// 添加某个类
divEle.remove('bg_green)
              
// 校验当前标签下是否包含某个属性 返回直接是true或false
divEle.classList.contains("d1")         

// 当前标签下有这个属性则移除，没有这个属性则添加
divEle.classList.toggle("bg_red");

标签样式操作#

• 通过.style设置样式

// 获取标签
let pEle = document.getElementById('p1')

// 设置颜色
pEle.style.color = 'red'

// 设置字体大小
pEle.style.fontSize = '48px'

// 设置背景颜色
pEle.style.backgroundColor = 'pink'

【十】事件

• 事件是指程序执行期间发生的特定操作或者状态变化
• 事件可以来自用户的交互操作（如鼠标点击，鼠标移动等），也可以是其他元素或系统发出的通知（如定时器到期、网络请求完成等）。
• 事件触发后，程序可以执行相应的处理函数来响应事件并做出相应的操作。

【1】鼠标事件#

• click：鼠标点击事件。
• mouseover：鼠标悬停在元素上的事件。
• mouseout：鼠标离开元素的事件。
• mousedown：鼠标按下事件。
• mouseup：鼠标松开事件。
• mousemove：鼠标移动事件。

【2】键盘事件#

• keydown：键盘按下事件。
• keyup：键盘松开事件。
• keypress：键盘按键被按下并松开事件。

【3】表单事件：#

• submit：表单提交事件。
• change：表单值改变事件。
• focus：表单元素获取焦点事件。
• blur：表单元素失去焦点事件。

【4】文档加载事件：#

• load：页面完全加载完成事件。
• unload：页面关闭或离开事件。

【5】定时器事件#

• setTimeout：在指定的延迟时间后触发事件。
• setInterval：每隔一定时间触发事件。

【6】自定义事件：#

• 开发者可以根据需要创建自定义事件，并使用dispatchEvent来触发事件。

【十一】绑定事件的两种方式

【1】传统的事件属性绑定#

• 通过在HTML标签内直接添加事件属性来实现事件的绑定

    <button onclick='index()'>点我</button>
<script>
 function index(){
     alert('你好')
 }
</script>

【2】现代的事件监听绑定#

• 通过JavaScript代码动态的选择元素，并以代码方式绑定事件监听器
• HTML和JavaScript代码会分离，提高了代码的可读性和可维护性。

let btnEle = document.getElementById('d5')
btnEle.addEventListener('click',function (){
    alert('你好')
})

案例#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d4 {
            width: 300px;
            height: 300px;
            border-radius: 50%;
        }

        .bg_red {
            background-color: red;
        }

        .bg_green {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div id="d1">div1
    <p id="p1">p1</p>
    <span id="s1">span1</span>
    <input type="text" id="d2" value="你好啊">
    <input type="file" id="d3">
    <div id="d4" class="c1 bg_green bg_red"></div>
    <button id="d5">开关</button>
</div>
<script>

</script>
</body>
</html>

// 开关灯案例
let btnEle = document.getElementById('d5')
let divEle = document.getElementById('d4')
// 方法1
btnEle.onclick = function (){
    divEle.classList.toggle('bg_green')
}

// 方法2
btnEle.addEventListener('click',function (){
    divEle.classList.toggle('bg_green')
})

// input框获取焦点，失去焦点案例

let inputEle = document.getElementById('d2')
inputEle.onblur = function (){
    inputEle.value = '你好啊'
}
inputEle.onfocus = function (){
        inputEle.value = ''
}

// 动态展示时间案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<div id="d1">div1

    <input type="text" id="d2" style="display: block;width: 300px;height: 40px" >
    <button id="d3">开始</button><button id="d4">结束</button>
</div>
<script>
    let t = null
    let inputEle = document.getElementById('d2')
    let startBtnEle = document.getElementById('d3')
    let endBtnEle = document.getElementById('d4')


    function showTime(){
        let timeObj = new Date()
        inputEle.value = timeObj.toLocaleString()
    }
    startBtnEle.onclick = function (){
        if (!t){
            t = setInterval(showTime,1000)
        }
    }
    endBtnEle.onclick = function (){
        clearInterval(t)
        t = null
    }
</script>
</body>
</html>

// 省市联动单例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="s1">
    <option value="请选择" disabled="disabled" selected="selected">--请选择--</option>
</select>
<select id="s2"></select>
<script>
    let data = {
        '浙江': ['杭州市', '台州市', '嘉兴市'],
        '上海': ['浦东区', '黄浦区', '静安区'],
        '北京': ['朝阳区', '昌平区', '海淀区']
    }

    // 先获取标签
    let proEle = document.getElementById('s1')
    let cityEle = document.getElementById('s2')

    // for循环获取省级数据
    for (i in data) {
        // 创建option标签
        let opEle = document.createElement('option')
        // 设置value
        opEle.value = i
        // 设置文本
        opEle.innerText = i
        // 添加标签
        proEle.appendChild(opEle)
    }

    // 文本域变化事件 change事件
    proEle.onchange = function () {
        // 每次都清除上一次的数据
        cityEle.innerHTML = ''
        // 美化选项
        let opEle = document.createElement('option')
        opEle.innerText = '--请选择--'
        opEle.setAttribute('selected','selected')
        opEle.setAttribute('disabled','disabled')
        cityEle.appendChild(opEle)
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取到对应市的数据
        let currentCityList = data[currentPro]
        console.log(currentCityList)
        // for 循环拿到所有的市，渲染到第二个select
        for (let i = 0; i < currentCityList.length; i++) {
            let opEle = document.createElement('option')
            opEle.value = currentCityList[i]
            opEle.innerText = currentCityList[i]
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>