20220323

最新推荐文章于 2024-07-15 13:24:30 发布

renchaorenlai

最新推荐文章于 2024-07-15 13:24:30 发布

阅读量44

点赞数

文章标签： html

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

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-1.12.4.js" type="text/javascript">

       </script>
       <style type="text/css">
           .div1{
               width: 200px;
               height: 200px;
               background-color: aliceblue;
           }
       </style>
   </head>
   <body>
       <button id="btn">简单的一个按钮</button>
       <div id="div1" class="div1"></div>
       <div id="div2"></div>
       <hr />

       <button id="changecoler">隔行变色</button>
       <h3>你的偶像</h3>
       <ul>
           <li>冰冰</li>
           <li>热巴</li>
           <li>亦菲</li>
           <li>志玲</li>
       </ul>
       <hr />

       <input id="uname" /><span id="span"></span>
       <hr />

       <button id="tjimg">添加图片</button>
       <button id="scimg">删除图片</button>
       <div id="img"></div>
       <hr />



       <script type="text/javascript">
           //DOM
           //js的dom操作
           //jquery对dom
           //jquery动态绑定事件的方式有2种
           //①
//           $("#btn").bind("click",function(){
//
//           })
           //②
//           $("#btn").click(function(){
//
//           })

//简单的一个按钮
           $("#btn").bind("click",function(){
               $("#div2").addClass("div1");
           })

           //隔行变色
           $("#changecoler").click(function(){
               $("li:even").css("color","aquamarine")
               $("li:odd").css("color","lightpink")
           })

           //id=uname离焦事件
           var names=["houyuwei","wuyulian"]
           $("#uname").blur(function(){
               //1、获取用户输入的用户名
               var myname=$("#uname").val();
               //2、遍历数组，看一下数组中存不存在
               var a=0;
               for (var i = 0; i < names.length; i++) {
                   if (names[i]==myname) {
                       //已存在，不可使用
                       a=-1
                   }
               }
               //3、判断，存在的话不能使用，不存在就可以使用
               if (a==0) {
                   //4、提示
//                   $("#span").html("大聪明可以用")
//                   $("span").html("<font color='aquamarine'>臭小子可以用</font>")
                   $("#span").text("大聪明可以用")
               }else{
//                   $("#span").html("大聪明不能用")
//                   $("#span").html("<font color='red'>被别人用过了</font>")
                   $("#span").text("大聪明可以用")
               }

           })


           //添加图片
           $("#tjimg").click(function(){
               //使用jquery创建，添加，删除标签
               //创建标签：$("标签名")，同时设置属性，注意引号的问题
               var myimg=$("<img id='kasha' src='img/kasha.jpg' width='200px' height='200px' />");
               //把标签放在哪里
               $("#img").append(myimg)
           })
           $("#scimg").click(function(){
//               var myimg=$("<img src='img/kasha.jpg' width='200px' height='200px' />");
               $("#kasha").remove()
           })

       </script>
       
       
       
           
       </div>
       <script type="text/javascript">
//           $("#anniu").click(function(){
//               //分别获取用户输入的行列数值
//               var row=$("#row").val();
//               var col=$("#col").val();
//               //创建一个table标签
//               var table=$("<table border='1px' background='img/ig.jpg' cellpadding='0px' cellspacing='0px' width='500px' height='500px'></table>");
//               //利用循环给行赋值
//               for (var a = 0; a < row; a++) {
//                   var tr=$("<tr></tr>");//创建一个tr标签
//                   $(table).append(tr)//将tr标签设为table标签的子标签
//                   //利用循环给列赋值
//                   for (var b = 0; b < col; b++) {
//                       var td=$("<td></td>");//创建一个td标签
//                       $(tr).append(td)//将td标签设为tr标签的子标签
//                   }
//               }
//               $("#cuntable").append(table)//将table标签作为id为cuntable的标签的子标签
//           })

       </script>

       
       行：<input id="row" /><br />
       列：<input id="col" /><br />
       <button id="an">生成表格</button>
       <div id="ctable"></div>

       <script type="text/javascript">
           $("#an").click(function(){
               var row=$("#row").val();
               var col=$("#col").val();
               var table=$("<table width='300px' height='300px' bgcolor='aliceblue' cellspacing='0px' cellpadding='0px' border='5px'></table>");
               for (var i = 0; i < row; i++) {
                   var tr=$("<tr></tr>");
                   $(table).append(tr)
                   for (var j = 0; j < col; j++) {
                       var td=$("<td></td>");
                       $(tr).append(td)
                   }
               }
               $("#ctable").append(table)
           })









       </script>

renchaorenlai

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.4.js" type="text/javascript"> </script> <style ty...
复制链接

扫一扫

20220323

“相关推荐”对你有帮助么？