BOM操作 DOM操作 操作标签

今日内容总结

BOM操作(Browser Objet Model)

BOM是指浏览器对象模型 它使 JavaScript 有能力与浏览器进行'对话'


1.window.open()		打开一个网页
	window.open('网址','','位置参数')
2.window.close()	关闭当前浏览器
3.history.forward()		前进一页
4.history.back()		后退一夜
5.window.location.href()	 	获取当前页面所在的网址
6.window.locattion.reload()		刷新当前页面
7.alert()		警告框
8.confirm()		确认框
9.prompt()		提示框
计数器相关操作(重要)
	let t = setTimeout(函数,秒数)  # 此处的秒数用的是毫秒
 	clearTimeout(t)				 # 取消任务
 	s = setINterval(函数,秒数)	   # 每隔输入的秒数执行一次
    clearInterval()				  # 取消任务

DOM操作(Document Object Model)

DOM 是指文档对象模型 通过它可以访问HTML文档的所有元素

查找标签

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

查找标签的三种语句
1.document.getElementById('d1')
	结果就是('d1')标签对象本身
2.document.getElementsByClassName('c1')
	结果是数组里面含有多个标签对象
3.document.getElementsByTagName('span')
	结果是数组里面含有多个标签对象
   
parentElement				父节点标签元素
children					所有子标签
firstElementChild			第一个子标签元素
lastElementChild			最够一个标签元素
nextElementSibling			下一个兄弟标签元素
previousElementSibling		上一个兄弟标签元素

操作节点

// js代码创造一个标签
let aEle = document.createTlement('a')

// js代码操作标签属性
aEle.href = '网址'	 只能添加默认的属性(不可添加自定义的属性)
setAttribute('age')    兼容默认属性和自定义属性
getAttribute('age')	   重置
removeAttribute('age') 移除

// js代码操作标签文本(仅限文本)
aEle.iinnerText = '文本内容'

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

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

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

获取值操作

1.针对用户输入的和用户选择的标签
	标签对象.value
2.针对用户上传的文件数据
	标签对象.files		#产生一个文件对象的数组
 	标签对象.files[0]	#通过索引获取单个文件对象

class与css操作

1.js操作标签css样式
	标签对象.style.属性名(将下滑线后面的第一个字母变成大写)
2.js操作标签class属性
	标签对象.classList.add() 		添加类
  	标签对象.classList.contains()	 存在返回true 否则false
 	标签对象.classList.remove()		删除指定类
	标签对象.classList.toggle()		存在删除 否则添加

事件

#常见事件
	onclick			当用户点击某个对象时掉调用的事件
  	onfocus			元素获得焦点
 	onblue			元素失去焦点
	onchange		域的内容被改变
    .......
    
#绑定事件的多种方式
	方式一
    <button oonclick='函数()'>按这里</button>
	方式二(常用)
    <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指代的是当前被操作的标签对象本身(类似于 self)
    如果事件函数内有嵌套 为了发那个之后续出现变化导致混乱 最好提前用变量名来贮存一下
    
#onload方法
	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.加载速度块
	2.选择器更多更好用
 	3.一行代码走天下
 	4.支持ajax请求(重点)
 	5.兼容多浏览器
  
#准备工作
	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导入之后需要使用关键字才可以使用
	默认的关键字就是jQuery但是不好输入 >>>:	$
    
jQuery封装了JS代码 让编写更简单 但是有时候JS代码更快


js代码与jQuery代码对比
    let pEle = document.getElementsByTagName('p')[0]
    undefined
    pEle.style.color = 'red'
    'red'
    pEle.nextElementSibling.style.color = 'green'

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

标签对象与jQuery对象

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