zoukankan      html  css  js  c++  java
  • 初识jQuery 简单对比jQuery与HTML DOM的差别

    本文就不仔细介绍jQuery的使用方法,仅是比较一下jQuery与html dom对html网页的使用差别

    希望以后能更多使用jQuery而不是原始JavaScript(悲)

     

    简介:

    jQuery 是一个 JavaScript 函数库。

    jQuery 库包含以下特性:

    • HTML 元素选取
    • HTML 元素操作
    • CSS 操作
    • HTML 事件函数
    • JavaScript 特效和动画
    • HTML DOM 遍历和修改
    • AJAX
    • Utilities

    一、获取jquery源码

    可以从

    https://jquery.com/download/

    获取最新源码,建议下载compressed压缩版本,文件更小,节省网页内存

     

    二、引入jQuery代码

    <script type="text/javascript" src="jquery.js"></script>
    

      src为jQuery源码位置

    三、jQuery入口

        //jQuery的简洁入口
        $(function(){
        });        
    

      或

            //jQuery的标准入口
            $(document).ready(function(){
            });
    

      或

            //当前页面加载完成后执行
            window.onload = function(){
            } 
    

      

    四、jQuery语法

    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

    基础语法是:$(selector).action()

    • 美元符号定义 jQuery
    • 选择符(selector)“查询”和“查找” HTML 元素
    • jQuery 的 action() 执行对元素的操作

    五、jQuery API

     中文API网站:https://jquery.cuishifeng.cn/index.html

      其中包含但不限于对选择器、事件对象、属性、CSS样式、动画效果、文档处理等的使用方式

    六、实例对比

     这是一个轮播图,类似购物网站具体商品页面,每隔三秒自动切换到下一张图片,并且鼠标悬停在图片上时暂停播放

    图片下六个圆点可点击切换到对应顺序的图片,并且图片切换时对应圆点会变红

    最后两个按钮可以切换到上一张/下一张图片

    原生html

     1     <h1>轮播图</h1>
     2     <div id="did" onmouseover="doStop()" onmouseout="doStart()">
     3         <img src="./images/1.jpg" width="384"/>
     4         <img src="./images/2.jpg" width="384"/>
     5         <img src="./images/3.jpg" width="384"/>
     6         <img src="./images/4.jpg" width="384"/>
     7         <img src="./images/5.jpg" width="384"/>
     8         <img src="./images/6.jpg" width="384"/>
     9         <div class="pot" onclick="changePic(this)" id="pot1" style="background-color: red;">
    10             <a href="./images/1.jpg" name="link"></a>
    11         </div>
    12         <div class="pot" onclick="changePic(this)" id="pot2" style="">
    13             <a href="./images/2.jpg" id="link"></a>
    14         </div>
    15         <div class="pot" onclick="changePic(this)" id="pot3" style="">
    16             <a href="./images/3.jpg" id="link"></a>
    17         </div>
    18         <div class="pot" onclick="changePic(this)" id="pot4" style="">
    19             <a href="./images/4.jpg" id="link"></a>
    20         </div>
    21         <div class="pot" onclick="changePic(this)" id="pot5" style="">
    22             <a href="./images/5.jpg" id="link"></a>
    23         </div>
    24         <div class="pot" onclick="changePic(this)" id="pot6" style="">
    25             <a href="./images/6.jpg" id="link"></a>
    26         </div>
    27         <br>
    28         <button onclick="changeLast()"></button>
    29         <button onclick="changeNext()"></button>
    30     </div>

    使用jQuery后的html

     1     <h1>轮播图</h1>
     2     <div id="did">
     3         <img src="./images/1.jpg" width="384"/>
     4         <img src="./images/2.jpg" width="384"/>
     5         <img src="./images/3.jpg" width="384"/>
     6         <img src="./images/4.jpg" width="384"/>
     7         <img src="./images/5.jpg" width="384"/>
     8         <img src="./images/6.jpg" width="384"/>
     9         <div class="pot" id="pot1" style="background-color: red;">
    10             <a href="./images/1.jpg" class="link"></a>
    11         </div>
    12         <div class="pot" id="pot2" style="">
    13             <a href="./images/2.jpg" class="link"></a>
    14         </div>
    15         <div class="pot" id="pot3" style="">
    16             <a href="./images/3.jpg" class="link"></a>
    17         </div>
    18         <div class="pot" id="pot4" style="">
    19             <a href="./images/4.jpg" class="link"></a>
    20         </div>
    21         <div class="pot" id="pot5" style="">
    22             <a href="./images/5.jpg" class="link"></a>
    23         </div>
    24         <div class="pot" id="pot6" style="">
    25             <a href="./images/6.jpg" class="link"></a>
    26         </div>
    27         <br>
    28         <button id="left"></button>
    29         <button id="right"></button>
    30     </div>

    区别一:可以不需要在html的标签绑定事件函数,而可以在js脚本中绑定

    例如:

    1         //  轮播图hover绑定鼠标移入移出事件,移入停止播放,移出继续播放
    2         $("did").hover(doStop(),doStart());

    这表示可以直接对#did标签直接绑定鼠标滑入和划出事件

      $("button").click(function(){}); 

    这是按钮直接捆绑一个点击事件

    区别二:获取html元素的方式更为简单

    原生html获取网页元素:

    1         //  找到a标签
    2         var alinks = document.getElementById(picId).getElementsByTagName("a");
    3         //  获取图片
    4         var mlist = document.getElementById("did").getElementsByTagName("img");
    5         //  获取圆点
    6         var pots = document.getElementsByClassName("pot");  
    7         //  获取链接href    
    8         var link = alinks[0].getAttribute("href");

    jQuery获取html元素

    1             //  获取链接href
    2             var link = $(this).find("a").attr("href");
    3             //  获取图片
    4             var mlist = $("img");
    5             //  获取圆点
    6             var pots = $(".pot");

    可以看见,jQuery获取元素的方法能减少不少代码内容,更为简单

    修改样式

    JavaScript

    1             if(x == i+1){
    2                 // 修改display为显示,对应圆点为红色
    3                 mlist.eq(i).css("display","block");
    4                 pots.eq(i).css("background-color","red");
    5             }else{
    6                 //  修改display为隐藏,对应圆点为灰色
    7                 mlist.eq(i).css("display","none");
    8                 pots.eq(i).css("background-color","gray")
    9             }

    jQuery

    1             if(x == i+1){
    2                 // 修改display为显示,对应圆点为红色
    3                 mlist[i].style.display = "block";
    4                 pots[i].style.backgroundColor = "red";
    5             }else{
    6                 //  修改display为隐藏,对应圆点为灰色
    7                 mlist[i].style.display = "none";
    8                 pots[i].style.backgroundColor = "gray";
    9             }

    可见,jQuery有专有方法修改样式,区别其实不是很大

    原生JavaScript:

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <title>轮播图</title>
      7     <style>
      8         div,img,ul,li{margin:0px;padding:0px;}
      9         #did{width:384px;height:240px;}
     10         #did img{
     11             display:none;
     12             height: 200px;
     13         }
     14         #did img:first-child{display:block}
     15         #did .pot{
     16             width: 10px;
     17             height: 10px;
     18             border-radius:50%;
     19             background-color:gray;
     20             float: left;
     21             margin: 5px;
     22         }
     23 
     24     </style>
     25 </head>
     26 <body>
     27     <h1>轮播图</h1>
     28     <div id="did" onmouseover="doStop()" onmouseout="doStart()">
     29         <img src="./images/1.jpg" width="384"/>
     30         <img src="./images/2.jpg" width="384"/>
     31         <img src="./images/3.jpg" width="384"/>
     32         <img src="./images/4.jpg" width="384"/>
     33         <img src="./images/5.jpg" width="384"/>
     34         <img src="./images/6.jpg" width="384"/>
     35         <div class="pot" onclick="changePic(this)" id="pot1" style="background-color: red;">
     36             <a href="./images/1.jpg" name="link"></a>
     37         </div>
     38         <div class="pot" onclick="changePic(this)" id="pot2" style="">
     39             <a href="./images/2.jpg" id="link"></a>
     40         </div>
     41         <div class="pot" onclick="changePic(this)" id="pot3" style="">
     42             <a href="./images/3.jpg" id="link"></a>
     43         </div>
     44         <div class="pot" onclick="changePic(this)" id="pot4" style="">
     45             <a href="./images/4.jpg" id="link"></a>
     46         </div>
     47         <div class="pot" onclick="changePic(this)" id="pot5" style="">
     48             <a href="./images/5.jpg" id="link"></a>
     49         </div>
     50         <div class="pot" onclick="changePic(this)" id="pot6" style="">
     51             <a href="./images/6.jpg" id="link"></a>
     52         </div>
     53         <br>
     54         <button onclick="changeLast()"></button>
     55         <button onclick="changeNext()"></button>
     56     </div>
     57 </body>
     58 <script>
     59     var m = 1;
     60     var mytime = null;
     61     //定义函数展示对应的图片
     62     function show(x){
     63         var mlist = document.getElementById("did").getElementsByTagName("img");
     64         var pots = document.getElementsByClassName("pot");
     65         for(var i=0; i<mlist.length; i++){
     66             if(x == i+1){
     67                 // 修改display为显示,对应圆点为红色
     68                 mlist[i].style.display = "block";
     69                 pots[i].style.backgroundColor = "red";
     70             }else{
     71                 //  修改display为隐藏,对应圆点为灰色
     72                 mlist[i].style.display = "none";
     73                 pots[i].style.backgroundColor = "gray";
     74             }
     75         }
     76     }
     77 
     78     //开启定时轮播图片
     79     function doStart(){
     80         if(mytime == null){
     81             mytime = setInterval(function(){
     82                 m++;
     83                 show(m);
     84                 if(m>=6){
     85                     m = 0;
     86                 }
     87             }, 3000);
     88         }
     89     }
     90 
     91     //停止轮播图片
     92     function doStop(){
     93         if(mytime != null){
     94             clearInterval(mytime);
     95             mytime = null;
     96         }
     97     }
     98 
     99     //点击圆点显示对应图片
    100     function changePic(touched){
    101         doStop();
    102         var picId = touched.id;
    103         //  找到a标签
    104         var alinks = document.getElementById(picId).getElementsByTagName("a");
    105         //  获取图片
    106         var mlist = document.getElementById("did").getElementsByTagName("img");
    107         //  获取圆点
    108         var pots = document.getElementsByClassName("pot");  
    109         //  获取链接href    
    110         var link = alinks[0].getAttribute("href");
    111         for(var i=0;i<mlist.length;i++){
    112             //  相同则显示对应图片,并修改m为当前图片的位置
    113             if(mlist[i].getAttribute("src")==link){
    114                 m = i + 1;
    115                 show(m);
    116             }
    117         }
    118     }
    119 
    120     function changeLast(){
    121         //  上一张
    122         doStop();
    123         if(m == 1){
    124             m = 6;
    125         }else{
    126             m = m - 1;
    127         }
    128         show(m);
    129     }
    130 
    131     function changeNext(){
    132         //  下一张
    133         doStop();
    134         if(m == 6){
    135             m = 1;
    136         }else{
    137             m = m + 1;
    138         }
    139         show(m);
    140     }
    141 
    142     doStart();
    143 </script>
    144 </html>
    View Code

    jQuery方式:

      1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4     <meta charset="UTF-8">
      5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      6     <title>轮播图</title>
      7     <style>
      8         div,img,ul,li{margin:0px;padding:0px;}
      9         #did{width:384px;height:240px;}
     10         #did img{
     11             display:none;
     12             height: 400px;
     13         }
     14         #did img:first-child{display:block}
     15         #did .pot{
     16             width: 10px;
     17             height: 10px;
     18             border-radius:50%;
     19             background-color:gray;
     20             float: left;
     21             margin: 5px;
     22         }
     23         #left{
     24             margin-left: 130px;
     25         }
     26     </style>
     27 </head>
     28 <body>
     29     <h1>轮播图</h1>
     30     <div id="did">
     31         <img src="./images/1.jpg" width="384"/>
     32         <img src="./images/2.jpg" width="384"/>
     33         <img src="./images/3.jpg" width="384"/>
     34         <img src="./images/4.jpg" width="384"/>
     35         <img src="./images/5.jpg" width="384"/>
     36         <img src="./images/6.jpg" width="384"/>
     37         <div class="pot" id="pot1" style="background-color: red;">
     38             <a href="./images/1.jpg" class="link"></a>
     39         </div>
     40         <div class="pot" id="pot2" style="">
     41             <a href="./images/2.jpg" class="link"></a>
     42         </div>
     43         <div class="pot" id="pot3" style="">
     44             <a href="./images/3.jpg" class="link"></a>
     45         </div>
     46         <div class="pot" id="pot4" style="">
     47             <a href="./images/4.jpg" class="link"></a>
     48         </div>
     49         <div class="pot" id="pot5" style="">
     50             <a href="./images/5.jpg" class="link"></a>
     51         </div>
     52         <div class="pot" id="pot6" style="">
     53             <a href="./images/6.jpg" class="link"></a>
     54         </div>
     55         <br>
     56         <button id="left"></button>
     57         <button id="right"></button>
     58     </div>
     59 </body>
     60 <script src="./jquery-3.5.1.min.js"></script>
     61 <script>
     62     var m = 1;
     63     var mytime = null;
     64     //定义函数展示对应的图片
     65     function show(x){
     66         var mlist = $("img");
     67         var pots = $(".pot");
     68         for(var i=0; i<mlist.length; i++){
     69             if(x == i+1){
     70                 // 修改display为显示,对应圆点为红色
     71                 mlist.eq(i).css("display","block");
     72                 pots.eq(i).css("background-color","red");
     73             }else{
     74                 //  修改display为隐藏,对应圆点为灰色
     75                 mlist.eq(i).css("display","none");
     76                 pots.eq(i).css("background-color","gray")
     77             }
     78         }
     79     }
     80     
     81     //开启定时轮播图片
     82     function doStart(){
     83         if(mytime == null){
     84             mytime = setInterval(function(){
     85                 m++;
     86                 show(m);
     87                 if(m>=6){
     88                     m = 0;
     89                 }
     90             }, 3000);
     91         }
     92     }
     93 
     94     //停止轮播图片
     95     function doStop(){
     96         if(mytime != null){
     97             clearInterval(mytime);
     98             mytime = null;
     99         }
    100     }
    101     //jQuery入口函数
    102     $(function(){
    103         //轮播开始
    104         doStart();
    105         //  轮播图hover绑定鼠标移入移出事件,移入停止播放,移出继续播放
    106         $("did").hover(doStop(),doStart());
    107         
    108         //  对应数量的圆点,点击会显示对应的图片
    109         $(".pot").click(function(e){
    110             doStop();
    111             //  获取链接href
    112             var link = $(this).find("a").attr("href");
    113             //  获取图片
    114             var mlist = $("img");
    115             //  获取圆点
    116             var pots = $(".pot");
    117             for(var i=0;i<mlist.length;i++){
    118                 //  相同则显示对应图片,并修改m为当前图片的位置
    119                 if(mlist.eq(i).attr("src") == link){
    120                     console.log(i);
    121                     m = i + 1;
    122                     show(m);
    123                 }
    124             }
    125             doStart();
    126         })
    127 
    128         $("button").click(function(){
    129             switch($(this).html()){
    130                 //  上一张
    131                 case "":
    132                 doStop();
    133                 if(m == 1){
    134                     m = 6;
    135                 }else{
    136                     m = m - 1;
    137                 }
    138                 show(m);
    139                     break;
    140                 case "":
    141                 //  下一张
    142                     doStop();
    143                     if(m == 6){
    144                         m = 1;
    145                     }else{
    146                         m = m + 1;
    147                     }
    148                     show(m);
    149                     break;
    150             }
    151         })
    152     });
    153 </script>
    154 </html>
    View Code

    以下是源码

  • 相关阅读:
    终端创建scrapy项目时报错(转)
    redis的一些命令
    pom.xml中build标签
    spring与mybatis四种整合方法
    linux lsof/netstat查看进程和端口号相关命令:
    ps -ef |grep 输出的具体含义
    java web项目在linux部署、启动,查看系统配置常用的linux命令总结
    linux mysql操作命令大全
    mysql中between...and..的使用,及时间范围的查询
    mysql中if()函数使用
  • 原文地址:https://www.cnblogs.com/misaki-workshop/p/13582667.html
Copyright © 2011-2022 走看看