20220318

最新推荐文章于 2024-07-15 13:17:25 发布

renchaorenlai

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量62

点赞数

文章标签： html

本文链接：https://blog.csdn.net/renchaorenlai/article/details/123812861

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="div">
           <a id="4399" href="https://lpl.qq.com/es/team_detail.shtml?tid=2" target="_blank">
               <img id="ig" src="img/ig.jpg" width="100px" height="100px"/>
           </a>
       </div>
       
       <div>
           <input type="radio" name="lol" οnclick="kaSha()" />卡莎
           <input type="radio" name="lol" οnclick="yaSuo()" />亚索
           <br />
           <img id="lol"/>
       </div>
       <button οnclick="tianJia()">添加图片</button>
       <button οnclick="shanChu()">删除图片</button>
       <div id="img">
           <img id="i" src="img/ig.jpg" width="200px" height="200px"/>

       </div>
       <script type="text/javascript">
           //DOM 针对于某一个或者某些标签进行增删改操作，
           //为某一个便签添加子标签，删除子标签，修改属性，前提：获取到指定的标签
           //DOM ，参考我们的编码，看得懂，知道在做什么，参考我们的编码实现即可

           //获取节点, 元素节点，标签
           var ele = document.getElementById("div");
           var child = ele.childNodes;
           var par = ele.parentElement;

           //节点不能自杀的，删除一个节点的话，必须要由父节点才能删除
           var t = ele.nodeType; // 数字，不同的数字代表的意思是不一样的
           var nn = ele.nodeName; // 节点的名称
           var nv = ele.nodeValue; // 节点的值
           console.log(t)
           console.log(nn)
           console.log(nv)
           ele.setAttribute("class","hello");


           //单选某个选项出现对应图片
           function kaSha(){
               var ele=document.getElementById("lol")
               ele.setAttribute("src","img/kasha.jpg")
               daXiao(ele)
           }
           function yaSuo(){
               var ele=document.getElementById("lol")
               ele.setAttribute("src","img/yasuo.jpg")
               daXiao(ele)
           }
           function daXiao(ele){
               ele.setAttribute("width","100px")
               ele.setAttribute("height","100px")
           }


           //删除标签
           function shanChu(){
               //思路：先获取父元素，在获取子元素，通过父元素删除子元素
               var ele=document.getElementById("i");
               var father=ele.parentNode;
               father.removeChild(ele)
           }

           //不管是添加元素还是删除元素，都要通过父元素来操作
           function tianJia(){
               var ele=document.getElementById("img");
               //创建一个图片标签
               var img=document.createElement("img");
               //设置图片标签的熟悉
               img.setAttribute("src","img/ig.jpg")
               img.setAttribute("width","200px")
               img.setAttribute("height","200px")
               img.setAttribute("id","i")
               //为父元素添加一个子节点
               ele.appendChild(img)
           }
       </script>

       
       行：<input id="row" /><br />
       列：<input id="col" /><br />
       <button οnclick="biaoGe()">生成表格</button>
       
       <div id="biaoge">

       </div>
       <script type="text/javascript">
           function biaoGe(){
               var hang=document.getElementById("row").value;//获取用户输入的row值
               var lie=document.getElementById("col").value;//获取用户输入的col值
               var table=document.createElement("table");//创建一个表格
               //设置表格的属性
               table.setAttribute("border","1px")
               table.setAttribute("bordercolor","blue")
               table.setAttribute("cellpadding","0px")
               table.setAttribute("cellspacing","0px")
               table.setAttribute("width","500px")
               table.setAttribute("height","500px")
               for (var a = 0; a < hang; a++) {
                   var tr=document.createElement("tr");
                   for (var b = 0; b < lie; b++) {
                       var td=document.createElement("td")
                       tr.appendChild(td)
                   }
                   table.appendChild(tr)
               }
               var div=document.getElementById("biaoge");
               div.appendChild(table)
           }
       </script>


       
       <input type="checkbox" name="gua" id="ft" οnclick="dianGua()" />飞天<br />
       <input type="checkbox" name="gua" id="dd" οnclick="dianGua()" />遁地<br />
       <input type="checkbox" name="gua" id="ts" οnclick="dianGua()" />透视<br />
       <input type="checkbox" name="gua" id="zm" οnclick="dianGua()" />自瞄<br />
       <input type="checkbox" name="gua" id="st" οnclick="dianGua()" />锁头<br />
       <input type="checkbox" name="all" id="qx" οnclick="quanXuan()" />全选<br />
       <script type="text/javascript">
           //将所有多选框通过id都获取出来
           var gua1=document.getElementById("ft");
           var gua2=document.getElementById("dd");
           var gua3=document.getElementById("ts");
           var gua4=document.getElementById("zm");
           var gua5=document.getElementById("st");

           //设置多选框的单击事件（onclick）
           function dianGua(){
               //先利用并且（&&）定义一个变量来判定所有多选框的选择情况
               var quanxuan=gua1.checked&&gua2.checked&&gua3.checked&&gua4.checked&&gua5.checked
               //利用if来判定并且&&最后的结果
               if (quanxuan==true) {//如果全都勾选则为true
                   quan.checked=true//此时全选框自动勾选
               }else{//如果有任意一个没勾选则为false
                   quan.checked=false//此时全选框则不勾选
               }
           }
           //先通过id获取全选框，再获取name值为gua的所有多选框
           var quan=document.getElementById("qx");
           var gua=document.getElementsByName("gua");
           //定义一个全选函数，实现点击全选框其他多选框也跟随全选或不全选
           function quanXuan(){
               //通过循环实现，将全选框的全选或者全不选都赋值给每一个name为gua的多选框
               for (var i = 0; i < gua.length; i++) {
                   gua[i].checked=quan.checked
               }
           }



       </script>







   </body>
</html>

renchaorenlai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20220318

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="div"> <a id="4399" href="https://lpl.qq.com/es/team_detail...
复制链接

扫一扫