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>

来源：https://segmentfault.com/a/1190000016345063

jQuery中的工具和插件的更多相关文章

  1. JQuery中的工具类（五）

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  2. jquery-12 jquery中的工具方法有哪些

    jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...

  3. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  4. jQuery中的each, data, 插件

    一.  each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...

  5. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  6. jQuery中的supersized的插件的功能描述

    Supersized特性: 自动等比例调整图片并填充整浏览器个屏幕. 循环展示图片,支持滑动和淡入淡出等多种图片切换效果. 导航按钮,支持键盘方向键导航. XHTML <div id=" ...

  7. jQuery中的工具（十）

    1. jQuery.each(object, [callback]), 通用遍历方法,可用于遍历对象和数组 不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象.回调 ...

  8. jquery中的工具函数 Utilities

    noConflict(deep) 释放$和Jquery的控制权 isFunction(obj) isArray(obj) isWindow(obj) isNumeric(obj) type(obj) ...

  9. JQuery中的DataTables表格插件

    一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...

随机推荐

  1. 不同版本springboot上传文件大小设置

    参考原文:https://blog.csdn.net/awmw74520/article/details/70230591 Spring Boot 1.3.x或者之前 multipart.maxFil ...

  2. mahout in Action2.2-给用户推荐图书（3）-评价推荐系统

    推荐系统引擎是一个工具,一种回答问题的手段,"对用户来讲什么是最好的推荐?",在研究回答的前先研究一下这个问题.一个好的推荐的准确含义是什么?如何知道推荐系统是如何生成推荐的?下面 ...

  3. SpringData _day01_jpa的入门

    1.orm思想和以及jpa的概述和jpa的基本操作 简单的说:ORM就是建立实体类和数据库表之间的关系,从而达到操作实体类就相当于操作数据库表的目的. orm思想    主要目的:操作实体类就相当于操 ...

  4. express 4.x 搭建Node项目框架

    npm install -g express-generator express projectName cd projectName npm install 手动添加文件夹config.models ...

  5. Office2010 破解（Microsoft Toolkit 2.4.3.exe）

    这两天破解刚安装好的office2010,总是报错 刚才重新下载了Microsoft Toolkit 2.4.3.exe工具后,破解成功,操作如下: 选择office按钮后,如下操作,

  6. NGINX模块开发 之 验证URL參数

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/RoyalApex/article/details/26404379 作者:邹祁峰 邮箱:Qifeng ...

  7. GULP入门之API（二）

    GULP的API gulp.src(globs[, options]) 输出(Emits)符合所提供的匹配模式(glob)或者匹配模式的数组(array of globs)的文件. 将返回一个 Vin ...

  8. css3之文本和颜色功能之text-shadow

    总本看一下 1.text-shadow 语法:text-shadow: h-shadow v-shadow blur color; h-shadow: 必需.水平阴影的位置.允许负值. v-shado ...

  9. Django项目：CRM(客户关系管理系统)--37--29PerfectCRM实现King_admin编辑自定义限制

    #base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...

  10. python使用cPickle模块序列化实例

    python使用cPickle模块序列化实例 这篇文章主要介绍了python使用cPickle模块序列化的方法,是一个非常实用的技巧,本文实例讲述了python使用cPickle模块序列化的方法,分享 ...