jQuery的工具属性
jQuery类数组操作
length属性
- 表示获取类数组中元素的个数
get()方法
- 表示获取类数组中单个元素“括号中填写该元素的索引值”
index()方法
- 表示用过指定类数组中的元素来获取对应的索引值“括号中填写指定元素的选择器”
$.makeArray()方法
- 表示将指定类数组对象转换成数组对象“括号中填写指定的类数组”
toArray()方法
- 表示将jQuery类数组对象转换成数组对象“括号中填写指定的jQuery类数组对象”
$.inArray()方法
- 表示在指定数组或类数组中查找指定元素的索引值“括号中填写 指定元素 指定数组或类数组 搜索的索引值”
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
jQuery工具属性
length - 表示获取类数组中元素的个数
get() - 表示获取类数组中单个元素“括号中填写该元素的索引值”
index() - 表示用过指定类数组中的元素来获取对应的索引值“括号中填写指定元素的选择器”
$.makeArray() - 表示将指定类数组对象转换成数组对象“括号中填写指定的类数组”
toArray() - 表示将jQuery类数组对象转换成数组对象“括号中填写指定的jQuery类数组对象”
$.inArray() - 表示在指定数组或类数组中查找指定元素的索引值“括号中填写 指定元素 指定数组或类数组 搜索的索引值”
*/
var $div = $( '#d1' );
console.log( $div );
console.log( $div.length );
console.log( $div.get( 0 ) );
console.log( $div.index( 'div' ) );
console.log( $div.index( '.d1' ) );
var d1 = document.getElementById( 'd1' );
console.log( $div.index( d1 ) );
console.log( $.makeArray( $div ) );
var d2 = document.getElementsByTagName( 'div' );
console.log( $.makeArray( d2 ) );
console.log( $div.toArray() );
console.log( $.inArray( d1, $div ) );
</script>
</body>jQuery遍历
each()方法
- 表示遍历jQuery对象的数组或类数组“括号中填写执行函数”
$.each()方法
- 表示遍历数组或类数组对象“括号中填写 指定数组或类数组 执行函数”
<body>
<div>我特啊呦弄啥嘞</div>
<div>我特啊呦赌赢</div>
<div>咦！...嫩个鳖孙...</div>
<script src="jquery.js"></script>
<script>
/*
jQuery遍历
each( ) - 表示遍历jQuery对象的数组或类数组“括号中填写执行函数”
$.each( ) - 表示遍历数组或类数组对象“括号中填写 指定数组或类数组 执行函数”
*/
var $div = $( 'div' );
/*
each( )执行函数
index - 表示遍历结果在jQuery对象中的索引值
domEle - 表示遍历的结果( DOM对象 )
*/
$div.each( function ( index, domEle ) {
console.log( index, domEle );
/* 遍历结果是DOM对象 */
console.log( domEle );
/* 把遍历结果由DOM对象转换成jQuery对象 */
console.log( $( domEle ) );
} );
var div = document.getElementsByTagName( 'div' );
/*
$.each( )执行函数
index - 表示遍历结果在jQuery对象中的索引值
domEle - 表示遍历的结果( DOM对象 )
*/
$.each( $div, function ( index, domEle ) {
console.log( index, domEle );
} );
$.each( div, function ( index, domEle ) {
console.log( index, domEle );
} )
</script>
</body>jQuery字符串处理
$.trim()方法
- 表示处理指定字符串开头和结尾的空格
<body>
<script src="jquery.js"></script>
<script>
/*
jQuery字符串处理
$.trim( ) - 表示处理指定字符串开头和结尾的空格
*/
var zf = ' 啊啊啊 哈哈哈 呀呀呀 ';
console.log( zf );
console.log( zf.length );
var zfs = $.trim( zf );
console.log( zfs );
console.log( zfs.length );
/* DOM中的处理 */
function trim( zf ) {
var xzf = '';
var zzfs = 0, yzfs = 0;
for ( var i = 0; i < zf.length; i++ ) {
var is = zf[i];
if ( is !== ' ' ) {
zzfs = i;
break;
}
}
for ( var s = zf.length-1; s >= 0; s-- ) {
var si = zf[s];
if ( si !== ' ' ) {
yzfs = s;
break;
}
}
var xzf = zf.substring( zzfs, yzfs+1 );
return xzf;
}
console.log( trim( zf ) );
console.log( trim( zf ).length );
</script>
</body>jQuery的插件
图片懒加载效果
- lazyload插件
- 通过引入外部lazyload插件，在调用由lazyload插件提供的方法 – lazyload()
lazyload插件的注意要求：
- 将图片元素的src属性替换为data-original属性
- 为图片元素设置class属性，属性值为lazyload
- lazyload插件要求为图片元素设置宽度或高度
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<style>
.lazyload {
width: 800px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(1).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(2).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(3).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(4).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(5).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(6).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(7).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(8).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(9).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(10).jpg">
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
/*
图片懒加载 - lazyload
通过引入外部lazyload插件，在调用由lazyload插件提供的方法 - lazyload( )
lazyload插件的注意要求：
* 将图片元素的src属性替换为data-original属性
* 为图片元素设置class属性，属性值为lazyload
* lazyload插件要求为图片元素设置宽度或高度
*/
var $img = $( '.lazyload' );
$img.lazyload( {
threshold : 50,
event : 'mouseover',
effect : 'fadeIn',
effect_speed : 2000
} );
</script>
</body>瀑布流效果
- masonry插件
- 通过引入外部masonry插件，在调用由masonry插件提供的方法 – masonry( )
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
body {
margin: 0;
}
#d1 {
width: 1200px;
margin: 0 auto;
}
.img {
width: 300px;
display: block;
}
</style>
</head>
<body>
<div id="d1">
<img class="img" src="临时资料/插件/imgs/图片%20(1).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(2).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(3).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(4).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(5).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(6).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(7).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(8).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(9).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(10).jpg">
</div>
<script src="jquery.js"></script>
<script src="masonry.pkgd.js"></script>
<script>
/*
瀑布流效果 - masonry
通过引入外部masonry插件，在调用由masonry插件提供的方法 - masonry( )
*/
var $div = $( '#d1' );
$div.masonry( {
itemSelector : '.img'
} );
</script>
</body>轮播图效果
- Swiper插件
- 通过引入外部Swiper插件，在调用由Swiper插件提供的方法 – new Swiper( )
Swiper插件的注意要求：
- Swiper插件分为CSS文件和JS文件，要一同引入
- 为轮播图的可视容器设置class属性，属性值为swiper-container
- 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper
- 设置class属性是为了方便操作
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="swiper.css">
<style>
body {
margin: 0;
}
.swiper-container {
width: 900px;
margin: 25px auto;
}
</style>
</head>
<body>
<!-- 可视窗口容器 -->
<div class="swiper-container">
<!-- 所有图片的容器 -->
<div class="swiper-wrapper">
<img src="临时资料/插件/imgs/图片%20(1).jpg" class="swiper-slide">
<img src="临时资料/插件/imgs/图片%20(4).jpg" class="swiper-slide">
<img src="临时资料/插件/imgs/图片%20(3).jpg" class="swiper-slide">
</div>
</div>
<script src="jquery.js"></script>
<script src="swiper.js"></script>
<script>
/*
轮播图效果 - Swiper
通过引入外部Swiper插件，在调用由Swiper插件提供的方法 - new Swiper( )
Swiper插件的注意要求：
* Swiper插件分为CSS文件和JS文件，要一同引入
* 为轮播图的可视容器设置class属性，属性值为swiper-container
* 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper
* 设置class属性是为了方便操作
*/
new Swiper('.swiper-container',{
autoplay: true
});
</script>
</body>jQuery对象和工厂函数
自定义jQuery插件
全局函数插件
jQuery.extend()
- 括号中填写Object类型
- 将jQuery当做一个对象来使用
jQuery对象插件
jQuery.fn.extend()
- 括号中填写Object类型
- 将jQuery当做一个函数来使用
在定义一个构造函数做为扩充插件的属性和方法
- 做为工厂函数的返回值
/* 将jQuery当做一个函数来使用 */
var jQuery = $ = function () {
return new s1();
};
/* 定义一个构造函数 - 做为工厂函数的返回值 */
function s1() {
// 定义对象的属性和方法
}
/* 调用函数的属性或方法 */
var sx = jQuery();
sx.each();
jQuery().each();
$().each();
/* 将jQuery当做一个对象来使用 */
var jQuery = $ = {};
jQuery.each = function () {};
$.each();jQuery对象方法插件
<head>
<meta charset="UTF-8">
<title>对象方法插件</title>
<style>
.div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1" class="div"></div>
<script src="jquery.js"></script>
<script>
/*
自定义jQuery对象方法插件
jQuery.fn.extend( ) - 括号中填写Object类型
*/
jQuery.fn.extend( {
/* 扩充插件的属性和方法 */
name : '兔子',
backgroundColor : function (selector,options) {
var $elem = $(selector);
if ('color' in options) {
$elem.css('backgroundColor', options.color);
}
}
} );
/* 另一种用法 */
jQuery.fn.backgroundColor = function (selector,options) {
var $elem = $(selector);
if ('color' in options) {
$elem.css('backgroundColor', options.color);
}
};
</script>
<script>
/* 调用自定义插件 */
var $div = $( '#d1' );
console.log( $div.name );
$div.backgroundColor('.div', {
color : 'blue'
});
</script>
</body>全局函数插件
<script src="jquery.js"></script>
<script>
/*
自定义全局函数插件
jQuery.extend( ) - 括号中填写Object类型
*/
jQuery.extend( {
taigename : '小兔子',
xyxyxy : function () {
console.log( '大兔子' )
}
} );
/* 另一种用法 */
jQuery.xyxyxy = function () {
console.log( '大兔子' );
}
</script>
<script>
/* 调用自定义插件的方法 */
console.log( jQuery.taigename );
jQuery.xyxyxy();
</script>
</body>