10.12-526互联

今天写了一个js事件监听的代码，主要功能有

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input  id="nn" type="text" value="NIUNIUNIU" onfocus="Lower()" onblur="Upper()">
<div class="cls">石家庄铁道大学</div>
<div class="cls">信息科学与技术学院</div>
    <input type="checkbox" name="hobby">音乐
    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">游戏
    <input type="checkbox" name="hobby">阅读
    <div>
        <input type="button" name="全选" value="全选" onclick="qlick()">
    </div>
    <div>
        <input type="button" name="反选" value="反选" onclick="flick()">
    </div>
<script>
        //1、给div标签增加红色字体very good
//         var divs=document.getElementsByTagName('div') ;
// for(let i=0;i<divs.length;i++)
// {
//     divs[i].innerHTML+="<font color='red'>very good</font>"
// }
//2、使复选框全部选择  首先按照name获取元素
// var ins=document.getElementsByName('hobby');
// for(let i=0;i<ins.length;i++)
// {
//     const check=ins[i];//获取每一个元素
//     check.checked=true;//选中状态
// }
//变成小写 
function Lower()
{
var te=document.getElementById("nn");
te.value=te.value.toLowerCase();
}
//变成大写
function Upper()
{
var te=document.getElementById("nn");
te.value=te.value.toUpperCase();
}
// //使复选框全部勾取
function qlick()
{
var ins=document.getElementsByName('hobby');
for(let i=0;i<ins.length;i++)
{
    const check=ins[i];
    check.checked=true;
}
}
//使复选框全部取消勾取
function flick()
{
var ins=document.getElementsByName('hobby');
for(let i=0;i<ins.length;i++)
{
    const check=ins[i];
    check.checked=false;
}
}
    </script>
</body>
</html>

10.12