jQuery中的工具与插件个人分享

2024年5月5日 174次阅读 来源: a达达

工具

类数组操作

  • get(index)方法
  • 作用 – 根据索引值返回对应的元素(DOM对象)
  • 参数index – 表示元素在jQuery对象中的索引值

  • $().index(element)方法 – 只能查找jQuery对象

    • 作用 – 在指定的jQuery对象中查找是否存在element

      • 存在 – 返回element所对应的索引值
      • 不存在 – 返回 -1

  • $.inArray(value, array, fromIndex)方法 – 查找数组或对象

    • 作用 – 在指定的数组或对象中查找是否存在value

      • 存在 – 返回value所对应的索引值
      • 不存在 – 返回 -1

    • 参数

      • value – 表示要查找的数据内容
      • array – 表示指定的数组或对象

  • $().toArray()方法

    • 作用 – 将jQuery对象转换为数组

  • $.makeArray(obj)方法

    • 作用 – 将类数组转换为数组
    • 参数obj – 表示类数组对象

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    // length属性 - 获取当前jQuery对象中包含DOM对象的个数
    console.log($('div').length);// 5
    for (var i=0; i<$('div').length; i++) {
        // jQuery对象[索引值] -> 转换为DOM对象
        var div = $('div')[i];
    }
    // get(index)方法
    console.log($('div').get(0));
    /*
        * $().index(element)方法 - 只能查找jQuery对象
          * 作用 - 在指定的jQuery对象中查找是否存在element
            * 存在 - 返回element所对应的索引值
            * 不存在 - 返回 -1
          * 参数element - 可以是DOM对象，还可以是jQuery对象，也可以是选择器
        * $.inArray(value, array, fromIndex)方法 - 查找数组或对象
          * 作用 - 在指定的数组或对象中查找是否存在value
            * 存在 - 返回value所对应的索引值
            * 不存在 - 返回 -1
          * 参数
            * value - 表示要查找的数据内容
            * array - 表示指定的数组或对象
     */
    console.log($('div').index(document.getElementById('d1')));// 0
    console.log($('div').index($('#d1')));
    console.log($('div').index('#d1'));

    console.log($.inArray(document.getElementById('d1'), $('div')));// 0
    var arr = [1,2,3,4,5];
    console.log($.inArray(3, arr));
    console.log($.inArray(document.getElementById('d1'), document.getElementsByTagName('div')));
    console.log($.inArray(8, arr));

    /*
        * $().toArray()方法
          * 作用 - 将jQuery对象转换为数组
        * $.makeArray(obj)方法
          * 作用 - 将类数组转换为数组
          * 参数obj - 表示类数组对象
     */
    console.log($('div').toArray());
    console.log($.makeArray($('div')));
    console.log($.makeArray(document.getElementsByTagName('div')));

</script>
</body>

全局函数与工厂函数

  • $().index()

    • jQuery() – 工厂函数的调用 -> 返回jQuery对象
    • index()方法是jQuery对象的方法

  • $.inArray()

    • jQuery – 也是一个对象 -> jQuery的全局对象

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    /*
        * $().index()
          * jQuery() - 工厂函数的调用 -> 返回jQuery对象
          * index()方法是jQuery对象的方法
        * $.inArray()
          * jQuery - 也是一个对象 -> jQuery的全局对象
     */
    var index1 = $('div').index('#d1');
    var index2 = $.inArray(document.getElementById('d1'), $('div'));
    console.log(index1, index2);
    // 所有函数都是Function类型的对象
    function fun(){
        console.log('this is function');
    }

    fun();// 函数调用
    console.log(fun instanceof Object);// true

</script>
</body>

遍历类数组

  • $().each(callback)方法

    • 表示遍历数组或类数组对象“括号中填写 指定数组或类数组 执行函数”

  • each()方法

    • 表示遍历jQuery对象的数组或类数组“括号中填写执行函数”

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<script>
    var $divs = $('div');
    /*
        $().each(callback)方法
        * 作用 - 用于遍历jQuery对象
        * 参数callback - 回调函数
          function(index,domEle){}
          * index - 索引值
          * domEle - 遍历后的DOM对象
     */
    $divs.each(function(index, domEle){
        console.log(index, domEle);
    });

    /*
        $.each(obj, callback)方法
        * 作用 - 用于遍历数组或对象
        * 参数
          * obj - 表示遍历数组或对象
          * callback - 回调函数
            function(index,domEle){}
            * index - 索引值
            * domEle - 遍历后的DOM对象
     */
    $.each(document.getElementsByTagName('div'), function(index, domEle){
        console.log(index, domEle);
    });

</script>
</body>

字符串操作

  • $.trim()方法 – 去掉字符串中开始和结束的空格

示例代码:

    <script src="js/jquery.js"></script>
</head>
<body>
<script>
    // $.trim()方法 - 去掉字符串中开始和结束的空格
    console.log($.trim('  hello, i am zhangwu. '));

</script>
</body>

jQuery插件

jQuery插件的步骤

  1. 引入jQuery文件
  2. 引入jQuery插件文件
  3. 使用插件

懒加载插件效果

  • lazyload插件需要注意的是：
  1. 将图片元素的src属性替换为data-original属性
  2. 为图片元素设置class属性，属性值为lazyload
  3. lazyload插件要求为图片元素设置宽度或高度

示例代码:

    <script src="js/jquery.js"></script>
    <script src="lazyload/jquery.lazyload.js"></script>
</head>
<body>
<!--
    * class属性 - 指定类选择器(CSS样式)
      * class=lazyload - 为了方便JavaScript逻辑定位页面元素
    * data-original属性 - 设置显示图片的真实路径
      * lazyload插件通过当前自定义属性替换src属性
 -->
<img class="lazyload" data-original="imgs/983755043622092476.jpg" width="600px">
<script>
    /*
        懒加载 - 实现的页面中图片的延迟加载
     */
    $('img').lazyload();
</script>
</body>

懒加载核心方法参数

  • lazyload(options)方法

    • threshold – 设置当前图片距离浏览器窗口多少像素值时开始加载
    • threshold – 设置当前图片距离浏览器窗口多少像素值时开始加载

示例代码:

    $('img.lazyload').lazyload({
        threshold : 200,
        effect : 'fadeIn'
    });

瀑布流抄件效果

  • 实现瀑布流布局的效果步骤:

    1. HTML页面结构

      • 定义一个容器元素
      • 在容器元素中的所有元素呈现瀑布流效果

    2. 定位瀑布流布局的容器元素，并且调用masonry()核心方法

      • $().masonry(options)

        • 选项

          • itemSelector – 指定需要瀑布流布局效果的元素(选择器)

示例代码:

    $('.grid').masonry({
        itemSelector: '.grid-item'
    });

轮播图效果插件

  • 轮播图效果 – Swiper – 通过引入外部Swiper插件，在调用由Swiper插件提供的方法 – new Swiper( )
  • 注意: Swiper插件分为CSS文件和JS文件，要一同引入
  • 为轮播图的可视容器设置class属性，属性值为swiper-container
  • 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper

示例代码:

<body>
<!-- 可视窗口容器 -->
<div class="swiper-container">
    <!-- 所有图片的容器 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide red-swiper">Slide 1</div>
        <div class="swiper-slide blue-swiper">Slide 2</div>
        <div class="swiper-slide green-swiper">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script src="jQuery库/jquery.js"></script>
<script src="轮播图/swiper.js"></script>
<script>
    new Swiper('.swiper-container',{
        autoplay: true,//可选选项，自动滑动
        loop : true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable : true
        },
        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
    /*
         轮播图效果 - Swiper
        通过引入外部Swiper插件，在调用由Swiper插件提供的方法 - new Swiper( )
        Swiper插件的注意要求：
         * Swiper插件分为CSS文件和JS文件，要一同引入
         * 为轮播图的可视容器设置class属性，属性值为swiper-container
         * 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper
         * 设置class属性是为了方便操作
     */

</script>
</body>
    原文作者：a达达
    原文地址: https://segmentfault.com/a/1190000016345382
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞