jQuery中的工具和插件

jQuery的工具属性

jQuery类数组操作

length属性
- 表示获取类数组中元素的个数
get()方法
- 表示获取类数组中单个元素“括号中填写该元素的索引值”
index()方法
- 表示用过指定类数组中的元素来获取对应的索引值“括号中填写指定元素的选择器”
$.makeArray()方法
- 表示将指定类数组对象转换成数组对象“括号中填写指定的类数组”
toArray()方法
- 表示将jQuery类数组对象转换成数组对象“括号中填写指定的jQuery类数组对象”
$.inArray()方法
- 表示在指定数组或类数组中查找指定元素的索引值“括号中填写指定元素指定数组或类数组搜索的索引值”

<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()
  - 括号中填写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>

jQuery中的工具和插件

jQuery的工具属性

jQuery类数组操作

jQuery遍历

each()方法

$.each()方法

jQuery字符串处理

$.trim()方法

jQuery的插件

图片懒加载效果

瀑布流效果

轮播图效果

jQuery对象和工厂函数

自定义jQuery插件

jQuery对象方法插件

全局函数插件

蔡志远

引用和评论

Ajax 之 [ jQuery中的Ajax ]

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了