JavaScript.BOM

liwangdeng

已于 2022-03-01 16:57:40 修改

阅读量562

点赞数 1

文章标签： p2p linq gnu

于 2022-03-01 16:57:38 首次发布

本文链接：https://blog.csdn.net/liwangdeng/article/details/123204221

版权

本章思维导图

利用JS制作图片自动切换效果

1.首先定义背景，设置背景

2.利用循环定时实现循环切换

<style>      //标签
        div{
            width: 400px;       //定义标签div   宽度
            height: 300px;      //长度
            background: url("images/a0.jpg") center/cover;    //背景图片 居中/铺满
        }
    </style>
<body>
<div id="d1"></div>      //定义div
<script>
var b=1;               //声明变量
setInterval(()=>{
d1.style.background='url("images/a'+(b%3)+'.jpg")';    //拿到d1样式，文件3张图排序，实现循环
b++;
},1000);        //一秒切换
</script>

在JS中获取HTML元素

document.getElement

文件获得元素

1.document.getElementById

id选择器

2.document.getElementsByTagName

标签选择器

3.document.getElementsByClassName

类选择器

 <style>
        div{
            width: 100px;
            height: 50px;
            background:red;
            display: inline-block;
        }
    </style>
<body>
<div id="d1" class="a"></div>   //定义3个div
<div id="d2" class="a"></div>
<div id="d3"></div>
<br>     //换行
<button onclick="fn1()">id）更改颜色</button>   //定义3个按钮添加点击事件
<button onclick="fn2()">标签）更改颜色</button>
<button onclick="fn3()">类）更改颜色</button>
<script>
function  fn1(){
 var d=document.getElementById("d1")     //id选择器，拿取id
        d.style.background="yellow"
}
//同时将3个div背景颜色改变，利用标签选择器
function fn2(){
 var ds=document.getElementsByTagName("div")  //直接填写标签，当Element后加s时那到的ds为数组
//for循环遍历
for(var i=0,i<ds.length;i++){
ds[i].style.background="pink"
}
}
//可通过foreach遍历更加便捷
function fn2(){
var ds=document.getElementById("d1");
for(var i of ds){
i.style.background="yellow"
}
}
//通过标签calss属性操作HTML
//类选择器 会拿出多个元素
function fn3(){
var ds = document.getElementsByClassName("a")
for(var i of ds){
 i.style.background="yellow"
}
}
</script>

HTML上常使用的事件

1.onclick 点击事件

2.ondblclick 双击事件

3.onfocus 获得焦点

4.onblur 失去焦点

5.onmouseover 鼠标移入

6.onmouseout 鼠标移出

注：foreach时不能用var要用let

<body>
//定义输入框
<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"><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"><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>
    function fn1(a) {
        //1.拿到所有的输入框
        var is=document.getElementsByTagName("input")  //标签选择器
        //2.更改值
        for(var i of is){
            i.value=a   //点击按钮将文本框赋值
        }
    }
//找到页面中所有的输入框
    //给所有的输入框赋值（失去焦点事件，获得焦点事件）
    (()=>{                 //匿名函数和调用
        var is=document.getElementsByTagName("input")
        //只要碰到foreach循环 不能用var
        //使用let(定义局部变量)
        for(let i of is){
            //给元素的获得焦点事件赋值
            i.onfocus=()=>{
                i.value=""  // 将它替换成空字符
            }
            //给元素的失去焦点事件赋值
            i.onblur=()=>{
                i.value="巴拉巴拉"  //将其赋值
            }
        }
    })();
</script>

控制元素显示（style）

1.display（会留有空间）

none 不显示

block 以块状元素显示

inline 以行内元素显示

inline-block 以行块显示

2.visidility（不会留有空间）

visible 可见

hidden 不可见

3.opacity 0-1控制透明度

<style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
<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"
        }else{
            d1.style.display="none"
        }
    }

    function fn2() {
//相当于隐藏
        if(d1.style.opacity==0){
            d1.style.opacity=1
        }else{
            d1.style.opacity=0
        }
    }

完成菜单

1.利用无序排序

2.函数和id选择器

<ul>  //无序排序
    <li><i onclick="fn3('u1')">语文</i>  //点击事件不能直接加在li标签
        <ul id="u1">
            <li>语文a</li>
            <li>语文b</li>
            <li>语文c</li>
        </ul>
    </li>
    <li><span onclick="fn3('u2')">数学</span>
        <ul id="u2">
            <li>数学a</li>
            <li>数学b</li>
            <li>数学c</li>
        </ul>
    </li>
</ul>
<script>
function fn3(id) {    //传值id
        //根据id拿出对应的元素
        var li=document.getElementById(id)   //id选择器
        //将对应元素设置为不显示
        if(li.style.display==="none"){
            li.style.display="block"
        }else{
            li.style.display="none"
        }
    }
</script>

完成多选操作

1.checked是否被多选状态

2.border 表格

3.checkbox 多选框

<table border>  border表格
    <tr>
        <td><input type="checkbox" onclick="fn4(this.checked)"></td>//this.chacked是否自己被选中的状态
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
</table>
<script>
    
    function fn4(status) {
        //拿到所有的多选框
        //设置多选框都为这状态 status
        var is=document.getElementsByTagName("input")
        for(let i of is){
            //i就是每一个多选框
            i.checked=status
        }
    }
</script>

liwangdeng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript.BOM

本章思维导图利用JS制作图片自动切换效果1.首先定义背景，设置背景2.利用循环定时实现循环切换<style> //标签 div{ width: 400px; //定义标签div 宽度 height: 300px; //长度 background: url("images/a0.jpg") center/cover; //背景图片居中/铺满..
复制链接

扫一扫