jQuery简单应用

来源：互联网发布：百度云管家网络异常1 编辑：程序博客网时间：2024/06/04 01:25

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       
       <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
   </head>
   <body>
          <input type="button" value="弹document框" id="btn1"/>
          <input type="button" value="弹jquery框" id="btn2"/>
          <br/>
          <input type="text" id="name" /><br/>
          <input type="text" id="pwd"/><br/>

          <table id="ta" border="1px" cellpadding="0px" cellspacing="0px" >
              <tr>
               <td>姓名</td>
               <td>性别</td>
              </tr>
          </table>
          <input type="button" id="btn3" value="添加"/>
          <input type="button" id="btn4" value="删除"/>
           <input type="button" id="btn5" value="替换"/>
          <br />
          <img src="img/cc.png" id="img1"/>
          <script type="text/javascript">
                $("#btn1").click(function(){
                   //jquery对象转换成document对象
                   var a=$("#btn1");
                   var b=a.get(0);
                   alert(b);
                });

                $("#btn2").click(function(){
                   //document对象转换成jquery对象
                   var a=document.getElementById("btn2");
                   var b=$(a);
                   alert(b)
                });
                $("#btn3").click(function(){
                   var na=$("#name").val();
                   var pwd=$("#pwd").val();
                   $("#ta").append("<tr><td>"+na+"</td><td>"+pwd+"</td></tr>")
                });
                $("#btn4").click(function(){
                   //删除索引为偶数的元素
                   $("tr:even").remove();
                   $("#img1").remove();
                });
                $("#btn5").click(function(){
                   //标签除了可以直接写
               //还可以是使用document创建出来的
               //还可以是document.getElementById()/$(选择器)
                      $("#img1").replaceWith("<img src='img/arrow-left-b.png' id='img1'/>")
                });
          </script>
   </body>
</html>

阅读全文

0 0