前端学习(六)
2022/4/30 6:13:26
本文主要是介绍前端学习(六)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
前端学习(六)
BOM操作
BOM主要用于管理浏览器窗口，提供了独立的，可以与浏览器窗口进行互动的功能，这些功能与任何网页内容无关。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。
| 方法名称 | 说明 |
|---|---|
| prompt( ) | 显示可提示用户输入的对话框 |
| alert( ) | 显示带有一个提示信息和一个确定按钮的警示框 |
| confirm( ) | 显示一个带有提示信息、确定和取消按钮的对话框 |
| close( ) | 关闭浏览器窗口 |
| open( ) | 打开一个新的浏览器窗口，加载给定 URL 所指定的文档 |
| setTimeout( ) | 在指定的毫秒数后调用函数或计算表达式 |
| setInterval( ) | 按照指定的周期（以毫秒计）来调用函数或表达式 |
DOM
DOM操作查找标签
# 通过标签名查找标签
document.getElementsByTagName('div') # 数组套标签对象
# 通过class值查找标签
document.getElementsByClassName('c1') # 数组套标签对象
# 通过id值查找标签
document.getElementById('d1') # 标签对象本身
DOM操作标签
在js取变量名的时候，如果该变量指向的是一个标签，那么建议使用XXXEle
aEle；pEle；divEle；spanEleinnerText
动态创建一个a标签并添加到页面指定位置
打开网页—>右键检查—>控制台输入代码
var aEle = document.createElement('a'); /* 创建标签 */
aEle.href = 'https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner&city=%E4%B8%8A%E6%B5%B7-%E4%B8%8A%E6%B5%B7#tab3/'; /* 设置href属性 */
aEle.innerText = '查看上海疫情实时大数据'; /* 查找标签 */
var divEle = document.getElementById('d1'); /* 查找标签 */
divEle.append(aEle); /* 内部追加标签 */
标签的默认属性，如'id'，'class' 可以在设置的时候直接通过点的方式
divEle.id = 'id名', classEle.ele = '类名'
也可以拥有自定义属性，比如
setAttribute()既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("目标属性") 获取指定属性
divEle.removeAttribute("目标属性") 移除指定属性
获取值操作
innerText与innerHTML
获取值的时候：innerText只会获取文本内容，innerHTML获取文本和标签
设置值的时候：innerText不识别标签语法，innerHTML识别标签语法
input、option、textarea...
- 获取普通值数据
标签对象.value
- 获取文件数据
标签对象.value # 只能获取到文件路径
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
属性操作
类属性操作
标签对象.classList /* 查看所有的类属性 */ 标签对象.classList.add() /* 添加类属性 */ 标签对象.classList.remove() /* 移除类属性 */ 标签对象.classList.contains() /* 判断是否含有某个类属性 */ 标签对象.classList.toggle() /* 有则移除 无则添加 */
样式操作
标签对象.style.属性名 divEle.style.height = '800px' /* 设置高度 */
事件
绑定事件
达到条件自动触发，类如点击某个区域，双击某个区域等操作带来的操作返回
方法1：
<body>
<p>回到2017</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert(this)
// 事件函数中有一个固定的变量名 this 指代当前被操作对象本身 相当于类中的self
alert('梦可以做，事情还是要做')
}
</script>
</body>
方法2：
<body>
<p onclick="showMsg()">回到2017</p>
<script>
function showMsg() {
alert('梦可以做，事情还是要做')
}
</script>
</body>
事件实例
- 数据校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>username: /* 创建标签useename */
<input type="text" id="username">
<span style="color: #ff0000" id="username_error"></span>
</p>
<p>password: /* 创建标签possword */
<input type="text" id="password">
<span style="color: #ff0000" id="password_error"></span>
</p>
<input type="button" value="提交" id="btn"> /* 创建点击事件，绑定提交 */
<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 !== 'eason'){
// 给用户名下面的span标签设置文本内容
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名错误'
}
if (passWordVal !== '12345'){
// 给密码下面的span标签设置文本内容
let userSpanEle = document.getElementById('password_error')
userSpanEle.innerText = '密码错误'
}
}
</script>
</body>
</html>
- 搜索框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="d1" value="初始化的默认内容，用于提示用户输入的">
/* input输入标签 */
<script>
// 1.查找input标签对象
var inputEle = document.getElementById('d1')
// 2.绑定一个聚焦事件
inputEle.onfocus = function () {
// 3.清空value值
this.value = ''
}
// 4.绑定一个失焦事件
inputEle.onblur = function () {
// 5.添加一个全新的value值
this.value = '默认的值，用于表示有哪些选择'
}
</script>
</body>
</html>
- 下拉框之对应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
/* 创建标签，展示省市，选定属性绑定 id = "pro" */
<p>省市:
<select name="" id="pro">
</select>
</p>
/* 创建标签，展示失去，选定属性绑定 id = "city" */
<p>市区:
<select name="" id="city">
</select>
</p>
<script>
// # 通过id值查找标签let proEle = document.getElementById('目标id');
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
// 1.自定义数据(以后有现成的组件实现)
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["合肥市", "芜湖市"],
"上海": ["静安", "黄埔"],
"深圳": ["龙湖", "罗湖"]
};
// 循环自定义数据用变量名proVal接收
for (let proVal in data) {
// 创建标签，opEle 'option'
opEle = document.createElement('option');
// 查找标签，用proVal赋值
opEle.innerText = proVal;
// 获取普通值数据，标签对象.value
opEle.value = proVal
// 放入第一个下拉框中
proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
// 先清空市区下拉框中的内容,以免残留属性
cityEle.innerHTML = '';
// 定义局部变量接收对象，用对象本身接收
let currentPro = this.value;
// 定义展示列表，用于检索
let currentCityList = data[currentPro];
// 循环获取市区数据
for (let i=0;i<currentCityList.length;i++){
// 创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i]
// 2.2.添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>
</body>
</html>
jQuery简介
基本介绍
Query是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.
-
兼容多浏览器
IE浏览器：很多时候针对IE浏览器需要重写编写代码
-
封装了js代码
核心代码量少，加载速度快，极大的提升了编写效率
-
理念write less,do more.
写更少,做的更多。
-
Ajax交互
待学习
版本区别
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')
肥常方便
查找标签
'''基本选择器'''
$('#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()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计时器</title>
<style>
.container {
margin: 50px 100px 50px 100px;
width: 100%;
}
#box {
width: 500px;
height: 400px;
background-color: #ecebdc;
opacity: 0.8;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
font-size: 24px;
border: 5px outset;
border-image: linear-gradient(132deg, #e7e6de 40%, transparent 40%, transparent 55%,
#e7e6d9 55%) 1 1;
}
input {
width: 240px;
height: 100px;
background-color: #b5d6e5;
font-size: 24px
}
#bj {
background: url('https://w.wallhaven.cc/full/8o/wallhaven-8omrgy.jpg') no-repeat center center;
height: 100%;
width: 100%;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="bj">
<div id="box">
<div class="container" id="div1">
<span id="d1">00时00分00秒00</span>
</div>
<div class="container" id="div2">
<span id="d2">启动时间</span>
</div>
<div>
<input type="button" value="开始">
<input type="button" value="结束">
</div>
</div>
</div>
<script>
var but = document.getElementsByTagName('input')
var txt = document.getElementById('d1')
var txt1 = document.getElementById('d2')
var cont = 0
var timer;
var isclick = 0;
but[0].onclick = function () {
if (isclick % 2 === 0) {
timer = setInterval(function () {
cont += 10
var h = parseInt(cont / 1000 / 60 / 60 % 24);
var m = parseInt(cont / 1000 / 60 % 60);
var s = parseInt(cont / 1000 % 60);
var ms = cont / 10 % 100;
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
ms = ms < 10 ? '0' + ms : ms
txt.innerText = h + '小时' + m + '分' + s + '秒' + ms
}, 10)
but[0].value = '暂停'
var d2 = new Date()
d2.toLocaleString()
data = d2.toLocaleString()
txt1.innerText = '启动时间' + data
} else {
clearInterval(timer)
but[0].value = '继续'
var d2 = new Date()
d2.toLocaleString()
data = d2.toLocaleString()
txt1.innerText = '暂停时间' + data
}
isclick++
/* 0-技师 1-暂停 2-技师 3-暂停*/
}
but[1].onclick = function () {
txt.innerText = '00时00分00秒00'
var d2 = new Date()
d2.toLocaleString()
data = d2.toLocaleString()
txt1.innerText = '结束时间' + data
clearInterval(timer)
but[0].value = '开始'
isclick = 0
cont = 0
}
</script>
</body>
</html>
展示：
这篇关于前端学习(六)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-15AntDesign项目实战：新手入门与初级应用教程
- 2024-11-15AntDesign-Form-rules项目实战：新手指南
- 2024-11-14ESLint课程：初学者指南
- 2024-11-14Form.List 动态表单课程：新手入门教程
- 2024-11-14Redux课程：新手入门完全指南
- 2024-11-13MobX 使用入门教程：轻松掌握前端状态管理
- 2024-11-12前端编程资料：新手入门指南与初级教程
- 2024-11-12前端开发资料入门指南
- 2024-11-12前端培训资料：适合新手与初级用户的简单教程
- 2024-11-12前端入门资料：新手必读指南
