工具
類陣列操作
- 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>