jQuery中的工具与插件我的分享

时间 2019-12-10

原文原文链接

工具

类数组操做

get(index)方法
做用 - 根据索引值返回对应的元素(DOM对象)
参数index - 表示元素在jQuery对象中的索引值
$().index(element)方法 - 只能查找jQuery对象jquery
- 做用 - 在指定的jQuery对象中查找是否存在element数组
  - 存在 - 返回element所对应的索引值
  - 不存在 - 返回 -1
$.inArray(value, array, fromIndex)方法 - 查找数组或对象浏览器
- 做用 - 在指定的数组或对象中查找是否存在valueapp
  - 存在 - 返回value所对应的索引值
  - 不存在 - 返回 -1
- 参数dom
  - value - 表示要查找的数据内容
  - array - 表示指定的数组或对象
$().toArray()方法ide
- 做用 - 将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()oop
- 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插件的步骤

引入jQuery文件
引入jQuery插件文件
使用插件

懒加载插件效果

lazyload插件须要注意的是：

将图片元素的src属性替换为data-original属性
为图片元素设置class属性，属性值为lazyload
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>