【jQuery】之工具與插件的運用

時間 2019-12-12

原文原文鏈接

jQueryjavascript

工具方法css

1.類數組操做

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
   console.log('div'.length);//5
    //   length屬性-獲取jQuery對象包裹DOM的個數
   for(var i=0; i<$('div').length;i++)  {
       var div = $('div')[i];
   }// jQuery對象[索引值]-轉換DOM對象
   console.log($('div').get(0));
    //  get(index)方法


   console.log($('div').index(document.getElementById('q1')));
   console.log($('div').index($('#q1')));
   console.log($('div').index('#q1'));

   console.log($.inArray(document.getElementById('q1'),$('div')));
   var arr = [1,2,3,4,5];
   console.log($.inArray(3,arr));
   console.log($.inArray(document.getElementById('q1'),document.getElementsByName('div')));
   console.log($.inArray(8, arr));


   console.log($('div').toArray());
   console.log($.makeArray($('div')));
   console.log($.makeArray(document.getElementsByTagName('div')));

    /*
    * $().toArray()方法
      將jQuery對象轉換爲數組
      $.makeArray(obj)方法
      將類數組轉換爲數組
      參數obj-表示類數組對象
     */
</script>
</body>

遍歷類數組

主要以$()each()方法經過兩種形式表現
callback：匹配元素要執行的函數 obj；須要遍歷對象和數組 callback：匹配元素要執行的函數java

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>
<script>
    var $divs = $('div');
    $divs.each(function (index, domEle) {
        console.log(index, domEle);
    });
    /*$().each(callback)方法
    * 遍歷jQuery對象
    * */

    $.each(document.getElementsByTagName('div'),function (index, domEle) {
        console.log(index, domEle);
    });
</script>
</body>

字符串操做

以$.TRIM()方法用於去掉字符串開始和結束的空格jquery

<script src="js/jquery.js"></script>
</head>
<body>
<script>
    console.log($.trim('my, you love'));
    // $.trim()方法-用來去掉字符串中開始和結束的空格
</script>
</body>

2.插件使用

1.lazyoad懶加載插件

用於加載HTML頁面中延遲圖片，在瀏覽器窗口以外的圖片不會加載，只有用戶操做滾動纔會被加載提升HTML頁面加載速度，和減小服務器超負荷數組

<script src="js/jquery.js"></script>
    <script src="lazyload/jquery.lazyload.js"></script>
</head>
<body>
<!--
class屬性-類選擇器(爲CSS樣式)
class=lazyload-方便JavaScript邏輯定位頁面元素
data-original屬性-設置圖片顯示的真是路徑
lazyload插件自定義屬性替換src屬性
-->
<img class="lazyload" data-original="./imgs/a.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/b.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/c.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/e.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/f.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/g.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/h.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/i.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/j.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/k.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/l.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/m.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/n.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/o.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/p.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/q.jpg" height="300px" width="500px"/>
<script>
    $('img').lazyload();
//   實現頁面中圖片的延遲加載
</script>
</body>

2.masonry瀑布流插件

以多欄佈局，大小不一按照必定規格排列，給於用戶視覺的表現瀏覽器

<script src="js/jquery.js"></script>
    <script src="masonry/masonry.pkgd.js"></script>
    <style>
        .qh {
           width: 80%;
           margin: 0 auto;
           overflow: hidden;
        }
        .cq {
           display: block;
           float: left;
           width: 30%;
           margin: 7px;

        }
    </style>
</head>
<body>
<div class="qh">
    <img class="cq" src="imgs/a.jpg">
    <img class="cq" src="imgs/b.jpg">
    <img class="cq" src="imgs/c.jpg">
    <img class="cq" src="imgs/d.jpeg">
    <img class="cq" src="imgs/e.jpg">
    <img class="cq" src="imgs/f.jpg">
    <img class="cq" src="imgs/g.jpg">
    <img class="cq" src="imgs/h.jpg">
    <img class="cq" src="imgs/i.jpg">
    <img class="cq" src="imgs/j.jpg">
    <img class="cq" src="imgs/k.jpg">
    <img class="cq" src="imgs/l.jpg">
    <img class="cq" src="imgs/m.jpg">
    <img class="cq" src="imgs/n.jpg">
    <img class="cq" src="imgs/o.jpg">
    <img class="cq" src="imgs/p.jpg">
    <img class="cq" src="imgs/q.jpg">
</div>
<script>
    $('.qh').masonry({
       itemSelector:'.cq'
    });
</script>
</body>

3.swiper輪班圖插件

依賴jQuery也能夠不依賴jQuery 並實現水平滑動的效果服務器

<link rel="stylesheet" href="swiper/swiper.css">
    <style>
        body {
            margin: 0;
        }
        .swiper-container {
            width: 80%;
            height: 400px;
            margin: 100px auto;
        }
        .swiper-slide {
            font-size: 48px;
            line-height: 400px;
            text-align: center;
            color: white;
        }
        .red-swiper {
            background-color: lightcoral;
        }
        .blue-swiper {
            background-color: lightskyblue;
        }
        .green-swiper {
            background-color: darkcyan;
        }

    </style>
</head>
<body>
<!-- 可視窗口容器 -->
<div class="swiper-container">
    <!-- 全部圖片的容器 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide red-swiper">Slide 1</div>
        <div class="swiper-slide blue-swiper">Slide 2</div>
        <div class="swiper-slide green-swiper">Slide 3</div>
    </div>
</div>
<script src="javascript/jquery.js"></script>
<script src="swiper/swiper.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true
    });

</script>