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. Apache Pig学习笔记（二）

     主要整理了一下,pig里面的一些关键词的含义和用法,pig虽然是一种以数据流处理为核心的框架,但数据库的大部分关键词和操作,在pig里面基本上都能找到对应的函数,非常灵活与简洁,春节前的最后一篇文章 ...

  2. ERP或PLM系统-物料编码管理的技术实现

    1 企业现状 企业日常经营过程中会产生大量的文档,如设计图纸.变更单.计算书.设计方案等,如果是制造企业还会产生大量的产品.组成产品的零部件等物料,这些数据在进入信息系统前都需要有一个唯一的标识,也就 ...

  3. [转]C#中用NamedPipe进程间通信

    转自:http://blog.csdn.net/jinjazz/archive/2009/02/03/3861143.aspx 本文只是一个测试例子,核心代码是kernel32.dll中的一组wind ...

  4. Werkzeug库——wrappers模块

    Werkzeug库中的wrappers模块主要对request和response进行封装.request包含了客户端发往服务器的所有请求信息,response包含了web应用返回给客户端的所有信息.w ...

  5. 博客的页面定制CSS

    我目前的博客CSS其实也是借用了别家的,来源:https://www.cnblogs.com/Penn000/p/6947472.html 注意使用的模板是:darkgreentrip 复制粘贴使用就 ...

  6. btree b+tree 的关系

    btree: 平衡二叉树 b+tree:平衡和二叉树的变种,只在叶节点存储数据. mysql 索引使用的数据结构是 b+tree.

  7. 如何让 J2Cache 在多种编程语言环境中使用

    现在的系统是越来越复杂了,不仅仅是功能复杂,系统结构也非常复杂,而且经常在一个系统里包含几种不同语言编写的子系统.例如用 JavaScript 做前端开发.用 Java/PHP 等等做后端,C/C++ ...

  8. webServices学习三（概念详解）

    WebService通过HTTP协议完成远程调用: (深入分析) WebService只采用HTTP POST方式传输数据,不使用GET方式; -- 握手,WSDL-get, 普通http post的 ...

  9. TZ_11_Spring-Boot的整合SpringMvc和MyBatis

    1.整合SpringMVC 虽然默认配置已经可以使用SpringMVC了,不过我们有时候需要进行自定义配置. 1>修改方式 通过application.yaml 此名字不需要使用@Propert ...

  10. SSM7-nginx的反向代理和负载均衡

    1. 反向代理 1.1. 什么是反向代理 正向代理 反向代理: 反向代理服务器决定哪台服务器提供服务. 返回代理服务器不提供服务器.也是请求的转发. 1.2. Nginx实现反向代理 两个域名指向同一 ...