您的位置：首页 > Web前端 > JQuery

jQuery基础——JS和JQ的区别(可实现基础增删)

2018-01-03 20:39 375 查看


<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--jQuery使用：

        第一步就是导入类库

        jquery

        1.概念

       

        2.语法

        选择器：

        基本选择器：

        1.id -------------  $("#id")

        3.jQuery对象和原生对象转换

        4.明天

        对节点的增删改查

       

        报错：

        Uncaught ReferenceError: $ is not defined  没有找到引用的包

        -->
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航