前端 BOM，DOM, jQuery
BOM操作
// 1.BOM(Browser Object Model) 指的是浏览器对象模型，
它会让JavaScript具备与浏览器交互的能力 // 2.一些BOM操作 -1. window.open() // 打开一个新的浏览器窗口 window.open('https://www.acfun.cn/','','width=800px,left=600px') 打开一个宽800px，高600px，网址为www.acfun.cn的网页 -2. window.close() // 关闭当前浏览器窗口 -3. navigator.userAgent // 标识自己是一个浏览器 navigator.userAgent 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1' -4. history.forward() // 前进一页，相当于浏览器上面上下一步的箭头 -5. history.back() // 后退一页 -6. window.lovation.href // 获取当前网址，赋值符号可指定网址跳转 window.location.href 'https://cn.bing.com/' window.location.href ="https://www.acfun.cn/" -7. window.location.reload() // 刷新当前页面，相当于F5 -8. alert() // 弹出一个警告框，框内可输入弹出文本 -9. confirm() // 弹出一个确认框 -10. prompt() // 弹出一个提示框,框内输入什么返回什么 -11. 计时器相关 定时任务： - setTimeout()/clearTimeout() 语法： var t=setTimeout("JS语句"，毫秒) clearTimeout(t) 示例： <script> function t(){ // 定义函数t alert('喜羊羊') } let a = setTimeout(t,3000) // 3s后执行任务 clearTimeout(a) // 立刻取消任务 </script> 循环定时任务： - setInterval()/clearInterval() 语法：setInterval("JS语句",时间间隔) clearInterval(setinterval返回的ID值) 示例： <script> function t(){ alert('喜羊羊') } s = setInterval(t,3000) // 每间隔三秒就执行任务 clearInterval(s) // 取消循环定时任务执行 </script> * 结合使用： 示例： <script> let s; function func() { alert('懒羊羊') function inner(){ clearInterval(s) // 取消循环定时任务 } setTimeout(inner, 9000) // 延时任务:9s后执行inner } s= setInterval(func,3000) // 循环定时任务:每隔3s执行一次func /*循环定时任务只会执行2~3次*/ </script>
DOM操作
// 1. DOM(Document Object Model) 是指文档对象模型，通过其可以访问HTML文档的所以元素 // 2.DOM操作通过js代码操作标签，查找标签后才可以给标签绑定一些DOM操作(js代码) // 3.标签的查找 -1. js中变量名的命名推荐使用驼峰体 -2. js代码查找到的标签如果需要反复使用则需要按照变量接收
* 实例演示：
<span>span</span> <span>span</span> <div id="d1">div <span>div>span</span> <p class="c1">p <span>div>p>span</span> </p> <span>div>span</span> </div> <span>span</span> <span>span</span>
-3. 直接查找： document.getElementById // 根据ID获取一个标签 document.getElementByClassName // 更具class属性获取 document.getElementsByTagName // 根据标签名获取标签合集 * 实操：
1.结果： document.getElementById('d1') // <div id="d1">…</div> document.getElementsByClassName('c1') // HTMLCollection [p.c1] document.getElementsByTagName('span') // HTMLCollection(7) [span, span, span, span, span, span, span] 2.与间接查找的组合使用： document.getElementById('d1').children // HTMLCollection(3) [span, p.c1, span]
-4. 间接查找： parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
""" JS可以通过DOM创建动态的HTML： -1.JS可以改变页面中的所有HTML元素 -2.JS能够改变页面中的所有HTML属性 -3.JS能够改变页面所有的CSS样式 -4.JS能够对页面中的所有事件做出反应 """ -5. 操作节点 * 实例代码：
<div> <p>食不食油饼</p> <a href="#">最是人间烟火气</a> </div>
1.创建节点
createElement(标签名) 2.添加节点 追加一个子节点（作为最后的子节点） .appendChild(newnode)； 把增加的节点放到某个节点的前边。 .insertBefore(newnode,某个节点); 3.删除节点 获得要删除的元素，通过父元素调用该方法删除。 somenode.removeChild(要删除的节点) 4.替换节点 somenode.replaceChild(newnode, 某个节点); 5.属性节点 * 获取文本节点的值
""" .innerText 获取标签内部所有的文本内容 .innerText = '文本' 替换/设置标签内部的文本(不识别标签语法) .innerHTML 获取标签内部所有的标签包含文本 .innerHTML = '文本' 替换/设置标签内部的文本(识别标签语法)
""" * 实例操作：
// JS代码创建一个标签 let aEle = document.createElement('a') // undefined aEle // <a></a> // JS代码操作标签属性 aEle.href = 'https://acfun.cn/' // 'https://acfun.cn/' # 只能操作通用的属性 aEle // <a href="https://acfun.cn/"></a> // JS代码操作标签文本 aEle.innerText = '好看的内容都在这里' // '好看的内容都在这里' aEle // <a href="https://acfun.cn/">好看的内容都在这里</a> // JS代码查找div标签并将a标签追加到div里面(会在浏览器界面出现一个文本) let divEle = document.getElementsByTagName('div')[0] divEle.appendChild(aEle) // <a href="https://acfun.cn/">好看的内容都在这里</a> // JS代码操作属性节点实例 let divEle = document.getElementsByTagName('div')[0] // undefined divEle.innerText // '食不食油饼\n\n最是人间烟火气' # 获取文本结点的值 divEle.innerText = '舌尖上的中国' // '舌尖上的中国' # 设置文本节点的值 let divEle = document.getElementsByTagName('div')[0] // undefined divEle.innerHTML // '\n <p>食不食油饼</p>\n <a href="#">最是人间烟火气</a>\n' # 获取文本结点的值 divEle.innerHTML = '寻宝中国' // '寻宝中国' # 设置文本节点的值 divEle.innerHTML = '<h1>寻味仙踪</h1>' // '<h1>寻味仙踪</h1>'
""" 通用的： setAttribute()兼容默认属性和自定义属性 getAttribute("age") removeAttribute("age") """ -6. 获取值操作 * 浏览器示例代码：
<form action=""> <p>username: <input type="text" id="username"> </p> <p>province: <select name="" id="pro"> <option value="吃饭">1</option> <option value="睡觉">2</option> <option value="学习">3</option> </select> </p> <p>file: <input type="file" id="file"> </p> </form>
* 实际操作：
let inpuNameEle = document.getElementById('username') // undefined
inpuNameEle.value // 'tom'
let opProEle = document.getElementById('pro') // undefined
opProEle.value // '睡觉'
let fileEle = document.getElementById('file') // undefined
/* fileEle.value*/ // 'C:\\fakepath\\QQ图片20220728112052.jpg'
# .value拿到错误的文件名
fileEle.files // FileList {0: File, length: 1}
# 拿到一个数组，数组内是所有文件对象
fileEle.files[0] # 索引0拿到第一个文件对象
/* File {name: '1553162176uJCZ2UxX.jpg', lastModified: 1660005102560,
lastModifiedDate: Tue Aug 09 2022 08:31:42 GMT+0800 (中国标准时间),
webkitRelativePath: '', size: 11431, …}*/
-7. class与css操作
* 实例代码：
<style> div { height: 400px; width: 400px; border-radius: 50%; } .bg_red { background-color: red; } .bg_green { background-color: green; } </style> <body> <p id="d1">深切缅怀江老</p> <div id="d2" class="bg_green bg_red"></div> </body>
* 实际操作：
let pEle = document.getElementById('d1') // undefined
pEle.style.color = 'orange' // 'orange'
# 设置id为d1的字体颜色为橙色
pEle.style.fontSize = '36px' // '36px'
# 设置id为d1的字体大小为36px
let divEle = document.getElementById('d2') // undefined
divEle.classList // DOMTokenList(2) ['bg_green', 'bg_red', value: 'bg_green bg_red']
# 查看当前标签有哪些样式类(所有class的值)
divEle.classList.contains('d4') // false
# 判断有无该属性
divEle.classList.add('c1') // undefined
# 新增属性
divEle.classList.remove('bg_green') // undefined
# 移除某类属性
divEle.classList.toggle('bg_green') // true
# 有这类属性就删掉，没有就加上该类属性
divEle.classList.toggle('bg_green') // false
1.js操作标签css样式 标签对象.style.属性名(下划线没有 变成驼峰体) 2.js操作标签class属性 标签对象.classList.add() 标签对象.classList.contains() 标签对象.classList.remove() 标签对象.classList.toggle() -8. 事件 1.常见的事件： onclick 当用户点击某个对象时调用的事件句柄 onfocus 元素获得焦点 onblur 元素失去焦点 onchange 域的内容被改变 等等... 2.绑定事件的多种的方式 * 实例代码：
<script>
function showMsg() {
let msg = prompt('请确认');
console.log(msg)
}
let inputEle = document.getElementById('d1');
inputEle.onclick = function () {
alert('不要点击')
}
</script>
# 方式一 <button onclick="showMsg()">点击我</button> # 方式二 <input type="button" value="按钮" id="d1"> 3.事件函数中的this关键字 - this指代的是被操作的标签对象本身 - 如果事件函数里有多层嵌套最好在一开始就用变量存储一下防止后续变化 4.onload方法 - 当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。 - window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。 ps：.onload()函数存在覆盖现象。 -9. 事件实战 * 1.检验用户输入
<body> <p> <input type="text" id="username"> <span class="errors" style="color: red"></span> </p> <p> <input type="text" id="password"> <span class="errors" style="color: red"></span> </p> <button id="btn">提交</button> <script>
// 1.查找按钮标签 let btnEle = document.getElementById('btn'); // 2.绑定单击事件 btnEle.onclick = function () { // 3.获取用户输入的用户名和密码 let userNameVal = document.getElementById('username').value; let passWordVal = document.getElementById('password').value; // 4.判断用户名和密码是否合法 if(userNameVal === 'jason'){ // 4.1.查找获取用户名的input框下面的span标签 let span1Ele = document.getElementsByClassName('errors')[0]; // 4.2.给span标签添加内部文本 span1Ele.innerText = '用户名不能是Jason' } // 5.判断密码是否为空 if(passWordVal.length === 0){ // 5.1.查找获取用户名的input框下面的span标签 let span1Ele = document.getElementsByClassName('errors')[1]; // 5.2.给span标签添加内部文本 span1Ele.innerText = '密码不能为空!!!' } }
</script>
* 2.省市联动
<head> <meta charset="UTF-8"> <title>省市联动</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- <script src="jQuery3.6.js"></script>--> </head> <body> 省份:<select name="" id="province"> </select> 市区:<select name="" id="city"> </select> <script> let data = { "河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "安徽": ["芜湖", "合肥"], "上海": ["浦东新区", "青浦区"], "深圳": ["宝安", "龙华"] }; // 提前找好select标签 let proEle = document.getElementById('province'); let cityEle = document.getElementById('city'); // 1.循环获取所有的省信息 for(let pro in data){ // 2.创建option标签 let opEle = document.createElement('option'); // <option></option> // 3.添加内部文本 opEle.innerText = pro // <option>省份信息</option> // 4.添加value属性 opEle.setAttribute('value',pro) // <option value='省份信息'>省份信息</option> // 5.将上述的option标签添加到第一个select标签内 proEle.append(opEle) } // 给省份的下拉框绑定文本域变化事件 proEle.onchange = function () { // 每次给市区下拉框添加市区信息之前 应该先清空上一次加载的数据 cityEle.innerHTML = ''; // 1.获取用户选择的省份信息 let currentPro = this.value; // 2.根据省份获取对应的市区列表数据 let targetCityList = data[currentPro]; // 3.循环获取所有的市信息 for(let i=0;i<targetCityList.length;i++){ // 4.创建option标签 let opEle = document.createElement('option'); // <option></option> // 5.添加内部文本 opEle.innerText = targetCityList[i] // 6.添加value属性 opEle.setAttribute('value',targetCityList[i]) // 7.添加到第二个select标签内 cityEle.append(opEle) } } </script>
jQuery类库
""" IE浏览器：目前已经停止服务，不需要再去针对IE编写一份代码了 """ # 1.jQuery的遵旨： Write less, do more 写的更少做的更多 # 2.jQuery的特点： -1.加载速度快 -2.选择器多也好用 -3.不要求格式，一行代码都可以 -4.支持ajax请求(重点) -5.兼容多个浏览器 # 3.jQuery的准备： -1.可以直接在官网下载个核心文件然后从本地引入 <script src="jQuery的js文件路径"></script> -2.CDN网络资源加载(必须在计算机有网的情况下才可以使用) https://www.bootcdn.cn/ # 4.CDN的概念 内容分发网络 # 5.导入jQuery后，使用的关键字 关键字：>>> $ (也可以直接是jQuery) # 6.jQuery尽管封装了js代码，但是如果在需要考虑前端页面的加载速度时，也会采取纯手写 # 7.JS代码与jQuery代码的对比 -1. JS： let pEle = document.getElementsByTagName('p')[0] undefined pEle.style.color = 'red' pEle.nextElementSibling.style.color = 'green' -2. jQuery： $('p').first().css('color','yellow').next().css('color','blue') # 8.标签对象与jQuery对象 -1.不同的对象能够调用的方法是不同的 在编写代码的时候一定要看清楚手上是什么对象 -2.两者可以互相转换 标签对象转jQuery对象 ： $(标签对象) jQuery对象转标签对象 ： jQuery对象[0]
版权声明：本文为橘子菌菌原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。