【jQuery】之工具与插件的运用

jQuery

工具方法

1.类数组操作

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
   console.log('div'.length);//5
    //   length属性-获取jQuery对象包裹DOM的个数
   for(var i=0; i<$('div').length;i++)  {
       var div = $('div')[i];
   }// jQuery对象[索引值]-转换DOM对象
   console.log($('div').get(0));
    //  get(index)方法


   console.log($('div').index(document.getElementById('q1')));
   console.log($('div').index($('#q1')));
   console.log($('div').index('#q1'));

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


   console.log($('div').toArray());
   console.log($.makeArray($('div')));
   console.log($.makeArray(document.getElementsByTagName('div')));

    /*
    * $().toArray()方法
      将jQuery对象转换为数组
      $.makeArray(obj)方法
      将类数组转换为数组
      参数obj-表示类数组对象
     */
</script>
</body>

遍历类数组

主要以$()each()方法通过两种形式表现
callback：匹配元素要执行的函数 obj；需要遍历对象和数组 callback：匹配元素要执行的函数

<script src="js/jquery.js"></script>
</head>
<body>
<div id="q1"></div>
<div id="q2"></div>
<div id="q3"></div>
<div id="q4"></div>
<div id="q5"></div>
<script>
    var $divs = $('div');
    $divs.each(function (index, domEle) {
        console.log(index, domEle);
    });
    /*$().each(callback)方法
    * 遍历jQuery对象
    * */

    $.each(document.getElementsByTagName('div'),function (index, domEle) {
        console.log(index, domEle);
    });
</script>
</body>

字符串操作

以$.TRIM()方法用于去掉字符串开始和结束的空格

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

2.插件使用

1.lazyoad懒加载插件

用于加载HTML页面中延迟图片，在浏览器窗口之外的图片不会加载，只有用户操作滚动才会被加载提高HTML页面加载速度，和减少服务器超负荷

<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/a.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/b.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/c.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/e.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/f.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/g.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/h.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/i.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/j.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/k.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/l.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/m.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/n.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/o.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/p.jpg" height="300px" width="500px"/>
<img class="lazyload" data-original="./imgs/q.jpg" height="300px" width="500px"/>
<script>
    $('img').lazyload();
//   实现页面中图片的延迟加载
</script>
</body>

2.masonry瀑布流插件

以多栏布局，大小不一按照一定规格排列，给于用户视觉的表现

<script src="js/jquery.js"></script>
    <script src="masonry/masonry.pkgd.js"></script>
    <style>
        .qh {
           width: 80%;
           margin: 0 auto;
           overflow: hidden;
        }
        .cq {
           display: block;
           float: left;
           width: 30%;
           margin: 7px;

        }
    </style>
</head>
<body>
<div class="qh">
    <img class="cq" src="imgs/a.jpg">
    <img class="cq" src="imgs/b.jpg">
    <img class="cq" src="imgs/c.jpg">
    <img class="cq" src="imgs/d.jpeg">
    <img class="cq" src="imgs/e.jpg">
    <img class="cq" src="imgs/f.jpg">
    <img class="cq" src="imgs/g.jpg">
    <img class="cq" src="imgs/h.jpg">
    <img class="cq" src="imgs/i.jpg">
    <img class="cq" src="imgs/j.jpg">
    <img class="cq" src="imgs/k.jpg">
    <img class="cq" src="imgs/l.jpg">
    <img class="cq" src="imgs/m.jpg">
    <img class="cq" src="imgs/n.jpg">
    <img class="cq" src="imgs/o.jpg">
    <img class="cq" src="imgs/p.jpg">
    <img class="cq" src="imgs/q.jpg">
</div>
<script>
    $('.qh').masonry({
       itemSelector:'.cq'
    });
</script>
</body>

3.swiper轮班图插件

依赖jQuery也可以不依赖jQuery 并实现水平滑动的效果

<link rel="stylesheet" href="swiper/swiper.css">
    <style>
        body {
            margin: 0;
        }
        .swiper-container {
            width: 80%;
            height: 400px;
            margin: 100px auto;
        }
        .swiper-slide {
            font-size: 48px;
            line-height: 400px;
            text-align: center;
            color: white;
        }
        .red-swiper {
            background-color: lightcoral;
        }
        .blue-swiper {
            background-color: lightskyblue;
        }
        .green-swiper {
            background-color: darkcyan;
        }

    </style>
</head>
<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>
<script src="javascript/jquery.js"></script>
<script src="swiper/swiper.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true
    });

</script>