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. css3 做border = 0.5px的细线

    参考: https://blog.csdn.net/Tyro_java/article/details/52013531

  2. 订单风险系统BI

    最近被公司叫去协助传统做维表查询服务,项目已经做完.和前端联调过程发现oracle对查询 sql和产品设计还是挺重要的.不能全部堆给代码去做,如何方便代码,代码优化到最高性能才是首要解决的事,前端才能 ...

  3. vue-admin-template模板添加screenfull全屏插件

    先安装screenfull:npm install screenfull@4.2.0 --save    (注意版本号) 一.在\src\components目录下创建Screenfull文件夹,创建 ...

  4. Windows中使用CopyFile函数复制文件，出现string转LPCTSTR问题（附代码）

    原因: 同一张图片,用imread读取,imwrite重新写入另外一个文件夹,然后再次读取发现前后异常,这是因为读取后转成Mat格式,然后写入转成图片格式,这个过程会对图片产生损失. 因此后来采用直接 ...

  5. LUOGU P2962 [USACO09NOV]灯Lights

    题目描述 Bessie and the cows were playing games in the barn, but the power was reset and the lights were ...

  6. nodejs + mySQL实践

    1.建立数据库连接:createConnection(Object)方法      该方法接受一个对象作为参数,该对象有四个常用的属性host,user,password,database.与php中 ...

  7. 工控安全入门（七）—— plc的网络

    上一篇我们详细分析了bootram和Vxworks的基本启动流程,这篇文章中我们把视线转到plc的网络部分,同时来复现我们第一个.第二个工控安全漏洞. VxWorks的网络设备驱动 一般我们说有三种设 ...

  8. VS2012与windos版本不兼容问题

    昨天晚上加完班,想着把windows更新下.今天上午就发现再运行VS报错了,提示VS2012与windows版本不兼容,打开.sln文件后,VS自动关闭.错误如下: 查看后网上提示安装VS2012的一 ...

  9. line-height:2和line-height:2em的区别，它们是有区别的

    line-height:2是2倍的意思,如果内部有不同大小文字的情况下,以最大文字为倍数. line-height:2em也是2倍文字大小的意思,但如果内部有大文字,它还是会以父容 器的大小来计算. ...

  10. [Day4] Nginx Http模块二

    一. POST_READ阶段     1. 用户ip在http请求中的传递? 前提:Tcp连接四元组(src ip,src port,dst ip,dst port) HTTP头部 X-Formard ...