进入python的世界_day46_前端——JS之BOM和DOM、jQury

一、BOM*

​ 全称Browser Object Model,意思是通过编写JS代码能和浏览器交互,比如说控制浏览器大小、关闭打开页面、刷新页面、弹出框等等

// 1.打开窗口,可以指定链接,大小
window.open('http://www.baidu.com','','height=400px,width=800px,left=500px')

// 2.关闭窗口,一般只能自己写的
window.close()

// 3.拿到浏览器大部分信息,方便伪装成浏览器
window.navigtor.userAgent
// history对象的方法

//控制网页 前进一页
window.history.forward()

//控制网页返回上一页
window.history.back()
// location对象的方法***后续有用

//获取当前网址
window.location.href

//跳转至 某网页
window.location.href='www.baidu.com'

// 刷新网页
window.location.reload()
// 弹出框系列
// 1.确认框

confirm('霍霍,不是逃跑而是接近我吗?')
//用户点确定 返回True 点取消返回False

// 2.警告框

alert('时间要加速了!')

// 3.提示框

prompt("鸡泥__?")  // 括号内可以加第二个元素,设置默认值
//用输入确认 那么 返回值 为输入的值 如果用户点击取消,没有设置默认值的情况下那么返回值为null

计时器相关***

  • 定时任务——setTimeout
    function func1(){
            alert('就是现在,要按下去了!')
        }
    let t = setTimeout(func1,3000)  // 3000是毫秒,自己计算好时间
    

  • 循环定时任务——setInterval
    function func1(){
            alert('就是现在,要按下去了!')
        }
    let t = setInterval(func1,3000)  // 3000是毫秒,自己计算好时间
    
    // 会不停的弹窗,如果想关闭,添加一个停止循环
    clearInterval(t)
    
  • 二者结合让弹窗执行一段时间后停止
    let t
    function start(){
        	confirm('想变强吗少年')
    	}
    t = setInterval(start,5000)  // 设置弹窗5S执行一次
    
    function stop(){
        clearInterval(t)
    }
    setTimeout(stop,10000)      // 设置10S后停止弹窗
    
    

二、DOM

​ 全称Document Object Model,文档对象模型,通过它可以访问HTML文档的所有元素,有关DOM的代码,一定放在body标签的最后。

1.先学如何查找标签

​ 关键字:getElementBy

// 直接查询
<body>
<div id="d1">div</div>
<div class="c1">div</div>
<div>div</div>
<p class="c1"></p>
<span id="d2">span</span>
</body>

//——————————————————————————————————————————

// 1.根据ID查找
document.getElementById('d1')

<div id="d1">div</div>
// 2.根据class 查找标签
document.getElementsByClassName('c1')

HTMLCollection(2) [div.c1, p.c1]  // 返回数组
// 3.根据 标签类型 获取标签
document.getElementsByTagName('div')

//HTMLCollection(3) [div#d1, div.c1, div, d1: div#d1]


// 间接查询
代码自己捏份
<body>
<p>111</p>
<p>222</p>
<div id="d1">
  div
  <p>div>p
  <span>div>p>span</span>
  </p>
  <span>div>span</span>
  <p>div>p</p>
</div>
<span>333</span>
<span>444</span>
</body>

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

2.节点操作*

​ 可以通过JS来操作标签,操作节点了

准备一下素材代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
    <p id="d2">天气不错!</p>
    <a href="https://www.baidu.com/" target="_blank">点这里</a>
</div>
</body>
</html>
//——————————————————————————————————————————————————
// 创建标签对象 (如果不在原代码上写是一次性)
let aEle = document.createElement('a')  //创建一个a标签
aEle.href = 'https://www.baidu.com'  //给a标签添加 href属性
aEle.innerText = '点我打开百度!' // 给a标签插入文本
let divEle = document.getElementById('d1')  // 锁定标签
divEle.appendChild(aEle)            // 追加a到div内部
// 尤其注意单词!大小写不能错!

// 如果不想尾部追加,可以使用insertBefore()

// 删除标签对象
先锁定父级,然后锁定子标签,锁定就不打了,锁定后
父级.removeChild(要删除的子标签节点)
// 添加自定义属性 
先创建一个img标签,然后锁定找到
//setAttribute 标签可以定义 默认属性也可以定义自定义属性
img1.setAttribute('src','666.png')
img1.getAttribute("src")
img1.setAttribute('hahaha','xixixi')  


// 获取标签内所有文本与标签(可以创建子标签)
divEle.innerHTML

//也可以创建子标签,会覆盖掉,这个识别标签语法
divEle.innerHTML= '<h3> 这是innerHTML</h5>'
divEle.innerHTML  // 查看一下发现确实识别了标签语法

3.DOM获取值***

​ 这个知识点能干嘛?能在前端获取用户输入的数据后,通过简单的逻辑代码,在前端先校验一次,这样可以减轻后端服务器的运算压力

准备一下素材代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <p >用户名:
        <input type="text" id="username">
    </p>
    <p id="d1">性别:
        <input type="radio" name="gender" value="men" id="d11">男
        <input type="radio" name="gender" value="women" id="d22">女
        <input type="radio" name="gender" value="other" id="d33">其他
    </p>
    <p>上传文件:
        <input type="file" id="file">
        
    </p>
</form>
</body>
</html>
//——————————————————————————————————————————————————

// 1.首先获取到要查找的标签
let inputNameEle = document.getElementById('username')
// 2.获取该标签的值
inputNameEle.value
// 3.获取文件,注意不能用上面的取值的方法
fileEle.files[0]
//如果文件是多个,可以做for循环

4.DOM 操作CSS、 操作类属性

​ 操作CSS,也是锁定标签后再点方法,可以在前端中用JS改样式之类的,不过有些冷门,而且也不合理

// js操作标签class属性 
标签对象.classList  // 所有class的属性值
标签对象.classList.add() // 添加 标签 class属性值
标签对象.classList.contains() // 判断 标签 class属性值是否存在
标签对象.classList.remove() // 删除 标签 classs属性值
标签对象.classList.toggle()// 当该属性值 不存在时 添加 该属性值 存                               在便删除该属性值,反正就是对着干

5.事件***

​ 是HTML4及以上的新特性之一,能给标签绑定了一些额外的功能,花里胡哨起来

事件关键字 功能 应用场景
onclick 当用户点击某个对象时调用的事件句柄
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点 用于表单验证
onchange 域的内容被改变 通常用于表单元素
onkeydown 某个键盘按键被按下 用于表单,有人按回车
onkeypress 某个键盘按键被按下并松开
onkeyup 某个键盘按键被松开
onload 一张页面或一副图像完成加载
onmousedown 鼠标按钮被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
conmouseover 鼠标移动到某元素之上
onselect 在文本框中的文本被选中时触发
onsubmit 确认按钮被点击 使用对象是form
常用的几个:
  • onclick
  • onfocus
  • onblur
  • onchange
如何使用:

​ 方式一:绑定给button按钮的属性——标签自己带着事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <button onclick="showMsg()">选择你的捍卫者</button>
  <script>
    function showMsg() {
        let msg = prompt('确定要入壮丁局吗?')
        console.log(msg)
    }
  </script>
</body>
</html>

​ 方式二:锁定标签后,用句点的形式使用事件——标签不带事件,通过JS引出该标签事件 (推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="button" value="冲冲冲" id="d1">
    </form>
  <script>
    let inputEle = document.getElementById('d1')
    inputEle.onclick = function (){
        alert('已经没有什么好害怕的了')
    }
  </script>
</body>
</html>
This 关键字

​ 指代的是当前被操作的标签对象,当前触发事件的标签对象,然后就可以根据这个事件句点很多方法,有点像面向对象里面的self

三、实操练习题

​ 另外开设了一篇,这些实操题现实中应用的也不少

https://www.cnblogs.com/wznn125ml/p/16960683.html

四、jQuery类库

1.介绍

​ 相当于python的某个强大的第三方模块,大佬写的,能兼容多个浏览

2.两种引用方法

​ 官网复制那个一万行左右的代码到本地新建的JS文件中,然后src导入使用

​ CDN网络资源加载,复制网址https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js引入src ,电脑必须联网

3.使用符号——$

​ jQuery() >>> $()

4.jQ的选择器

​ 和CSS差不多

// 1.id选择器
$("#d1")

// 2.标签选择器
$("div")

// 3.类选择器
$(".c1")

// 4.层级选择器
$("x y")   //x所有的后代
$("x > y");// x所有的子代  儿子
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

5.JS标签对象 和jQ对象的转换

​ 因为后面要多种语言混用,使用标签的句点方法时,一定搞清楚手里拿着的是哪种对象

​ 一句话,JQ对象是前面有啥啥啥的东西,后面跟着一个数组存放标签对象,如果要变标签对象一般用个索引0就OK,而标签对象如果要变成JQ对象,用一个$符号包一下即可

今日单词
element 元素
events 事件
placeholder 提醒


posted @ 2022-12-06 21:21  yiwufish  阅读(211)  评论(0)    收藏  举报