DOM补充和jQAuery前瞻

DOM操作标签

divele.appendChild(imgEle) <img src=​"https:​/​/​img2.baidu.com/​it/​u=2879852610,2452123132&fm=253&fmt=auto&app=120&f=JPEG?w=501&h=500">​ divele.innerText '用户界面\n\n遇事不决问百度' divele.innerHTML '用户界面\n <p class="a2">\n 遇事不决问百度\n </p>\n <img src="https://img2.baidu.com/it/u=2879852610,2452123132&amp;fm=253&amp;fmt=auto&amp;app=120&amp;f=JPEG?w=501&amp;h=500">' divele.innerText = ('在浦东我说听不见就是听不见') '在浦东我说听不见就是听不见' divele.innerHTML = ('很好，很有精神下一个') '很好，很有精神下一个' divele.innerHTML = (imgEle) <img src=​"https:​/​/​img2.baidu.com/​it/​u=2879852610,2452123132&fm=253&fmt=auto&app=120&f=JPEG?w=501&h=500">​ divele.append(imgEle) undefined divele.getAttribute('style') null divele.getAttribute(imgEle) null 

获取值操作

var inputEle = document.getElementById('username') undefined inputEle <input type=​"text" id=​"username">​ inputEle <input type=​"text" id=​"username">​ inputEle.value 'jack' var seEle = document.getElementById('pro') undefined seEle.value 'sh' var txetEle =document.getElementById('info') undefined txetEle.value '现在封城能把我封吐，人麻了' txetEle.value '没钱了，救救孩子\n' var fileEle = document.getElementById('file') undefined fileEle.value 'C:\\fakepath\\d98a8c0af524b0e847d866dcb000b3493a1c6529.jpg@846w_1116h_progressive.webp' fileEle.files FileList {0: File, length: 1} fileEle.files[0] File {name: 'd98a8c0af524b0e847d866dcb000b3493a1c6529.jpg@846w_1116h_progressive.webp', lastModified: 1646637751789, lastModifiedDate: Mon Mar 07 2022 15:22:31 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 17508, …}lastModified: 1646637751789lastModifiedDate: Mon Mar 07 2022 15:22:31 GMT+0800 (中国标准时间) {}name: "d98a8c0af524b0e847d866dcb000b3493a1c6529.jpg@846w_1116h_progressive.webp"size: 17508type: "image/webp"webkitRelativePath: ""[[Prototype]]: File 

属性操作

var divEle = document.getElementsByTagName('div')[0] undefined divEle.remove('bg-green') undefined divEle.remove('bg-green') undefined divEle.classList DOMTokenList(3) ['c1', 'bg-red', 'bg-green', value: 'c1 bg-red bg-green']0: "c1"1: "bg-red"2: "bg-green"length: 3value: "c1 bg-red bg-green"[[Prototype]]: DOMTokenList divEle.classList.remove('bg-green') undefined divEle.classList.add('bg-green') undefined divEle.classList.add('bg-green') undefined divEle.classList.add('bg-green') undefined divEle.classList.add('bg-red') undefined divEle.classList.toggle('bg-green') false divEle.classList.toggle('bg-green') true divEle.style.color = 'red'; 'red' divEle.style.color = 'green'; 'green' 

事件

xxxxxxxxxx """达到某个条件 自动触发的功能 eg:用户点击某个标签弹出警告框 双击某个标签提示信息"""# 如何给标签绑定事件方式1: <p onclick="showMsg()">快来点我 点我 点我!!!</p>  <script>        function showMsg() {            alert('猴急猴急的干啥 一会儿让你好看!!!')       }  </script>方式2:  <p>快来点我 点我 点我!!!</p>  <script>  var pEle = document.getElementsByTagName('p')[0];        pEle.onclick = function () {            alert('我来了 准备好了吧')       }    </script>'''补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身''' 

实例

# 1.数据校验 <p>username: <input type="text" id = "username"> <span style="color: red" id = "username_error"></span> </p> <p>password: <input type="text" id = "password"> <span style="color: blue" id="password_error"></span> </p> <p> <input type="button" value="确认" id="btn"> </p> <script> // 查找按钮标签 var btnEle = document.getElementById('btn') //绑定事件 btnEle.onclick =function (){ //获取输入数据 let userNameVal = document.getElementById('username').value; let passWordVal = document.getElementById('password').value; //判断 if (userNameVal === 'yufan') { //用户数据判断内容 let userSpanEle = document.getElementById('username_error') userSpanEle.innerText = '此用户名已经存在' } if (passWordVal === '10086'){ let passSpanEle = document.getElementById('password_error') passSpanEle.innerText = '用户密码不能为此密码' } } </script> # 2.搜索框 <input type="text" id="a1" value="鬼泣5"> <script> //绑定搜索框 var inputEle = document.getElementById('a1') //绑定聚焦事件 inputEle.onfocus = function (){ //清空搜索框 this.value = '' } //失焦事件绑定 inputEle.onblur = function (){ //添加一个全新的value this.value = '索尼PS5' } </script> #3.省市联动 <p>省/直辖市 <select name="" id="pro"></select> </p> <p>市/区 <select name="" id="city" > </select> </p> <script> let proEle = document.getElementById('pro') let cityEle = document.getElementById('city') let data = { "河北":['廊坊','石家庄'], "上海":['长宁区','金山区'], "香港":['九龙','外港'], "山东":['青岛','潍坊'] }; //获取所有的键的单位 for (let proVal in data){ //创建标签 opEle = document.createElement('option') opEle.innerText = proVal; opEle.value = proVal proEle.append(opEle) } //文本变化域事件 proEle.onchange = function (){ let choiceELe = this.value; let choiceCityList = data[choiceELe]; // 循环获取市区数据 for (let i=0;i<choiceCityList.length;i++){ //创建标签 opeEle = document.createElement('option') opeEle.innerText = choiceCityList[i] opeEle.value =choiceCityList[i] cityEle.append(opeEle) } } </script> 

jQuery简介

'''基本介绍''' 1.兼容多浏览器 IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作 2.封装了js代码 核心代码也就几十KB 加载速度快 极大的提升编写效率 3.宗旨 "Write less, do more." 4.Ajax交互 异步提交 局部刷新(django部分再学) '''版本区别''' 1.x:兼容IE678 2.x:不兼容IE678 3.x:不兼容IE678 学习直接使用最新版即可 '''下载使用''' 下载地址:https://jquery.com/ jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘) jQuery本身就是一个js文件 里面写了一些js代码而已 '''导入方式''' 1.本地jQuery文件 不会收到网络影响 2.cdn加速服务 需要确保有互联网 min.js 压缩之后的文件 容量更小 .js 没有压缩的文件 容量稍大 '''基本使用''' 将页面上的两个p标签文本内容一个变成红色 一个变成绿色 原生的js代码 let p1Ele = document.getElementsByTagName('p')[0] let p2Ele = document.getElementsByTagName('p')[1] p1Ele.style.color = 'red' p2Ele.style.color = 'green' jQuery代码 $('#d1').css('color','red').next().css('color','green') 

jQuery导入

<meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入网络--> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>--> <!-- 引入本地--> <script src="jQuery3.6.js"></script> 

查看标签

'''基本选择器''' $('#d1') # id选择器 $('.c1') # class选择器 $('p') # 标签选择器 $('div#d1') $('div,#d1,.c1') $("x y") // x的所有后代y（子子孙孙） $("x > y") // x的所有儿子y（儿子） $("x + y") // 找到所有紧挨在x后面的y $("x ~ y") // x之后所有的兄弟y '''基本筛选器''' $('ul li:first') $('ul li:last') $('ul li:eq(2)') $('ul li:odd') $('ul li:even') $('ul li:gt(2)') $('ul li:lt(2)') $('ul li:not(li)') $('ul:has(#d1)') # 查看内部含有id是d1的ul标签 '''属性选择器''' $('[name]') $('[name="jason"]') $('div[name="jason"]') '''表单筛选器:专门针对form表单内的标签''' $('input[type="text"]') 筛选器简化 $(':text') $(':checked') 会将option也找到 $(':selected') 只会找到option标签 '''筛选器方法''' # 同级别往下查找 $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") # 同级别网上查找 $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") # 查找父标签 $("#id").parent() $("#id").parents() $("#id").parentsUntil() # 查找儿子和兄弟 $("#id").children();// 儿子们 $("#id").siblings();// 兄弟们(同级别上下所有标签) """ 链式操作 $('#d1').parent().parent().parent() $('#d1').parent().parent().next().parents() 一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签 核心: 对象在调用完一个方法之后返回的还是一个对象 """