jQuery中的工具和外掛
阿新 • • 發佈：2018-12-20
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>