jQuery中的工具與插件我的分享

時間 2019-12-10

原文原文鏈接

工具

類數組操做

get(index)方法
做用 - 根據索引值返回對應的元素(DOM對象)
參數index - 表示元素在jQuery對象中的索引值
$().index(element)方法 - 只能查找jQuery對象jquery
- 做用 - 在指定的jQuery對象中查找是否存在element數組
  - 存在 - 返回element所對應的索引值
  - 不存在 - 返回 -1
$.inArray(value, array, fromIndex)方法 - 查找數組或對象瀏覽器
- 做用 - 在指定的數組或對象中查找是否存在valueapp
  - 存在 - 返回value所對應的索引值
  - 不存在 - 返回 -1
- 參數dom
  - value - 表示要查找的數據內容
  - array - 表示指定的數組或對象
$().toArray()方法ide
- 做用 - 將jQuery對象轉換爲數組
$.makeArray(obj)方法函數
- 做用 - 將類數組轉換爲數組
- 參數obj - 表示類數組對象

示例代碼:工具

<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    // length屬性 - 獲取當前jQuery對象中包含DOM對象的個數
    console.log($('div').length);// 5
    for (var i=0; i<$('div').length; i++) {
        // jQuery對象[索引值] -> 轉換爲DOM對象
        var div = $('div')[i];
    }
    // get(index)方法
    console.log($('div').get(0));
    /*
        * $().index(element)方法 - 只能查找jQuery對象
          * 做用 - 在指定的jQuery對象中查找是否存在element
            * 存在 - 返回element所對應的索引值
            * 不存在 - 返回 -1
          * 參數element - 能夠是DOM對象，還能夠是jQuery對象，也能夠是選擇器
        * $.inArray(value, array, fromIndex)方法 - 查找數組或對象
          * 做用 - 在指定的數組或對象中查找是否存在value
            * 存在 - 返回value所對應的索引值
            * 不存在 - 返回 -1
          * 參數
            * value - 表示要查找的數據內容
            * array - 表示指定的數組或對象
     */
    console.log($('div').index(document.getElementById('d1')));// 0
    console.log($('div').index($('#d1')));
    console.log($('div').index('#d1'));

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

    /*
        * $().toArray()方法
          * 做用 - 將jQuery對象轉換爲數組
        * $.makeArray(obj)方法
          * 做用 - 將類數組轉換爲數組
          * 參數obj - 表示類數組對象
     */
    console.log($('div').toArray());
    console.log($.makeArray($('div')));
    console.log($.makeArray(document.getElementsByTagName('div')));

</script>
</body>

全局函數與工廠函數

$().index()oop
- jQuery() - 工廠函數的調用 -> 返回jQuery對象
- index()方法是jQuery對象的方法
$.inArray()佈局
- jQuery - 也是一個對象 -> jQuery的全局對象

示例代碼:

<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    /*
        * $().index()
          * jQuery() - 工廠函數的調用 -> 返回jQuery對象
          * index()方法是jQuery對象的方法
        * $.inArray()
          * jQuery - 也是一個對象 -> jQuery的全局對象
     */
    var index1 = $('div').index('#d1');
    var index2 = $.inArray(document.getElementById('d1'), $('div'));
    console.log(index1, index2);
    // 全部函數都是Function類型的對象
    function fun(){
        console.log('this is function');
    }

    fun();// 函數調用
    console.log(fun instanceof Object);// true

</script>
</body>

遍歷類數組

$().each(callback)方法
- 表示遍歷數組或類數組對象「括號中填寫指定數組或類數組執行函數」
each()方法
- 表示遍歷jQuery對象的數組或類數組「括號中填寫執行函數」

示例代碼:

<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<script>
    var $divs = $('div');
    /*
        $().each(callback)方法
        * 做用 - 用於遍歷jQuery對象
        * 參數callback - 回調函數
          function(index,domEle){}
          * index - 索引值
          * domEle - 遍歷後的DOM對象
     */
    $divs.each(function(index, domEle){
        console.log(index, domEle);
    });

    /*
        $.each(obj, callback)方法
        * 做用 - 用於遍歷數組或對象
        * 參數
          * obj - 表示遍歷數組或對象
          * callback - 回調函數
            function(index,domEle){}
            * index - 索引值
            * domEle - 遍歷後的DOM對象
     */
    $.each(document.getElementsByTagName('div'), function(index, domEle){
        console.log(index, domEle);
    });

</script>
</body>

字符串操做

$.trim()方法 - 去掉字符串中開始和結束的空格

示例代碼:

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

</script>
</body>

jQuery插件

jQuery插件的步驟

引入jQuery文件
引入jQuery插件文件
使用插件

懶加載插件效果

lazyload插件須要注意的是：

將圖片元素的src屬性替換爲data-original屬性
爲圖片元素設置class屬性，屬性值爲lazyload
lazyload插件要求爲圖片元素設置寬度或高度

示例代碼:

<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/983755043622092476.jpg" width="600px">
<script>
    /*
        懶加載 - 實現的頁面中圖片的延遲加載
     */
    $('img').lazyload();
</script>
</body>

懶加載核心方法參數

lazyload(options)方法
- threshold - 設置當前圖片距離瀏覽器窗口多少像素值時開始加載
- threshold - 設置當前圖片距離瀏覽器窗口多少像素值時開始加載

示例代碼:

$('img.lazyload').lazyload({
        threshold : 200,
        effect : 'fadeIn'
    });

瀑布流抄件效果

實現瀑布流佈局的效果步驟:
1. HTML頁面結構
  - 定義一個容器元素
  - 在容器元素中的全部元素呈現瀑布流效果
2. 定位瀑布流佈局的容器元素，而且調用masonry()核心方法
  - $().masonry(options)
    - 選項
      - itemSelector - 指定須要瀑布流佈局效果的元素(選擇器)

示例代碼:

$('.grid').masonry({
        itemSelector: '.grid-item'
    });

輪播圖效果插件

輪播圖效果 - Swiper - 經過引入外部Swiper插件，在調用由Swiper插件提供的方法 - new Swiper( )
注意: Swiper插件分爲CSS文件和JS文件，要一同引入
爲輪播圖的可視容器設置class屬性，屬性值爲swiper-container
爲輪播圖的全部圖片容器設置class屬性，屬性值爲swiper-wrapper

示例代碼:

<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 class="swiper-pagination"></div>

    <!-- 若是須要導航按鈕 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script src="jQuery庫/jquery.js"></script>
<script src="輪播圖/swiper.js"></script>
<script>
    new Swiper('.swiper-container',{
        autoplay: true,//可選選項，自動滑動
        loop : true,
        // 若是須要分頁器
        pagination: {
            el: '.swiper-pagination',
            clickable : true
        },
        // 若是須要前進後退按鈕
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
    /*
         輪播圖效果 - Swiper
        經過引入外部Swiper插件，在調用由Swiper插件提供的方法 - new Swiper( )
        Swiper插件的注意要求：
         * Swiper插件分爲CSS文件和JS文件，要一同引入
         * 爲輪播圖的可視容器設置class屬性，屬性值爲swiper-container
         * 爲輪播圖的全部圖片容器設置class屬性，屬性值爲swiper-wrapper
         * 設置class屬性是爲了方便操做
     */

</script>
</body>