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. Java程序员面试题收集（1）

    一.Java基础部分 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 1)抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...

  2. [计蒜之道2019 复赛 A]外教 Michale 变身大熊猫

    [计蒜之道2019 复赛 A]外教 Michale 变身大熊猫 Online Judge:2019计蒜之道 复赛 A Label:LIS+线段树.树状数组+快速幂(模逆元) 题目描述 题解: pre. ...

  3. UVA - 1230

    https://vjudge.net/problem/UVA-1230 费马小定理优化快速幂 #include <iostream> #include <cstdio> #in ...

  4. [JZOJ5229]【GDOI2018模拟7.14】小奇的糖果

    题目 题目大意 在一个二维的平面上,有一堆有颜色的点,你需要找出一条水平线段,使得这个线段上面(或者是下面)的点的颜色不包含所有的颜色.问点数最大是多少. 思考历程 在一开始,我看错了题目大意. 题目 ...

  5. Angular本地数据存储LocalStorage

    //本地存储数据===================================.factory('locals',['$window',function($window){ return{ / ...

  6. 让pandoc输出pdf时支持中文

    主机环境为:Ubuntu 12.04 LTS.对于RH系列,yum安装包的名称可能会有不同,不过yum联想能力比较强,应该不是问题. 安装pandoc,安装tex-live sudo apt-get ...

  7. vue 路由（二级）配置及详细步骤

    1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...

  8. Ubuntu下使用sshfs挂载远程目录到本地

    访问局域网中其他Ubuntu机器,在不同机器间跳来跳去,很是麻烦,如果能够把远程目录映射到本地无疑会大大方面使用,就像Windows下的网络映射盘一样.在Linux的世界无疑也会有这种机制和方式,最近 ...

  9. stream之累加求和

    1.集合中直接包含BigDecimal元素的累加 List<Integer> list = new ArrayList<>();list.add(3);list.add(7); ...

  10. MySQL系列(一)--基础知识（转载）

    安装就不说了,网上多得是,我的MySQL是8.0版本,可以参考:CentOS7安装MySQL8.0图文教程和MySQL8.0本地访问设置为远程访问权限 我的MySQL安装在阿里云上面,阿里云向外暴露端 ...