目录
前言
如果你看过小阿飞的上一篇文章,那么下面这些专业词汇的英文你一定会知道,考考你们,它们用英文怎么写呢?_?
函数 窗口对象 数学对象 日期对象
定时器 循环定时器 点击事件 随机数
-----------------------------想一想&_&------------------------------------------------------------------------------------------------------------------------------------写一写*_*-------------------------------------------------------------------------------------------------------------------------------------再看答案0_0---------------------------------------------
---------------------------------------- 不要偷看!_！-----------------------------------------------------------------------
* 函数 function(){} * 窗口对象 window * 数学对象 Math * 日期对象 Date
*定时器 setTimeout *循环定时器 setInterval *点击事件 onclick *随机数 Math.random()
步入正题：我们知道html是一门标签话的语言,那么,我们可以在JS中操作html中的元素吗?(这里的元素指的就是html中的标签),答案是可以,具体如何操作,待小阿飞在下面逐步讲解：
正文内容：
使用JS制作图片自动切换效果
首先你需要在images文件夹中任意保存三张图片,为了方便自动切换,最好将后缀名改为下图这样
然后用html语言和JS中操作html元素方法将这三张图片自动循环显示(详见下代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JS制作图片自动切换效果</title>
<!-- 图片切换 style样式标签 -->
<style>
/* 标签选择器 */
div{
width: 400px;
height: 300px;
/* 从center中间开始平铺，cover铺满整个块状div */
background: url("images/a0.jpg") center/cover;
}
</style>
</head>
<body>
<!--写一个块状标签div放图片-->
<div id='d1'></div>
<!--script标签中操作html元素-->
<script>
var b=1;//初始图片就是a0.jpg,所以下标从1开始
// setInterval(正常函数:function a1(){ })
// 简写(箭头函数就是正常函数的简写)
setInterval(()=>{
// 操作元素"html"的css
//方法:用div的编号点出它的style样式中的需要操作修改的属性
d1.style.backgroundImage="url('images/a"+(b%3)+".jpg')"//显示a1
b++;//显示a2....
// (b%3):3%3=0,4%3=1,5%3=2,6%3=0....一直在0，1，2中间循环
},1000)
</script>
</body>
</html>
还可以用以上方法让用户点更换图片(详见下代码)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击按钮更换图片</title>
</head>
<body>
<script>
<img id='m1' src="images/a0.jpg" width="400px" height="300px"/>
<button onclick="fn1()">更改图片</button>
var m=1;
function fn1(){
// 要想在函数中操作一个html元素(标签),就要用到它的id
m1.src='images/a'+(m%3)+'.jpg'
m++;//2%3=2
}
</script>
</body>
</html>在JS中获取HTML元素
1,直接使用id点出来,例如：d1.style.background='blue' 前面讲了
2,JS中获取HTML元素的方法: document.getElementById()根据标签中的id得到元素Element
方法1和2的代码如下
d1是一个div标签上的id编号, 虽然方法2看起来比方法1还多了一行代码,但是方法1在有些版本较低的html中是无法使用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更改一个div方块的颜色</title>
<style>
div{
width: 400px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<button onclick="fn1()">点我改一个方块颜色(ById)</button>
<script>
function fn1(){
//方法1: 通过元素的id来更改元素中style样式对应的属性
//d1.style.background='blue'
//方法2:
var d=document.getElementById("d1")
d.style.background='blue'
}
</script>
</body>
</html>
上面的代码只更改了一个div标签的颜色,那如果要你更改20个,30个甚至100个div标签的颜色,你还会根据id来更改吗？
<div id="1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<div ></div>
<!-- ....... -->
<div id="dn"></div>可见,这样取id十分麻烦，这里就要像大家介绍在JS中获取HTML元素的另外几个方法了
JS中获取HTML元素的方法：
3，document.getElementsByTagName() : 通过标签名
4，document.getElementsByClassName() : 通过标签中的class属性
同4 ，document.getElementsByName() ：通过标签中的name属性
3,4是获得HTML元素集合:getElements
集合的长度会随着页面元素的增删而变化
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>更改多个div方块的颜色</title>
<!-- -->
<style>
div{
width: 400px;
height: 300px;
background: red;
/* 修改元素的盒类型(行内，块状，行内块状) */
display: inline-block;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div ></div>
<div ></div>
<div ></div>
<div class="a"></div>
<div class="a"></div>
<br>
<button onclick="fn2()">点我改所有的方格颜色(ByTagName)</button>
<button onclick="fn3()">点我改部分的方格颜色(ByClassName/byName)</button>
<script>
// 用标签名更改所有元素的颜色(只要拿到所需要更改的元素的名称即可，不需要拿到id)
// TagName:元素名称,getElementsByTagName("标签名")根据元素名称得到所有的元素Elements
function fn2(){
var ds=document.getElementsByTagName('div')
//ds.style.background='blue';这样写会报错：
//打印console.log(ds)发现ds是一个放标签的数组(见下一张图)
// 于是:我们可以:便利数组中的元素(标签)
//遍历数组
/**
//方法1：for循环
for(var i=0;i<ds.length;i++){
//ds[i]是元素数组ds[]中的标签,标签中有style属性,所以可以点出
ds[i].style.background="pink"
}
**/
//方法2：foreach(更简单)
for(var i of ds){
//i就是ds数组中的每一个元素
i.style.background="Purple"
}
}
// 使用class选择器更改部分元素的颜色
function fn3(){
// 在JS中Class就叫做ClassName
var ds=document.getElementsByClassName('a')
// Elements有s,可以遍历
for(var i of ds){
i.style.background="yellow"
}
}
// 上面函数的写法都像我们展示了如何在函数中操作html中的元素(标签)
</script>
</body>
</html>
不在这几个方法中使用ds.style.background='blue' ，是因为在使用它是报了Cannot set properties of undefined(setting 'background')错误，即不能设置未定义属性(设置背景属性时报错)，这种报错可能是background前的ds.style未定义，可以打印验证console.log(ds.style)
,再打印console.log(ds)可以发现ds是一个放html元素的数组,而style样式是标签中的属性,ds数组中没有,所以ds数组点不出来style,打印结果见下图
HTML元素上的常用事件
onclick : 点击事件 ondblclick : 双击事件
onfocus : 获得焦点事件 onblur : 失去焦点事件
onmouseover : 鼠标移入 onmouseout : 鼠标移出
让我们简单的调用一下这些方法吧
<body>
<input type="text" onclick="fn1()" ondblclick="fn2()"/>
<input type="text" onfocus="fn3()" onblur="fn4()"/>
<input type="text" onmouseover="fn5()" onmouseout="fn6()"/>
<script >
function fn1(){
console.log('单击')//控制台打印
}
function fn2(){
console.log('双击')
}
function fn3(){
console.log('获得焦点')
}
function fn4(){
console.log('失去焦点')
}
function fn5(){
console.log('鼠标移入')
}
function fn6(){
console.log('鼠标移出')
}
</script>
</body> 运行结果要在控制台查看哦(小阿飞前面的文章教过怎么打开控制台哦*—*) 
HTML元素上的常用属性
* textContent : 标签的文本内容(定义的标签不生效)
* InnerHTML : 标签中的html内容和文本内容(标签会生效)
* value : 元素的值(适用具备value属性的元素,比如输入框中就有value属性而div标签中就没有要拿div的内容可以用textContent,或者InnerHTML(使用方法在上一篇文章))
* checked ：是否被选中(单选框,多选框)
* style : 标签中的style属性(用于设置样式,比如上面的代码(修改div的颜色))
请听题: 有10个输入框，运用上面的的知识,实现：
1. 不同按钮点击的时候为当前界面中的input赋上不同的值
2. 当input获得焦点时清空他的值，失去焦点的时候判断是否为数字 解法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML元素上的常用属性</title>
</head>
<body>
<!-- input*10再按下Tab键即可生成10个输入框 -->
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<button onclick='fn1("嘻嘻")'>嘻嘻</button>
<button onclick='fn1("哈哈")'>>哈哈</button>
<script>
// 1. 不同按钮点击的时候为当前界面中的input赋上不同的值
function fn1(a){
/*1,拿到所有输入框
这里就可以使用我之前讲的四种在函数中操作html元素的方法
document.getElementById() : 通过标签中的id属性
下面三种方法可以获得HTML元素集合:
集合的长度会随着页面元素的增删而变化
document.getElementsByTagName() : 通过标签名
document.getElementsByClassName() : 通过标签中的class属性
document.getElementsByName() ：通过标签中的name属性
JS中class就相当于className
*/
var ds=document.getElementsByTagName('input')
//2,更改输入框的值value
for(var i of ds){// i就是ds[i]
i.value=a//a就是传入的参数:嘻嘻
}
}
//2. 当input获得焦点时清空他的值，失去焦点的时候判断是否为数字
// b.给所有的输入框赋值（失去焦点事件，获得焦点事件）
(()=>{//匿名函数
// a,找到页面中所有的输入框
var ds=document.getElementsByTagName('input')//ds是放所有输入框的集合
// 遍历ds
for(var i of ds){
i.onfocus=()=>{//操作元素i(输入框)中获得焦点时的情况
i.value='获得焦点了'//情况
}
i.onblur=()=>{
i.value='失去焦点了'//情况
}
}
})();
</script>
</body>
</html>
但是像上面这样写就会只清空最后一个输入框并且赋值,效果如下图
这是因为,在便利标签数组时使用foreach循环遍历ds时用了var声明,想要改善,用let替代var就可以解决上图的问题了^_^(let的意思是定义局部变量)
(()=>{
//1，拿到所有input输入框的数组
var ds=document.getElementsByTagName('input')
//2，使用let遍历数组
for(let i of ds){
i.onfocus=()=>{//操作元素i(输入框)中获得焦点时的情况
i.value='获得焦点了'//情况
}
i.onblur=()=>{
i.value='失去焦点了'//情况
}
}
})(); 控制HTML元素的显示和隐藏
1,display中的属性 none : 不显示(页面不会有空间)->隐藏
block : 以块状元素显示
inline : 以行内元素显示
2, visible ：可见，hidden : 不可见(会占据页面空间)
3, opacity透明度:用于控制元素的透明度 0~1之间的值,0:完全透明,1:完全不透明
学以致用：控制div方块的显示和隐藏
通过分析,可以知道方块就是div元素,所以我们可以使用今天学到的在函数中控制html元素的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>控制元素的显示和隐藏</title>
<style>
div{
width: 400px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div id="d1"></div>
<button onclick="fn1()">点我隐藏方块</button>
<button onclick="fn2()">点我更改透明度</button>
<script>
function fn1(){
// =赋值,==比较内容,===严格比较
//单词比较最好用===严格比较
if(d1.style.display=='none'){//如果元素是隐藏
// d1.style.display='block';//就显示，块状标签
d1.style.display='visible';
}else{
// d1.style.display='none';
d1.style.display='hidden';
}
}
function fn2(){
// 数字比较就只用==比较内容就可以了
if(d1.style.opacity==0.5){//当div方块半透明时
d1.style.opacity=1// 改为完全不透明
}else{
d1.style.opacity=0.5
}
}
</script>
</body>
</html>
实现左侧菜单功能和全选多选框功能
都看到这里了,相信这两个功能你一定能写出来(相关代码和运行结果如下)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现左侧菜单功能</title>
</head>
<body>
<ul>
<!-- 点击家电时将家电下面的内容隐藏 -->
<!-- 将家电随便套一个标签用来调用函数 -->
<!-- 因为li标签将ul,li标签都括起来了,<li>中调用onclick="fn1('u1')时li括起来的标签也被设置调用了 -->
<li><i onclick="fn1('u1')">家电</i>
<ul id="u1">
<!-- 下面三个li元素都用id来代表了 -->
<li>冰箱</li>
<li>洗衣机</li>
<li>电视</li>
</ul>
</li>
<li><span onclick="fn2('u2')">水果</span>
<ul id="u2">
<li>苹果</li>
<li>西瓜</li>
<li>葡萄</li>
</ul>
</li>
</ul>
<script>
//根据id拿出对应的元素
//将对应元素设置为不显示
function fn1(id){
//根据id拿出对应的元素
// getElementById()也比较常用
var li=document.getElementById(id)//这个id就是传入的参数
if(li.style.display=='none'){//如果元素是隐藏
li.style.display='block';//就显示，块状标签
}else{
li.style.display='none';
}
}
function fn2(id){
var li=document.getElementById(id)//这个id就是传入的参数
if(li.style.display=='none'){//如果元素是隐藏
li.style.display='block';//就显示，块状标签
}else{
li.style.display='none';
}
}
</script>
</body>
</html>
点击家电或者水果就可以隐藏家电下面的菜单了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选多选框功能</title>
<!-- 点击一个框就选中所有框 -->
</head>
<body>
<table>
<tr>
<!-- this.checked将这个多选框被选中的状态作为参数传给函数 -->
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
<tr>
<td><input type="checkbox" onclick="fn4(this.checked)"></td>
</tr>
</table>
<script>
function fn4(status){//status状态
//拿到所有的多选框
var ds=document.getElementsByTagName('input')
//设置选中为第一个多选框的状态
for(let i of ds){
i.checked=status
}
}
</script>
</body>
</html>
任意点击一个框,就可以选中所有的框
小结
今天的JS内容就讲到这里了,对JS感兴趣的朋友可以关注我，后续将继续发布相关文章带大家进一步了解学习JS
1957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
