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. Js中获取时间 new date()的用法

    Js中获取时间 new date()的用法 获取时间: var myDate = new Date();//获取系统当前时间 myDate.getYear(); //获取当前年份(2位) myDate ...

  2. Foundation框架系列-NSString

    NSString OC字符串与C语言字符串转换 NSString *str = @"Hello world ! !"; // OC字符串 --> C语言字符串 char *c ...

  3. extern关键字及C\C++相互调用

    extern关键字主要修饰变量或函数,表示该函数可以跨文件访问,或者表明该变量在其他文件定义,在此处引用. 1.extern修饰变量 (1)如果某变量int m在a.c中定义声明,则其他b.c文件访问 ...

  4. 线条之美，玩转SVG线条动画

    线条之美,玩转SVG线条动画 作者:AlloyTeam www.alloyteam.com/2017/02/the-beauty-of-the-lines-break-lines-svg-animat ...

  5. T2483 电梯（模拟题）

    https://www.luogu.org/problem/show?pid=T2483 题目背景 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道. ...

  6. 微信小程序之组件的集合（三）

    看看音乐播放组件是如何实现完成的音乐的播放的!!! 一.音乐music组件的开发 1.页面以及页面样式的开发 // music组件页面开发 <view hidden="{{hidden ...

  7. Winform 分页

    1.图列展示 2.分页控件代码 Paging.Designer.cs partial class Paging { /// <summary> /// 必需的设计器变量. /// < ...

  8. angular1.0 $http jsonp callback

    $http.jsonp(sDUrl,{cache:false,jsonpCallbackParam:'callback'}); https://stackoverflow.com/questions/ ...

  9. Wamp 扩展Oracle Oci

    参考网址: http://www.cnblogs.com/azhw/p/4599632.html

  10. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---适配器模式之TurkeyAdapter[转]

    适配器模式的主要意图是对现有类的接口进行转换,以满足目标类的需求.其次,可以给目标类的接口添加新的行为(主要指方法).这一点容易与装饰模式混淆.从意图方面来看,装饰模式不改变(通常指增加)接口中的行为 ...