jQuery中的工具和插件

時間  2019-12-05
標籤 jquery 工具 插件 欄目 JQuery 简体版
原文   原文鏈接

jQuery的工具屬性

jQuery類數組操做

  • length屬性css

    • 表示獲取類數組中元素的個數

  • get()方法jquery

    • 表示獲取類數組中單個元素「括號中填寫該元素的索引值」

  • index()方法數組

    • 表示用過指定類數組中的元素來獲取對應的索引值「括號中填寫指定元素的選擇器」

  • $.makeArray()方法app

    • 表示將指定類數組對象轉換成數組對象「括號中填寫指定的類數組」

  • toArray()方法dom

    • 表示將jQuery類數組對象轉換成數組對象「括號中填寫指定的jQuery類數組對象」

  • $.inArray()方法ide

    • 表示在指定數組或類數組中查找指定元素的索引值「括號中填寫 指定元素 指定數組或類數組 搜索的索引值」
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
    /*
        jQuery工具屬性
        length - 表示獲取類數組中元素的個數
        get() - 表示獲取類數組中單個元素「括號中填寫該元素的索引值」
        index() - 表示用過指定類數組中的元素來獲取對應的索引值「括號中填寫指定元素的選擇器」
        $.makeArray() - 表示將指定類數組對象轉換成數組對象「括號中填寫指定的類數組」
        toArray() - 表示將jQuery類數組對象轉換成數組對象「括號中填寫指定的jQuery類數組對象」
        $.inArray() - 表示在指定數組或類數組中查找指定元素的索引值「括號中填寫 指定元素 指定數組或類數組 搜索的索引值」
     */
    var $div = $( '#d1' );
    console.log( $div );

    console.log( $div.length );

    console.log( $div.get( 0 ) );

    console.log( $div.index( 'div' ) );
    console.log( $div.index( '.d1' ) );
    var d1 = document.getElementById( 'd1' );
    console.log( $div.index( d1 ) );

    console.log( $.makeArray( $div ) );
    var d2 = document.getElementsByTagName( 'div' );
    console.log( $.makeArray( d2 ) );

    console.log( $div.toArray() );

    console.log( $.inArray( d1, $div ) );
</script>
</body>

jQuery遍歷

each()方法

  • 表示遍歷jQuery對象的數組或類數組「括號中填寫執行函數」

$.each()方法

  • 表示遍歷數組或類數組對象「括號中填寫 指定數組或類數組 執行函數」
<body>
<div>我特啊呦弄啥嘞</div>
<div>我特啊呦賭贏</div>
<div>咦！...嫩個鱉孫...</div>
<script src="jquery.js"></script>
<script>
    /*
        jQuery遍歷
        each( ) - 表示遍歷jQuery對象的數組或類數組「括號中填寫執行函數」
        $.each( ) - 表示遍歷數組或類數組對象「括號中填寫 指定數組或類數組 執行函數」
     */
    var $div =  $( 'div' );
    /*
        each( )執行函數
        index - 表示遍歷結果在jQuery對象中的索引值
        domEle - 表示遍歷的結果( DOM對象 )
     */
    $div.each( function ( index, domEle ) {
        console.log( index, domEle );
        /* 遍歷結果是DOM對象 */
        console.log( domEle );
        /* 把遍歷結果由DOM對象轉換成jQuery對象 */
        console.log( $( domEle ) );
    } );

    var div = document.getElementsByTagName( 'div' );
    /*
        $.each( )執行函數
        index - 表示遍歷結果在jQuery對象中的索引值
        domEle - 表示遍歷的結果( DOM對象 )
     */
    $.each( $div, function ( index, domEle ) {
        console.log( index, domEle );
    } );
    $.each( div, function ( index, domEle ) {
        console.log( index, domEle );
    } )
</script>
</body>

jQuery字符串處理

$.trim()方法

  • 表示處理指定字符串開頭和結尾的空格
<body>
<script src="jquery.js"></script>
<script>
    /*
        jQuery字符串處理
        $.trim( ) - 表示處理指定字符串開頭和結尾的空格
     */
    var zf = '  啊啊啊 哈哈哈 呀呀呀   ';
    console.log( zf );
    console.log( zf.length );
    var zfs = $.trim( zf );
    console.log( zfs );
    console.log( zfs.length );

    /* DOM中的處理 */
    function trim( zf ) {
        var xzf = '';
        var zzfs = 0, yzfs = 0;
        for ( var i = 0; i < zf.length; i++ ) {
            var is = zf[i];
            if ( is !== ' ' ) {
                zzfs = i;
                break;
            }
        }
        for ( var s = zf.length-1; s >= 0; s-- ) {
            var si = zf[s];
            if ( si !== ' ' ) {
                yzfs = s;
                break;
            }
        }
        var xzf = zf.substring( zzfs, yzfs+1 );
        return xzf;
    }
    console.log( trim( zf ) );
    console.log( trim( zf ).length );
</script>
</body>

jQuery的插件

圖片懶加載效果

  • lazyload插件
  • 經過引入外部lazyload插件，在調用由lazyload插件提供的方法 - lazyload()

  • lazyload插件的注意要求：函數

    1. 將圖片元素的src屬性替換爲data-original屬性
    2. 爲圖片元素設置class屬性，屬性值爲lazyload
    3. lazyload插件要求爲圖片元素設置寬度或高度
<head>
    <meta charset="UTF-8">
    <title>懶加載</title>
    <style>
        .lazyload {
             width: 800px;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(1).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(2).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(3).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(4).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(5).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(6).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(7).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(8).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(9).jpg">
<img class="lazyload" data-original="臨時資料/插件/imgs/圖片%20(10).jpg">
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
    /*
        圖片懶加載 - lazyload
        經過引入外部lazyload插件，在調用由lazyload插件提供的方法 - lazyload( )
        lazyload插件的注意要求：
         * 將圖片元素的src屬性替換爲data-original屬性
         * 爲圖片元素設置class屬性，屬性值爲lazyload
         * lazyload插件要求爲圖片元素設置寬度或高度
     */
    var $img = $( '.lazyload' );
    $img.lazyload( {
        threshold : 50,
        event : 'mouseover',
        effect : 'fadeIn',
        effect_speed : 2000
    } );
</script>
</body>

瀑布流效果

  • masonry插件
  • 經過引入外部masonry插件，在調用由masonry插件提供的方法 - masonry( )
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 1200px;
            margin: 0 auto;
        }
        .img {
            width: 300px;
            display: block;
        }
    </style>
</head>
<body>
<div id="d1">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(1).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(2).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(3).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(4).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(5).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(6).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(7).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(8).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(9).jpg">
    <img class="img" src="臨時資料/插件/imgs/圖片%20(10).jpg">
</div>
<script src="jquery.js"></script>
<script src="masonry.pkgd.js"></script>
<script>
    /*
        瀑布流效果 - masonry
        經過引入外部masonry插件，在調用由masonry插件提供的方法 - masonry( )
     */
    var $div = $( '#d1' );
    $div.masonry( {
        itemSelector : '.img'
    } );
</script>
</body>

輪播圖效果

  • Swiper插件
  • 經過引入外部Swiper插件，在調用由Swiper插件提供的方法 - new Swiper( )

  • Swiper插件的注意要求：工具

    1. Swiper插件分爲CSS文件和JS文件，要一同引入
    2. 爲輪播圖的可視容器設置class屬性，屬性值爲swiper-container
    3. 爲輪播圖的全部圖片容器設置class屬性，屬性值爲swiper-wrapper
    4. 設置class屬性是爲了方便操做
<head>
    <meta charset="UTF-8">
    <title>輪播圖</title>
    <link rel="stylesheet" href="swiper.css">
    <style>
        body {
            margin: 0;
        }
        .swiper-container {
            width: 900px;
            margin: 25px auto;
        }
    </style>
</head>
<body>
<!-- 可視窗口容器 -->
<div class="swiper-container">
    <!-- 全部圖片的容器 -->
    <div class="swiper-wrapper">
        <img src="臨時資料/插件/imgs/圖片%20(1).jpg" class="swiper-slide">
        <img src="臨時資料/插件/imgs/圖片%20(4).jpg" class="swiper-slide">
        <img src="臨時資料/插件/imgs/圖片%20(3).jpg" class="swiper-slide">
    </div>
</div>
<script src="jquery.js"></script>
<script src="swiper.js"></script>
<script>
    /*
        輪播圖效果 - Swiper
        經過引入外部Swiper插件，在調用由Swiper插件提供的方法 - new Swiper( )
        Swiper插件的注意要求：
         * Swiper插件分爲CSS文件和JS文件，要一同引入
         * 爲輪播圖的可視容器設置class屬性，屬性值爲swiper-container
         * 爲輪播圖的全部圖片容器設置class屬性，屬性值爲swiper-wrapper
         * 設置class屬性是爲了方便操做
     */
    new Swiper('.swiper-container',{
        autoplay: true
    });
</script>
</body>

jQuery對象和工廠函數

自定義jQuery插件

  • 全局函數插件插件

    • jQuery.extend()code

      • 括號中填寫Object類型
    • 將jQuery當作一個對象來使用

  • jQuery對象插件

    • jQuery.fn.extend()

      • 括號中填寫Object類型
    • 將jQuery當作一個函數來使用

    • 在定義一個構造函數作爲擴充插件的屬性和方法

      • 作爲工廠函數的返回值
/* 將jQuery當作一個函數來使用 */
var jQuery = $ = function () {
  return new s1();
};
/* 定義一個構造函數 - 作爲工廠函數的返回值 */
function s1() {
 // 定義對象的屬性和方法
}
/* 調用函數的屬性或方法 */
var sx = jQuery();
sx.each();
jQuery().each();
$().each();

/* 將jQuery當作一個對象來使用 */
var jQuery = $ = {};
jQuery.each = function () {};
$.each();

jQuery對象方法插件

<head>
    <meta charset="UTF-8">
    <title>對象方法插件</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div id="d1" class="div"></div>
<script src="jquery.js"></script>
<script>
    /*
        自定義jQuery對象方法插件
        jQuery.fn.extend( ) - 括號中填寫Object類型
     */
    jQuery.fn.extend( {
        /* 擴充插件的屬性和方法 */
        name : '兔子',
        backgroundColor : function (selector,options) {
            var $elem = $(selector);
            if ('color' in options) {
                $elem.css('backgroundColor', options.color);
            }
        }
    } );

    /* 另外一種用法 */
    jQuery.fn.backgroundColor = function (selector,options) {
        var $elem = $(selector);
        if ('color' in options) {
            $elem.css('backgroundColor', options.color);
        }
    };
</script>
<script>
    /* 調用自定義插件 */
    var $div = $( '#d1' );
    console.log( $div.name );
    $div.backgroundColor('.div', {
        color : 'blue'
    });
</script>
</body>

全局函數插件

<script src="jquery.js"></script>
<script>
    /*
        自定義全局函數插件
        jQuery.extend( ) - 括號中填寫Object類型
     */
    jQuery.extend( {
        taigename : '小兔子',
        xyxyxy : function () {
            console.log( '大兔子' )
        }
    } );

    /* 另外一種用法 */
    jQuery.xyxyxy = function () {
        console.log( '大兔子' );
    }
</script>
<script>
    /* 調用自定義插件的方法 */
    console.log( jQuery.taigename );
    jQuery.xyxyxy();
</script>
</body>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程