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>