[分享]jQuery中的工具与插件个人分享
工具
类数组操作
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插件的步骤
引入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'
});瀑布流抄件效果
实现瀑布流布局的效果步骤:
HTML页面结构
定义一个容器元素
在容器元素中的所有元素呈现瀑布流效果
定位瀑布流布局的容器元素，并且调用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>九秘
28 天前