我是靠谱客的博主 缥缈向日葵，最近开发中收集的这篇文章主要介绍操作属性-样式属性`document.querySelector`/表单属性/单击，双击，鼠标移入（悬停）事件/案例-开关灯-表单禁用和开启-二维码显示与隐藏-点餐系统，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
01-操作属性-样式属性
<style>
.box {
width: 100px;
background-color: red;
line-height: 100px;
}
</style>
</head>
<body>
<!-- 样式属性是JS操作元素属性中：最重要 -->
<div class="box" style="height: 100px;text-align: center;border-radius: 50%;">
我是前端小白
</div>
<script>
// 操作样式
// 获取元素
let box = document.querySelector('.box')
// 样式在style属性中
console.log(box.style)
// 拿到了所有样式属性：只有行内的样式是拿到值的，行外的拿不到
// 样式都是小驼峰
// 访问具体样式
console.log(box.style.height) // 带单位（一定是字符串）
// 样式可以修改
box.style.height = 200 + 'px'
box.style.lineHeight = 200 + 'px'
// 隐藏元素
box.style.display = 'none'
</script>
</body>
注意：
1.想在JS中操作属性变化必须时行内样式，添加在样式在style属性中
2.样式都是小驼峰：就是CSS属性中有 - 的情况下统一用首字母大写替代。
02-操作属性-表单属性
<body>
用户名：<input type="text" name="username" id="un" value="我是前端小白" disabled><br>
密码：<input type="password" name="password" id="pwd" value="123456"><br>
性别：<input type="radio" name="gender" id="g1">男 <input type="radio" name="gender" id="g2" checked> 女
爱好：<input type="checkbox" name="hobby" id="h1"> 篮球 <input type="checkbox" name="hobby" id="h2" checked> 足球
<script>
// JS操作表单属性
let username = document.querySelector('#un')
let password = document.querySelector('#pwd')
// 属性选择器
let gender = document.querySelectorAll('[name="gender"]')
let hobby = document.querySelectorAll('[name="hobby"]')
// 获取值：元素.value
console.log(username.value)
username.value = '凭什么'
// 选中状态
console.log(gender, gender[0], gender[1])
// 控制选中：checked属性
console.log(gender[0].checked)
console.log(gender[1].checked)
gender[0].checked = true
// 第一个选中：第二个自动不选中
console.log(gender[1].checked)
// JS是通过布尔true和false来控制元素是否拥有checke的属性
hobby[0].checked = true
// 控制表单能否使用：disabled属性
console.log(username.disabled) // true：禁用状态
username.disabled = false
password.disabled = true
</script>
</body>
注意：
1.JS是通过布尔true和false来控制元素是否拥有checke的属性
2.控制表单能否使用：disabled属性
03-事件-事件注册-click：单击事件，dblclick双击事件，mouseover鼠标移入（悬停）事件，mouseout鼠标移出事件(若以on方式注册事件则在前方加on即可）
<body>
<div class="box">
我是前端小白
</div>
<script>
// 事件三要素：事件源（元素）、事件类型（on的方式注册事件），事件处理（效果代码：函数）
// 1. 获取事件源：拿到元素
let box = document.querySelector('.box')
// 2. 确定事件类型（交互方式）
// * click：单击事件，dblclick双击事件，mouseover鼠标移入（悬停）事件，mouseout鼠标移出事件
// * 当前用on方式注册事件：所有的事件前面加个on：onclick，ondblclick，onmouseover，onmouseout
box.onclick = function () {
// 3. 事件处理：函数，放效果代码
box.style.backgroundColor = 'red'
}
</script>
</body>
注意：
1.事件三要素：事件源（元素）、事件类型（on的方式注册事件），事件处理（效果代码：函数）
2.click：单击事件，dblclick双击事件，mouseover鼠标移入（悬停）事件，mouseout鼠标移出事件
3.当前用on方式注册事件：所有的事件前面加个on：onclick，ondblclick，onmouseover，onmouseout
04-事件-多事件（不同事件绑定在同一个元素身上）
<body>
<div class="box">
我是前端小白
</div>
<script>
// 需求：鼠标移入 变色（红色），鼠标移出：变回去（白色）
// 1. 获取事件源：div.box
let box = document.querySelector('.box')
// 2. 确定事件类型：两个，分两次：onmouseover 和 onmouseout
// 3. 事件处理：修改元素背景色
box.onmouseover = function () {
// 如果要测试事件是否有执行：在事件里面第一行加上一个输出
// console.log(1)
box.style.backgroundColor = 'red'
}
box.onmouseout = function () {
box.style.backgroundColor = '#fff'
}
// on事件可以不同事件绑定在同一个元素身上，但是不能绑定同名事件（最后那个会生效：前面的会被覆盖）
</script>
</body>
注意：
1.on事件可以不同事件绑定在同一个元素身上，但是不能绑定同名事件（最后那个会生效：前面的会被覆盖）
05-案例-开关灯
<body>
<button>关灯</button>
<script>
// 需求：点击关灯，背景变黑，同时按钮变成开灯；反过来反向操作
// 1. 获取事件源：button
let btn = document.querySelector('button')
// 2. 点击事件：onclick
btn.onclick = function () {
// 3. 事件处理
// 3.1 判定元素的值：innerText
if (btn.innerText == '关灯') {
// 3.2 关灯：body背景变黑，开关值变成开灯
document.querySelector('body').style.backgroundColor = '#222'
btn.innerText = '开灯'
} else {
// 3.3 开灯：body背景变白，开关值变成关灯
// 一个页面只有一个body：document提供了一个快捷访问body的方式：document.body
document.body.style.backgroundColor = '#fff'
btn.innerText = '关灯'
}
}
</script>
</body>
06-案例-表单的启用与禁用
<body>
用户名：<input type="text" name="username" value="我是前端新人"><br>
密码：<input type="password" name="password" value="123456"><br>
性别：<input type="radio" name="gender">男 <input type="radio" name="gender" checked> 女<br>
爱好：<input type="checkbox" name="hobby"> 篮球 <input type="checkbox" name="hobby" checked> 足球
<hr>
<button class="start">启用</button> <button class="stop">禁用</button>
<script>
// 表单的启用与禁用：核心知识，disabled属性
// 1. 获取事件源和要操作的元素：启用和禁用按钮，一堆input标签
let start = document.querySelector('.start')
let stop = document.querySelector('.stop')
let inputs = document.querySelectorAll('input')
// 2. 两个事件：启用事件，禁用事件
// 3. 事件处理
// 3.1 启用事件：input.disabled = false
start.onclick = function () {
inputs.forEach(function (input) {
input.disabled = false
})
}
// 3.2 禁用事件：input.disabled = true
stop.onclick = function () {
// 错误操作
// inputs.disabled = true
// 遍历取出每一个：然后给每个元素增加disabled属性，值为true
inputs.forEach(function (input) {
input.disabled = true
})
}
</script>
</body>
07-案例-二维码的显示与隐藏
<style>
.box {
position: fixed;
right: 0;
top: 40%;
width: 50px;
height: 50px;
background: url("images/bgs.png") no-repeat -159px -51px;
}
.big {
position: absolute;
left: -420px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<!-- 这么设计有一个原因：事件冒泡 -->
<img src="images/hmewm.jpg" class="big">
</div>
<script>
// 需求：鼠标移入小图，大图显示；移出小图：大图隐藏
// 1. 获取事件源：小图
// * 要获取大图：操作的是大图
let box = document.querySelector('.box')
let big = document.querySelector('.big')
// 2. 事件类型：鼠标移入onmouseover，鼠标移出onmouseout
// 3. 事件处理
// 3.1 鼠标移入：显示大图，大图.style.display = 'block'
box.onmouseover = function () {
big.style.display = 'block'
}
// 3.2 鼠标移出：隐藏大图，大图.style.display = 'none' || ''
box.onmouseout = function () {
// none：行内覆盖行外
// big.style.display = 'none'
// ''：行内没有，使用行外
big.style.display = ''
}
</script>
</body>
08-案例-点餐系统
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>
<input type="checkbox" id="checkAll" />全选/全不选
</th>
<th>菜名</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>红烧肉</td>
<td>隆江猪脚饭</td>
<td>￥200</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>香酥排骨</td>
<td>隆江猪脚饭</td>
<td>￥998</td>
</tr>
<tr>
<td>
<input type="checkbox" class="check" />
</td>
<td>北京烤鸭</td>
<td>隆江猪脚饭</td>
<td>￥88</td>
</tr>
</table>
<script>
// 需求1：全选/全不选 点击控制 下面三个checkbox的状态
// 1. 获取事件源：checkbox#checkAll，所有checkbox.check（要操作的元素）
let checkAll = document.querySelector('#checkAll')
let checks = document.querySelectorAll('.check')
// 2. 事件类型：点击onclick
checkAll.onclick = function () {
// 3. 事件处理：让checkAll的状态控制所有的check状态（.check是多个元素，需要遍历）
// console.log(checkAll.checked) // 代表checkAll的选中状态
// 用checkAll的状态，控制所有的check状态
checks.forEach(function (check) {
check.checked = checkAll.checked
})
}
// 需求2：子菜单如果全选中，主菜单也选中；否则主菜单不选中
// 1. 给所有的子菜单添加点击事件：遍历，然后添加
checks.forEach(function (check) {
check.onclick = function () {
// console.log(check.checked)
// 2. 事件处理
// 2.1 假设所有菜单都选中了：let flag = true
let flag = true
// 2.2 验证：遍历所有的子菜单，如果菜单中有没有选中的：假设失败：flag = false
for (let i = 0; i < checks.length; i++) {
if (checks[i].checked == false) {
// 假设失败
flag = false
// 有一个没选中：假设已经失败了：结束循环
break
}
}
// console.log(flag)
// 2.3 将flag的值赋值给主菜单：checkAll.checked = flag
checkAll.checked = flag
}
})
</script>
</body>
最后
以上就是缥缈向日葵为你收集整理的操作属性-样式属性`document.querySelector`/表单属性/单击，双击，鼠标移入（悬停）事件/案例-开关灯-表单禁用和开启-二维码显示与隐藏-点餐系统的全部内容，希望文章能够帮你解决操作属性-样式属性`document.querySelector`/表单属性/单击，双击，鼠标移入（悬停）事件/案例-开关灯-表单禁用和开启-二维码显示与隐藏-点餐系统所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复