1_2jQuery初次使用

jQuery如何引入?

实现隔行变色的效果，在使用jQuery实现效果之前，先使用在HTML中使用class属性直接标记、使用JavaScript来实现动态隔行变色，然后再采用jQuery来实现，可以明显体现到jQuery的方便和简单。

原生JavaScript方式实现

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
             .a {
                  background-color:  greenyellow;
             }
             .b {
                  background-color:  yellowgreen;
             }
             .c {
                  background-color: yellow;
             }
         </style>
         <script type="text/javascript">
             //页面加载后调用一个匿名函数 
             window.onload = function() {
                  //获取所有的行 
                  var arr = document.getElementsByTagName("tr");
                  //对所有的行动态实现隔行变色   
                  for(var i = 0; i < arr.length; i++) {
                      if(i == 0) {
                          arr[i].className   = "a";
 
                      }   else if(i % 2 == 1) {
                          arr[i].className   = "b";
                      }   else {
                          arr[i].className   = "c";
                      }
                  }
             }
         </script>
    </head>
    <body>
         <table class="datalist">
             <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Class</th>
                  <th scope="col">Birthday</th>
                  <th scope="col">Constellation</th>
                  <th scope="col">Mobile</th>
             </tr>
             <tr>
                  <td>isaac</td>
                  <td>W13</td>
                  <td>Jun   24th</td>
                  <td>Can</td>
                  <td>1118159</td>
             </tr>
             <tr>
                  <td>fresheggs</td>
                  <td>W610</td>
                  <td>Nov   5th</td>
                  <td>Scorpio</td>
                  <td>1038818</td>
             </tr>
             <tr>
                  <td>girlwing</td>
                  <td>W210</td>
                  <td>Sep   16th</td>
                  <td>Virgo</td>
                  <td>1307994</td>
             </tr>
             <tr>
                  <td>tastestory</td>
                  <td>W15</td>
                  <td>Nov   29th</td>
                  <td>Sagittarius</td>
                  <td>1095245</td>
             </tr>
         </table>
    </body>
</html>

使用jQuery方式实现

<!DOCTYPE html>
<html>
    <head>
         <meta charset="utf-8">
         <title></title>
         <!--引入jQuery文件-->
         <script  src="js/jquery.min.js"></script>
         <script>
             $(function(){
                  $("tr:odd").css("backgroundColor","yellowgreen")
                  $("tr:even").css("backgroundColor","lightyellow")
                  $("tr:first").css("backgroundColor","greenyellow")
             })
         </script>
    </head>
    <body>
         <table class="datalist"   summary="list   of members in EE Studay" id="oTable">
             <tr>
                  <th scope="col">Name</th>
                  <th scope="col">Class</th>
                  <th scope="col">Birthday</th>
                  <th scope="col">Constellation</th>
                  <th scope="col">Mobile</th>
             </tr>
             <tr>
                  <td>isaac</td>
                  <td>W13</td>
                  <td>Jun   24th</td>
                  <td>Cancer</td>
                  <td>1118159</td>
             </tr>
             <tr>
                  <td>fresheggs</td>
                  <td>W610</td>
                  <td>Nov   5th</td>
                  <td>Scorpio</td>
                  <td>1038818</td>
             </tr>
             <tr>
                  <td>girlwing</td>
                  <td>W210</td>
                  <td>Sep   16th</td>
                  <td>Virgo</td>
                  <td>1307994</td>
             </tr>
             <tr>
                  <td>tastestory</td>
                  <td>W15</td>
                  <td>Nov   29th</td>
                  <td>Sagittarius</td>
                  <td>1095245</td>
             </tr>
         </table>
    </body>
</html>

通过案例我们发现,引入jQuery后我们的js代码变的简单,和write less,do more的目标特别契合

jQuery页面加载函数

页面加载函数是页面加载完毕事件绑定的函数,该函数在后面应用比较多,所以再此处强调一下jQuery中的页面加载函数。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <script type="text/javascript" src="js/jquery.min.js" ></script>
                <script>
                        /*jQuery(document).ready(function (){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })*/
                        
                        // jQuery  可以简写 $
                        /*$(document).ready(function (){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })*/
                        
                        
                        $(function(){
                                var domS1=document.getElementById("s1");
                                console.log(domS1.innerText);
                        })
                        
                        $(function(){
                                console.log("第二个页面加载函数")
                        })
                        
                        $(function(){
                                console.log("第三个页面加载函数")
                        })
                        
                        
                </script>
        </head>
        <body>
                <span id="s1">测试文字</span>
        </body>
</html>

总结:

关于jQuery的使用需要先导入jQuery的js文件,jQuery本身就是一个JS文件。jQuery.min.js是jQuery文件的压缩版,生产环境下推荐压缩版,$是jQuery是使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。

作用1：页面加载函数

jQuery(document).ready(function(){});和$(document).ready(function({}));简写为$(function(){}),相当于window.onload=function(){}但是功能比window.onload更强大window.onload一个页面只能写一个,但是可以写多个$() 而不冲突,window.onload要等整个页面加载完后再执行(包括图片、超链接、音视频等)，但是$()的执行时间要早

作用2：选择器标志 $(selector)

选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍

posted @ 2023-01-06 16:35 CodeWhisperer001 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

1_2jQuery初次使用

公告