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

目录

• BOM操作
  • window对象
  • window的子对象
    • 弹出框
  • 计时相关
    • setTimeout()
    • clearTimeout()
    • setinterval()
    • clearInterval()
• DOM操作
  • 查找标签
    • 直接查找
    • 间接查找
• 节点操作
  • 操作节点
    • js代码创建一个标签
    • js代码操作标签属性
    • js代码操作标签文本
  • 获取值操作
  • class的操作
  • 指定CSS操作
• 事件
  • 常见事件：
  • 绑定事件的多种方式：
    • 方式1：
    • 方式2：
  • 事件函数中的this关键字
  • onload方法
  • 事件实战案例
• jQuery类库
  • jQuery的中文使用说明文档
  • jQuery下载与配置
  • 本地配置
  • CDN网络配置
  • pycharm添加模板
  • CDN内容分发网络介绍
  • jQuece基本使用
  • 标签对象与jQuery对象

BOM操作

BOM(Browser object Model) 是指浏览器对象模型 它使javascript有能力与浏览器对话

window对象

• window.innerHeight 浏览器窗口的内部高度
• window.innerWidth 浏览器窗口的内部宽度
• window.open() 打开新窗口
• window.close() 关闭当前浏览器窗口

window的子对象

浏览器对象 通过这个对象可以判断用户所有使用的浏览器 包含浏览器相关信息

navigator.appName  //浏览器的全称
navigator.appVersion   //浏览器厂商和版本的详细信息
history.forward()	//前进页
history.back	//后退页
window.location.href	//获取当前页面所在的网址 也可以再加赋值符号和网址跳转
window.location	//刷新当前页面

弹出框

创建删三种消息框：警告框、确认框、提示框

警告框：

alert("你是哪个？")；

确认框：

confirm('点不点？');

提示框:

prompt('请选择你答案','答案')

计时相关

可以在一定时间间隔之后来执行代码 而不是函数在调用后立即执行 称为计时事件

setTimeout()

语法：

var t = setTimeout('js语句',毫秒)

第二个参数指示从当前多少毫秒后执行的一个参数(1000毫秒等于1秒)

clearTimeout()

语法：

clearTimeout(setTimeout_variabel)

例如：

//在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(？？？)}, 3000)
//取消setTimeout设置
clearTimeout(timer);

setinterval()

按照指定的周期来调用函数或计算表达式

语法：

setInterval('JS语句',时间间隔)

clearInterval()

可取消由setInterval()设置的timeout

语法：

clearInterval(setiterval返回的Id值)

例如：

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM操作

是指文档对象模型 通过它可以访问HTML文档的所有元素 是通过js代码来操作标签

查找标签

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

直接查找

document.getElementById 根据ID获取一个标签

如：
document.getElementById('d1')
//结果就是标签对象本身

document.getElementsByClassName 根据class属性获取

如：
document.getElementsByTagName('span')
//结果是数组里面含有多个标签对象

间接查找

标签对象的方法
parentElement		  父节点标签元素
children			  所有子标签
firstElementchild	   第一个子标签元素
lastElementSinling	   下一个兄弟标签元素
previousElementSibling  上一个兄弟标签元素

节点操作

操作节点

js代码创建一个标签

let aEle = document.createElement('a')

js代码操作标签属性

aEle.href = 'https://www.baidu.com/'  // 只能添加创建标签的默认属性
setAttribute('age', '18')  //兼容默认属性和自定义属性
getAttribute('age')
removeAttribute('age')

js代码操作标签文本

aEle.innerText = '你在开玩笑嘛'

js代码查找div标签并将a追加到div内部

let divEle = document.getElementsByTagName('div')[0]
divEle.appendchild(aEle) //添加节点

获取标签内部所有的文本内容

innerText	获取标签内部所有的文本内容

innerText = '文本'	替换/设置内部所有的标签包含文本

获取标签内部所有的标签包含文本

innerHTML		获取标签内部所有的标签包含文本

innerHTML = '文本'	替换/设置标签内部的文本(识别标签语法)

获取值操作

1. 针对用户输入的用户选择的标签
	标签对象.value
2. 针对用户上传的文件数据
	标签对象.files		拿到的是 fileList [文件对象、文件对象、文件对象]
	标签对象.files[0]	文件对象

class的操作

js操作标签class属性

标签对象.classList.add()	添加类
标签对象.classList.contains()	存在返回true 否则返回false
标签对象.classList.remove()	删除指定类
标签对象.classList.toggle()	存在就删除 否则添加

指定CSS操作

js操作标签css样式

标签对象.style.属性名(下划线没有 变成驼峰体)
如:
标签对象.style.margin
标签对象.style.width

事件

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

常见事件：

onclick		当用户点击某一个对象时调用的事件句柄
onfocus		元素获得焦点
onblur		元素失去焦点
onchange	域的内容被改变

绑定事件的多种方式：

方式1：

<button onclik='showinfo()'>快点击我</button>

方式2：

<input type='button' value='点点点' id='d1'>
    <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指代的就是当前被操作的标签对象本身	
this的作用：this指代当前被触发事件的标签对象 有点像self 谁触发了这个事件函数，this就是谁（标签）。
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化

onload方法

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

事件实战案例

实战一：

<input type="text" value="游戏机" id="d1">

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

实战二：

<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>

实战三：

省:
<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>

jQuery类库

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more

优势：

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

jQuery的中文使用说明文档

文档地址：https://jquery.cuishifeng.cn/
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看成特殊的列表 里面装着一个个标签 用索引就可以将列表中的标签取出来