学会使用api文档查阅各种用法！！！

每次在使用前都要引入jquery库

  1. <script src="lib/jquery-3.2.1.js"></script>

jquery语法

获取元素

JS:document.getElementById(); JQ:$(“#id”);

Jquery对象与DOM对象转换

例如：向页面<span></span>标签的元素添加/修改信息

  1. <script>
  2. //js方式实现
  3. function JSWrite(){
  4.     //document.getElementById("span1").innerHTML="美美哒！";
  5.     var spanEle = document.getElementById("span1");
  6.     //DOM对象转换成JQ对象的第一种方式
  7.     $(spanEle).html("美美哒！");
  8. }
  10. //JQ方法实现        
  11. $(function(){
  12.     document.getElementById("btn1").onclick = function(){
  13.     document.getElementById("span1").innerHTML="帅帅哒！";
  14. }
  15.     $("#btn1").click(function(){
  16.     //JQ对象转换成DOM对象的第一种方式
  17.     //$("#span1")[0].innerHTML="呵呵哒！";
  18.     //JQ对象转换成DOM对象的第二种方式
  19.     $("#span1").get(0).innerHTML="呵呵哒！";
  20.     });
  22. });
  23. </script>
  1. <div id="app">hello world</div>
  3. <script>
  4.         let app = $("#app");
  5.         // jquery方法
  6.         app.click(function(){
  7.             $(this).css({
  8.                 color:"red"
  9.             })
  10.         })
  12.         //原生js方法
  13.         var p = document.getElementById("app")
  14.         p.onclick=function(){
  15.             this.style.color="red"
  16.         }
  17.  </script>

选择器

  1. <body>
  2.     <div style="background-color: salmon;" id="div1"></div>
  3.     <hr>
  4.     <div style="background-color: salmon;" id="div2"></div>
  5.     <hr>
  6.     <div style="background-color: salmon;"></div>
  7.     <hr>
  8.     <div style="background-color: salmon;"></div>
  9.     <hr>
  10.     <div style="background-color: salmon;"></div>
  11.     <hr>
  12.     <div style="background-color: salmon;"></div>
  13.     <hr>
  14.     <div style="background-color: salmon;"></div>
  15.     <hr>
  16.     <div style="background-color: salmon;"></div>
  17.     <hr>
  19.     <script src = "../jquery.js"></script>
  20.     <script>
  21.         $("#div1,#div2").height(150).width(150); //可以放多个选择器
  22.     </script>

案例

案例1：使用JQ完成表格的隔行换色

  1. <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  2. <link rel="stylesheet" type="text/css" href="../css/style.css"/>
  3. <script>
  4.     $(function(){
  5.         //CSS文件中配置好even和odd两个class类
  6.         $("tbody tr:even").addClass("even");
  7.         $("tbody tr:odd").addClass("odd");
  8.     });
  9. </script>

　案例2：使用JQ完成全选和全不选

  1. <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
  2. <script>
  3.     $(function(){
  4.         //找到下面所有的复选框并设置属性checked()
  5.         /*if($("#select")[0].checked==true){
  6.             $(".selectOne").attr("checked",true)
  7.         }*/
  8.         $("#select").click(function(){
  9.             //$(".selectOne").attr("checked",this.checked);
  10.             //注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。
  11.             $(".selectOne").prop("checked",this.checked);
  12.         });
  13.     });
  14. </script>