美文网首页
Web前端------jQuery快速掌握(一)

Web前端------jQuery快速掌握(一)

作者: Peak_One | 来源:发表于2018-07-12 20:40 被阅读51次
    简介

    jQuery是一个轻量级且功能强大的JavaScript library。因为JavaScript自身书写的一些弊端,导致在用javascript写网页界面特效的过程中略显复杂。大致缺点罗列如下:

    • 查找元素的方法太少,麻烦。
    • 遍历伪数组很麻烦,通常要嵌套一大堆的for循环。
    • 有兼容性问题。
    • 想要实现简单的动画效果,也很麻烦
    • 代码冗余。

    而jQuery能够避免这些问题的发生,优点罗列如下:

    • 查找元素的方法多种多样,非常灵活
    • 拥有隐式迭代特性,因此不再需要手写for循环了。
    • 完全没有兼容性问题。
    • 实现动画非常简单,而且功能更加的强大。
    • 代码简单、粗暴。

    jQuery使用展示如下:

    $(document).ready(function () {
        $("#btn1").click(function () {
              //隐式迭代:偷偷的遍历,在jQuery中,不需要手动写for循环了,会自动进行遍历。
            $("div").show(200);
        });
    
        $("#btn2").click(function () {
            $("div").text("我是内容");
        });
    });
    

    jQuery版本问题
    官网下载地址:http://jquery.com/download/ jQuery版本有很多,分为1.x 2.x 3.x
    大致版本分类:

    1.x版本:能够兼容IE678浏览器
    2.x版本:不兼容IE678浏览器
    1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。
    
    3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
    

    关于压缩版和未压缩版

    jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等东西,但是基本没有颗阅读性。
    jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。
    

    这里提供以下课程需要的jquery版本:https://pan.baidu.com/s/1JFs5qiEi0XfG0zCL3XBHOg 密码:mi75

    jQuery的入口函数

    使用jQuery的三个步骤:

    • 1.引入jQuery文件
    • 2.入口函数
    • 3.功能实现

    jQuery入口函数的两种写法

    //第一种写法
    $(document).ready(function() {
    
    });
    //第二种写法
    $(function() {
    
    });
    

    jQuery入口函数和js入口函数的对比

    1.JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
    2.jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
    
    jQuery对象和Dom对象的区别(重点)
    1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
    2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
    3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
    4. DOM对象与jQuery对象的方法不能混用。
    

    Dom对象转化成jQuery对象:【联想记忆:花钱】

    var $obj = $(domObj);
    // $(document).ready(function(){});就是典型的DOM对象转jQuery对象
    

    jQuery对象转换成Dom对象

    var $li = $(“li”);
    //第一种方法(推荐使用)
    $li[0]
    //第二种方法
    $li.get(0)
    

    练习:jQuery对象和Dom对象的区别

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      
    </head>
    <body>
    <ul>
      <li id="cloth">衣服</li>
      <li>裤子</li>
      <li>裤衩子</li>
      <li>袜子</li>
    </ul>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      
      $(function () {
        
        //1. 什么是DOM对象(js对象):使用js的方式获取到的元素就是js对象(DOM对象)
        //var cloth = document.getElementById("cloth");
        //cloth.style.backgroundColor = "pink";
        
        //2. 什么是jq对象:使用jq的方式获取到的元素就是jq对象
        //var $li = $("li");
        //console.log($li);
        //$li.text("我改了内容");
        
        
        //3. jq对象与js对象的区别
        //js对象对象不能调用jq对象的方法
        //var cloth = document.getElementById("cloth");
        //cloth.text("呵呵");
        
        //4. jq对象与js对象的联系(jq对象其实就是js对象的一个集合,伪数组,里面存放了一大堆的js对象)(宏观上)
        
        
        
        //jquery对象能不能调用DOM对象的方法
        //var $li = $("li");
        //$li[0].setAttribute("name","hehe");
        
        //DOM无法调用jQuery对象的方法:为什么:因为是两个不同对象
        //DOM对象调用jQuery对象的方法。需要把DOM对象转换成jQuery对象。
        var cloth = document.getElementById("cloth");
        
        //DOM对象就变成jQuery对象
        //$(cloth).text("呵呵");
        
        //jQuery对象怎么转换成DOM对象(取出来)
        var $li = $("li");
        $li[1].style.backgroundColor = "red";
        $li.get(2).style.backgroundColor = "yellow";
        
        
        
        
        
        //1. 什么是DOM对象:用js的方式获取到的对象时DOM对象
        //2. jQuery对象:用jq的方式获取到的对象时jq对象
        //3. 区别与联系
        //4. 区别:js对象与jq对象的方法不能混着用
        //5. 联系:
          // DOM--> jQuery  $()
          // jQuery--》 DOM  $li[0]  $li.get(0)
      });
     
      
    </script>
    
    </body>
    </html>
    

    隔行变色demo

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
      <li>我是第6个li</li>
      <li>我是第7个li</li>
      <li>我是第8个li</li>
      <li>我是第9个li</li>
      <li>我是第10个li</li>
    </ul>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        
        //就这么写,会不会报错,会不会有效果
        var lis = $("li");
        for (var i = 0; i < lis.length; i++) {
          if (i % 2 == 0) {
            
            // lis:jq对象
            // lis[i]:DOM对象,通过下标取出来了
            lis[i].style.backgroundColor = "pink";
          } else {
            lis[i].style.backgroundColor = "hotpink";
          }
        }
        
      });
    </script>
    </body>
    </html>
    
    选择器

    jQuery选择器是jQuery为我们提供的一组方法,让我们更加方便的获取到页面中的元素。注意:jQuery选择器返回的是jQuery对象。

    jQuery选择器有很多,基本兼容了CSS1到CSS3所有的选择器,并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

    jQuery选择器虽然很多,但是选择器之间可以相互替代,就是说获取一个元素,你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

    • 基本选择器


      image.png
    • 层级选择器


      image.png
    • 过滤选择器


      image.png
    • 筛选选择器(方法)


      image.png

      下拉菜单案例:
      图片素材如下图:


      libg.jpg
    bg.jpg
    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        
        ul {
          list-style: none;
        }
        
        .wrap {
          width: 330px;
          height: 30px;
          margin: 100px auto 0;
          padding-left: 10px;
          background-image: url(imgs/bg.jpg);
        }
        
        .wrap li {
          background-image: url(imgs/libg.jpg);
        }
        
        .wrap > ul > li {
          float: left;
          margin-right: 10px;
          position: relative;
        }
        
        .wrap a {
          display: block;
          height: 30px;
          width: 100px;
          text-decoration: none;
          color: #000;
          line-height: 30px;
          text-align: center;
        }
        
        .wrap li ul {
          position: absolute;
          top: 30px;
          display: none;
        }
      </style>
      <script src="../jquery-1.12.4.js"></script>
      <script>
        $(function () {
          
          //mouseover:鼠标经过事件
          //mouseout:鼠标离开事件
          
          //mouseenter:鼠标进入事件
          //mouseleave:鼠标离开事件
          
          var $li = $(".wrap>ul>li");
          
          //给li注册鼠标经过事件,让自己的ul显示出来
          $li.mouseenter(function () {
            //找到所有的儿子,并且还得是ul
            $(this).children("ul").show();
          });
      
          $li.mouseleave(function () {
            $(this).children("ul").hide();
          });
          
          
        });
      </script>
    </head>
    <body>
    <div class="wrap">
      <ul>
        <li>
          <a href="javascript:void(0);">一级菜单1</a>
          <ul class="ul">
            <li><a href="javascript:void(0);">二级菜单11</a></li>
            <li><a href="javascript:void(0);">二级菜单12</a></li>
            <li><a href="javascript:void(0);">二级菜单13</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单2</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单21</a></li>
            <li><a href="javascript:void(0);">二级菜单22</a></li>
            <li><a href="javascript:void(0);">二级菜单23</a></li>
          </ul>
        </li>
        <li>
          <a href="javascript:void(0);">一级菜单3</a>
          <ul>
            <li><a href="javascript:void(0);">二级菜单31</a></li>
            <li><a href="javascript:void(0);">二级菜单32</a></li>
            <li><a href="javascript:void(0);">二级菜单33</a></li>
          </ul>
        </li>
      </ul>
    </div>
    
    </body>
    </html>
    

    效果展示:


    image.png

    手风琴案例

    
    
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {padding: 0;margin: 0;}
        ul { list-style-type: none;}
        
        .parentWrap {
          width: 200px;
          text-align:center;
          
        }
        
        .menuGroup {
          border:1px solid #999;
          background-color:#e0ecff;
        }
        
        .groupTitle {
          display:block;
          height:20px;
          line-height:20px;
          font-size: 16px;
          border-bottom:1px solid #ccc;
          cursor:pointer;
        }
        
        .menuGroup > div {
          height: 200px;
          background-color:#fff;
          display:none;
        }
      
      </style>
      
      <script src="jquery-1.12.4.js"></script>
      <script>
          $(function () {
              //思路分析:
              //1. 给所有的span注册点击事件,让当前span的兄弟div显示出来
              $(".groupTitle").click(function () {
                //下一个兄弟:nextElementSibling
                
                //链式编程:在jQuery里面,方法可以一直调用下去。
                $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
              });
          });
      </script>
    </head>
    <body>
    <ul class="parentWrap">
      <li class="menuGroup">
        <span class="groupTitle">标题1</span>
        <div>我是弹出来的div1</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题2</span>
        <div>我是弹出来的div2</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题3</span>
        <div>我是弹出来的div3</div>
      </li>
      <li class="menuGroup">
        <span class="groupTitle">标题4</span>
        <div>我是弹出来的div4</div>
      </li>
    </ul>
    </body>
    </html>
    

    效果展示:


    image.png

    突出展示案例
    图片素材:


    03.jpg 04.jpg 05.jpg 06.jpg 01.jpg 02.jpg
    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
        }
        
        ul {
          list-style: none;
        }
        
        body {
          background: #000;
        }
        
        .wrap {
          margin: 100px auto 0;
          width: 630px;
          height: 394px;
          padding: 10px 0 0 10px;
          background: #000;
          overflow: hidden;
          border: 1px solid #fff;
        }
        
        .wrap li {
          float: left;
          margin: 0 10px 10px 0;
          
        }
        
        .wrap img {
          display: block;
          border: 0;
        }
      </style>
      
      <script src="../jquery-1.12.4.js"></script>
      <script>
        $(function () {
          
          $(".wrap>ul>li").mouseenter(function () {
            
            $(this).css("opacity", "1").siblings().css("opacity", "0.4");
          });
          
          $(".wrap").mouseleave(function () {
            //让所有的li都变亮
            //$("li");
            //$(".wrap li");
            //$(".wrap>ul>li")
            
            //$(this).children().children("li");
            $(this).find('li').css("opacity", 1);
          });
        });
      </script>
      
    </head>
    <body>
    <div class="wrap">
      <ul>
        <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
        <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
      </ul>
    </div>
    </body>
    </html>
    

    效果展示:


    image.png

    淘宝精品案例
    素材:


    lili.jpg QQ截图20121215110234.png 登山鞋.jpg 冬裙.jpg 毛衣.jpg 棉服.jpg 男包.jpg 男毛衣.jpg 男棉服.jpg 男靴.jpg 呢大衣.jpg 牛仔裤.jpg 女包.jpg 女裤.jpg 女靴.jpg 皮带.jpg 皮衣.jpg 围巾.jpg 雪地靴.jpg 羽绒服.jpg abg.gif
    <!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style type="text/css">
        * {
          margin: 0;
          padding: 0;
          font-size: 12px;
        }
        
        ul {
          list-style: none;
        }
        
        a {
          text-decoration: none;
        }
        
        .wrapper {
          width: 298px;
          height: 248px;
          margin: 100px auto 0;
          border: 1px solid pink;
          overflow: hidden;
        }
        
        #left, #center, #right {
          float: left;
        }
        
        #left li, #right li {
          background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a, #right li a {
          display: block;
          width: 48px;
          height: 27px;
          border-bottom: 1px solid pink;
          line-height: 27px;
          text-align: center;
          color: black;
        }
        
        #left li a:hover, #right li a:hover {
          background-image: url(images/abg.gif);
        }
        
        #center {
          border-left: 1px solid pink;
          border-right: 1px solid pink;
        }
      </style>
      
      <script src="../jquery-1.12.4.js"></script>
      <script>
        $(function () {
          
          //找不到对象
          $(function () {
            $("#left>li").mouseenter(function () {
              $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
            });
            $("#right>li").mouseenter(function () {
              $("#center>li").eq($(this).index() + 9).show().siblings().hide();
            });
          })
        });
        
        //      $("#left>li").mouseenter(function () {
        //        //让center中对应下标的li显示,其他li隐藏
        //        var idx = $(this).index();
        //        $("#center>li:eq(" + idx + ")").show().siblings().hide();
        //      });
        //
        //      $("#right>li").mouseenter(function () {
        //        var idx = $(this).index() + 9;
        //        $("#center>li").eq(idx).show().siblings().hide();
        //
        //        //$("#center>li").eq(idx)  :jq对象
        //        //$("#center>li").get(idx);:js对象
        //      });
        //    });
      </script>
    
    </head>
    <body>
    <div class="wrapper">
      
      <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
      </ul>
      <ul id="center">
        <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
      
      </ul>
      <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男靴</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男包</a></li>
      </ul>
    
    </div>
    </body>
    </html>
    

    效果展示:


    image.png

    京东轮播案例
    图片素材


    4.jpg 5.jpg 6.jpg 7.jpg 8.jpg 1.jpg 2.jpg 3.jpg

    代码:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>京东商城</title>
      <style>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        .slider {
          height: 340px;
          width: 790px;
          margin: 100px auto;
          position: relative;
        }
        
        .slider li {
          position: absolute;
          display: none;
        }
        
        .slider li:first-child {
          display: block;
        }
        
        .arrow {
          display: none;
        }
        
        .slider:hover .arrow {
          display: block;
        }
        
        .arrow-left,
        .arrow-right {
          font-family: "SimSun", "宋体";
          width: 30px;
          height: 60px;
          background-color: rgba(0, 0, 0, 0.1);
          position: absolute;
          top: 50%;
          margin-top: -30px;
          cursor: pointer;
          text-align: center;
          line-height: 60px;
          color: #fff;
          font-weight: 700;
          font-size: 30px;
        }
        
        .arrow-left:hover,
        .arrow-right:hover {
          background-color: rgba(0, 0, 0, .5);
        }
        
        .arrow-left {
          left: 0;
        }
        
        .arrow-right {
          right: 0;
        }
      
      </style>
    </head>
    <body>
    <div class="slider">
      <ul>
        <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
      </ul>
      <!--箭头-->
      <div class="arrow">
        <span class="arrow-left">&lt;</span>
        <span class="arrow-right">&gt;</span>
      </div>
    </div>
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        var $li = $(".slider>ul>li");
        var count = 0;
        
        $(".arrow-right").click(function () {
          count++;
          if(count == $li.length){
            count = 0;
          }
          $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
        });
      
        $(".arrow-left").click(function () {
          count--;
          if(count == -1){
            count = $li.length - 1;
          }
          $li.eq(count).fadeIn(1000).siblings().fadeOut(1000);
        });
      });
    </script>
    </body>
    </html>
    

    效果展示:


    view.gif

    欢迎关注我的个人微信公众号,免费送计算机各种最新视频资源!你想象不到的精彩!


    0.jpg

    相关文章

      网友评论

          本文标题:Web前端------jQuery快速掌握(一)

          本文链接:https://www.haomeiwen.com/subject/spwhpftx.html