常用BOM操作 DOM操作 事件 jQuery类库

目录

• BOM操作
  • 常用BOM操作
  • 三种弹出框 alert confirm prompt
  • 定时任务 setTimeout
    • 循环定时 setInterval
• DOM操作
  • 查找标签
    • 直接查找
    • 间接查找
  • 操作节点
    • 创建标签 createElement
    • 操作标签属性 setAttribute
    • 操作标签文本 innerText innerHTML
    • 添加标签 appendChild
  • 获取值操作 value
  • class与css操作
• 事件
  • 常见事件
  • 绑定事件的多种方式
  • 事件函数中的this关键字
  • onload方法
  • 事件实战案例
• jQuery类库
  • jQuery下载与配置
  • 本地配置
  • CDN网络配置
  • pycharm添加模板
  • CDN内容分发网络介绍
  • jQuece基本使用
    • 标签对象与jQuery对象
• 练习
  • 简易登录校验
  • 简易页面计时器

BOM操作

JavaScript分为 ECMAScript，DOM，BOM。

BOM DOM 都属于javascript

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”

常用BOM操作

所有浏览器都支持 window 对象。它表示浏览器窗口。

*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先.

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()

window对象的子对象有：

1. navigator（浏览器对象）
2. screen（屏幕对象）
3. history（浏览历史对象）
4. location（地址对象）

window.open()
	打开一个新窗口
window.open('https://www.sogo.com/','','width=800px,left=200px')
	以宽800像素，距离屏幕左边200像素 打开一个新窗口 访问sogo网站
window.close()
	 关闭当前浏览器窗口
navigator.userAgent
	 标识自己是一个浏览器
	 /* 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36'*/
history.forward()
	 前进一页 相当于浏览器左上角的前进
history.back()
	 后退一页 相当于浏览器左上角的回退
window.location.href
	 获取当前页面所在的网址(返回一个字符串) 也可以再加赋值符号和网址跳转
window.location.href="URL"
	例子：location.href='https://www.baidu.com'
	通过赋值的方式 跳转到指定页面
window.location.reload()
	 刷新当前页面

三种弹出框 alert confirm prompt

1. alert()警告框:
   
   
   
   返回undefined。

2. confirm()确认框:
   
   
   
   根据不同的选择会得到true或者false:
   
   

3. prompt()提示框:
   
   输入hello world
   
   
   
   可以获取到输入：
   
   
   
   给弹出框设置默认值：
   
   
   
   如下：
   
   

ps:BOM实现：父子页面通信 django后台管理

定时任务 setTimeout

通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。使用settimeout()可以实现此操作。

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

    let t = setTimeout(showMsg, 3000)  // 3000毫秒之后执行函数
    clearTimeout(t)  // 取消定时任务

    s = setInterval(func, 3000)		// 每隔3000毫秒执行一次
    clearInterval(s)  // 取消循环定时任务

在网页中设置一个弹出框，在你打开网页之后等待3秒之后弹出。

setTimeout(functi on(){alert()},3000)

循环定时 setInterval

在网页中设置一个弹出框，每3秒弹出一次。

setInterval(function(){alert()},3000)

如果不点会一直累加弹出框

取消定时任务 --> 必须要申明变量

let s;
function func(){
    alert()
}
s = setInterval(func,1000)  // 循环执行func函数
function inner(){
    clearInterval(s)
}
setTimeout(inner,3000)
/*
1. clearInterval() 方法可取消由 setInterval() 设置的 timeout。
2. clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。*/

遇到的问题：

DOM操作

DOM树：(顺藤摸瓜)



在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

1. 文档是一个文档节点。
2. 所有的HTML元素都是元素节点。
3. 所有 HTML 属性都是属性节点。
4. 文本插入到 HTML 元素是文本节点。are text nodes。
5. 注释是注释节点。
   
   Document 对象
   
   当浏览器载入 HTML 文档, 它就会成为 Document 对象。
   
   Document 对象是 HTML 文档的根节点。
   
   Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
   
   提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

查找标签

"""
1.js中变量名的命名风格推荐是驼峰体
2.js代码查找到的标签如果需要反复使用可以用变量接收 规律 xxxEle
"""

直接查找

document.getElementById('d1')
	结果就是标签对象本身 因为同一页面标签的id值是唯一的
document.getElementsByClassName('c1')
	结果是数组里面含有多个标签对象
document.getElementsByTagName('span')
	结果是数组里面含有多个标签对象
document.getElementsByName("x");
	统计有多少个标签的name属性等于x 返回数字

getElementsByName：

间接查找

类似于顺藤摸瓜。

依据你手上的标签对象，去调用下面的方法，查找别的标签：

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

ps:支持连续获取，得到的标签还可以继续调用查找的方法，结果列表不支持负索引。

firstElementChild:

操作节点

创建标签 createElement

let aEle = document.createElement('a'); // 创建空的a标签
aEle.href = 'http://www.baidu.com/' //只能添加默认的属性

操作标签属性 setAttribute

setAttribute()  //使用此方法可以 兼容默认属性和自定义属性
getAttribute("age")  //获取标签内容
removeAttribute("age")

getAttribute获取自定义属性值,setAttribute修改：

操作标签文本 innerText innerHTML

aEle.innerText = '这个很攒劲!'

.innerText  		 获取标签内部所有的文本内容
.innerText = '文本'  替换/设置标签内部的文本(不识别标签语法)

.innerHTML			获取标签内部所有的标签包含文本
.innerHTML = '文本'  替换/设置标签内部的文本(这个方法能识别标签语法)

innerHTML可以直接修改掉某个标签：



在设置标签的时候 innerText和innerHTML都会将被设置的标签覆盖 只不过innerText是以文本替代 innerHTML可以识别HTML代码，会以HTML代码替代原标签。

添加标签 appendChild

添加标签是间接查找，他要以某个标签为基准添加：

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

// 新增一个p标签添加到div标签内部
a = document.createElement('p')
<p>​</p>​
a.innerText='hello world'
'hello world'
div_tag = document.getElementById('url')
<a id=​"url" age=​"100">​点我​</a>​
div_tag.appendChild(a)
<p>​hello world​</p>​
a.innerHTML = '<a href="https://www.baidu.com">点我快点我<\a>'
'<a href="https://www.baidu.com">点我快点我<a>'

注意：这个标签是通过js代码临时创建的,并没有修改HTML文件。如果是a标签点链接跳转之后，再回到原页面，你通过代码生成的a标签就会消失。

获取值操作 value

主要用于获取表单的输入。

1.针对用户输入的和用户选择的标签

标签对象.value

当前页面中是什么值 这个value就会获取到什么值：



对于select标签，查找select 别找option

2.针对用户上传的文件数据

标签对象.files fileList [文件对象、文件对象、文件对象]

标签对象.files[0] 文件对象

对于文件不能使用value方法，而是使用files方法。

尝试使用value会获取一个假路径：



文件对象：

class与css操作

1.js操作标签css样式
	标签对象.style.属性名(下划线没有 变成驼峰体)
	obj.style.backgroundColor="red"
2.js操作标签class属性
	标签对象.classList  //获取所有样式类名(字符串)
	标签对象.classList.add()  //添加样式类
	标签对象.classList.contains()  //存在某个类则返回true，否则返回false
	标签对象.classList.remove()  //删除指定类
	标签对象.classList.toggle()  //指定类存在于标签中就删除，否则添加

事件

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

常见事件

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

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

绑定事件的多种方式

    <!--绑定事件的方式1-->  在html标签中绑定事件
    <button onclick="showMsg()">快按我</button>

    <!--绑定事件的方式2-->  通过js代码查找到标签后绑定事件（解耦合）
    <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>

    //ps：1.选择节点 2.给节点添加事件 inputEle.onclick

事件函数中的this关键字

this指代的就是当前被操作的标签对象本身
this的作用：this指代当前被触发事件的标签对象 有点像self 谁触发了这个事件函数，this就是谁（标签）。
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化

onload方法

js代码放在head报错：window.onload 让文档加载完毕之后再运行js
XXX.onload 等待XXX加载完毕之后再执行后面的代码

事件实战案例

// 1.简易搜索框
<input type="text" value="游戏机" id="d1">

<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '下次再来哟!'
        }
</script>

// 2.登录校验用户名
    <p>username:
        <input type="text" id="d1">
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" id="d2">
        <span style="color: red"></span>
    </p>
    <button id="suBtn">提交</button>

    <script>
        // 1.查找提交按钮的标签
        subEle = document.getElementById('suBtn')
        // 2.给按钮标签绑定点击事件
        subEle.onclick = function (){
            // 3.查找获取用户输入的标签并获取数据
            let userNameEle = document.getElementById('d1')
            let passWordEle = document.getElementById('d2')
            if(userNameEle.value === 'jason'){
                userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
            }
            if(passWordEle.value === '123'){
                passWordEle.nextElementSibling.innerText = '密码不能是123'
            }
        }
    </script>

// 3. 省市联动

省:
<select name="" id="d1">

</select>

市:
<select name="" id="d2">

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有的省信息
    for (let pro in data) {
        // 2.创建option标签
        let proOpEle = document.createElement('option');
        // 3.添加文本及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.将创建好的option标签添加到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市数据
        // 6.获取用户选择的省信息 根据省获取市信息
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>
/*
每次添加的标签没有清空 只有刷新页面才会清空
每次给市添加标签 都要给市里面的信息进行清空
补充 input标签 placeholder 只要文本框是空的，那文本框的值就是placeholder的属性值
*/

jQuery类库

"""
IE浏览器:前端针对IE有时候需要单独再编写一份代码
"""
jQuery宗旨：Write less, do more  写的更少做的更多

jQuery特点：
1.加载速度快
2.选择器更多更好用
3.一行代码走天下
4.支持ajax请求(重点)
5.兼容多浏览器

推荐使用3.x的jquery：

jQuery下载与配置

jQuery类似python中的模块 由于浏览器默认只认识html css js

不认识jquery 需要要使用需要先导入

官网下载：



或者可以去bootcdn下：https://www.bootcdn.cn/jquery/

准备工作
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

# ps:这个min版本是对正常版本进行了压缩处理 将易读的变量名变成很短的变量名
# 降低了可读性 也降低了数据大小

本地配置

直接将jQuery代码复制到本地的js文件中即可：



在head或者body导入：

CDN网络配置

在head或body引用CDN提供的网址即可：



使用F12查看jQuery是否加载成功：

pycharm添加模板

每次都要导入jQuery很麻烦我们可以将其添加到模板：

打开模板设置：



添加模板：

CDN内容分发网络介绍

'''
两个地方的距离特别远，比如国外想访问国内的网址，需要经过海底光缆，
一个请求经过长途跋涉才能达到服务器，访问速度非常慢。
而且还有一个问题，网站的图片视频很难访问。

所以就有一个大型组织CDN，在全国各地建立服务器
可以将这些视频图片交给CDN CDN用服务器保存
然后就近原则分发给用户 而网站要向CDN支付费用。
总的来说就是，CDN帮你保存资源 用户访问时 CDN调最近的服务器帮你提供一部分资源。
'''
# 大型的CDN也会提供一些免费服务。

jQuece基本使用

jQuery导入之后需要使用关键字才可以使用 (用关键字包起来)
	jQuery('p')  // 会产生jQuery对象
	默认的关键字就是jQuery但是不好输入所以会使用符号 >>>:	$

jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快

js代码与jQuery代码对比:

// 原生js
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

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

标签对象与jQuery对象

通过$产生jQuery对象：

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

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

   ps:标签对象转jquery对象 $(标签) 再用jquery对象的方法！

   jQuery对象转标签对象
   
   jQuery对象[0]

   ps:把jQuery看成特殊的列表 里面装着一个个标签 用索引就可以将列表中的标签取出来

练习

简易登录校验

<!-- 简易登录校验 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery3.6.1.js"></script>

</head>
<body>

<form name="login">
     username:<input type="text" name="username" value="" id="user"><span style="color: darkred" id="user_span"></span><br>
     password:<input type="text" name="password" value="" id="pwd"><span style="color: darkred" id="pwd_span"></span><br>
  <button type='button' id="suBtu">提交</button>  <!-- button标签不申明type属性的情况下相当于submit -->
</form>

<script>
  var suBtu = document.getElementById("suBtu")
  var userEle = document.getElementById("user")
  var pwdEle = document.getElementById("pwd")

  // 按钮绑定点击事件
  suBtu.onclick = function(){
    let username = document.getElementById("user")
    let password = document.getElementById("pwd")
    if (password.value.length < 6){
      let pwd_span = document.getElementById("pwd_span")
      pwd_span.innerText='密码长度不能小于6'
    }
    if (username.value.length < 3){
      let pwd_span = document.getElementById("user_span")
      pwd_span.innerText='用户名长度不能小于3'
    }
  }
  // 文本框绑定聚焦事件
  userEle.onfocus = function() {
      userEle.nextElementSibling.innerText=''
  }
  pwdEle.onfocus = function() {
      pwdEle.nextElementSibling.innerText=''
  }

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

简易页面计时器

<!-- 简易版本页面计时器 -->

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>

<div id="time"> </div>
<button type="button" id="stop">stop</button>
<button type="button" id="start">start</button>

    <script>
        // 获取时分秒
        function clock() {
                    var time = new Date();
                    var hours = time.getHours();
                    var minutes = time.getMinutes();
                    var seconds = time.getSeconds();
                    document.getElementById("time").innerText = hours + ":" + minutes + ":" +seconds

                }
        let t;
        clock_task = setInterval(clock, 1000)

        // 获取按钮
        stopButton = document.getElementById("stop")
        stopButton.onclick = function() {
             t = null;
             clearInterval(clock_task)
        }

        // 获取按钮2
        stopButton = document.getElementById("start")
        stopButton.onclick = function(){
            if (!t){
               clock_task = setInterval(clock, 1000)
                t = 1;
        }
        }
    </script>

</body>
</html>