Jquery概述
JavaScript庫
即library，是一個封裝好的特定的集合（方法和函數）。從封裝一大堆函數的角度理解庫，就是在這個庫中，封裝了很多預先定義好的函數，如：動畫animate，hide，show，獲取元素等
簡單理解：就是一個JS文件，里面對我們原生js代碼進行了封裝，存放到里面。方便快速高效使用封裝好的功能，如jQuery庫，為了快速方便操作DOM。
常見的JavaScript庫
- jQuery
- Prototype
- YUI
- Dojo
- Ext JS
- 移動端的zepto
這些庫都是對原生JavaScript的封裝，內部都是用JavaScript實現的。
jQuery的概念
jQuery 是一個快速、簡介的JavaScript庫，其設計的宗旨是“write Less，Do More”,提倡寫更少的代碼，做更多的事
j為JavaScript，Query：查詢；意為查詢js，把js中的DOM操作做了封裝，可以快速的查詢使用里面的功能，提高開發效率。
jQuery封裝了js常用的功能代碼，優化了DOM操作、事件處理、動畫設計和Ajax交互。
學習jQuery本質就是學習調用這些函數（方法）。
優點：
- 輕量級，核心文件才幾十kb，不會影響頁面加載速度
- 跨瀏覽器兼容，基本兼容了現在主流的瀏覽器
- 鏈式編程、隱式迭代
- 對事件、樣式、動畫支持，大大簡化了DOM操作
- 支持插件擴展開發。有着豐富的第三方的插件，例如:樹形菜單、日期控件、輪播圖等
- 免費、開源
jQuery 的基本使用
先引入jQuery.js
jQuery的入口函數
jQuery中常見的兩種入口函數：
// 第一種: 簡單易用。
$(function () {
... // 此處是頁面 DOM 加載完成的入口
}) ;
// 第二種: 繁瑣，但是也可以實現
$(document).ready(function(){
... // 此處是頁面DOM加載完成的入口
});
總結：
- 等着 DOM 結構渲染完畢即可執行內部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
- 相當於原生 js 中的 DOMContentLoaded。
- 不同於原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執行內部代碼。
- 更推薦使用第一種方式。
jQuery 的頂級對象 $
-
$是 jQuery 的別稱，在代碼中可以使用 jQuery 代替，但一般為了方便，通常都直接使用 $ 。
$('div').hide();等價於jQuery('div').hide(); -
$是jQuery的頂級對象，相當於原生JavaScript中的 window。把元素利用$包裝成jQuery對象，就可以調用jQuery 的方法。
jQuery 對象和DOM對象
使用 jQuery 方法和原生JS獲取的元素是不一樣的，總結如下 :
- 用原生 JS 獲取來的對象就是 DOM 對象
- jQuery 方法獲取的元素就是 jQuery 對象。
- jQuery 對象本質是： 利用$對DOM 對象包裝后產生的對象（偽數組形式存儲）。
注意：
- 只有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法（不能相互調用）
jQuery對象和DOM對象互相轉換
DOM對象和jQuery對象之間是可以相互轉換的，因為原生js比jQuery更大，原生的一些屬性和方法jQuery沒有給我們封裝，要想使用這些屬性和方法，需要把jQuery對象轉換為DOM對象才能使用。
// 1.DOM對象轉換成jQuery對象，方法只有一種
var box = document.getElementById('box'); // 獲取DOM對象
var jQueryObject = $(box); // 把DOM對象轉換為 jQuery 對象
// 2.jQuery 對象轉換為 DOM 對象有兩種方法：
// 2.1 jQuery對象[索引值]
var domObject1 = $('div')[0]
// 2.2 jQuery對象.get(索引值)
var domObject2 = $('div').get(0)
總結：實際開發比較常用的是把DOM對象轉換為jQuery對象，這樣能夠調用功能更加強大的jQuery中的方法。
jQuery 選擇器
原生 JS 獲取元素方式很多，很雜，而且兼容性情況不一致，因此 jQuery 給我們做了封裝，使獲取元素統一標准。
基礎選擇器
$("選擇器") // 里面選擇器直接寫 CSS 選擇器即可，但是要加引號
| 名稱 | 用法 | 描述 |
|---|---|---|
| ID選擇器 | $("#id") | 獲取指定ID的元素 |
| 全選選擇器 | $('*') | 匹配所有元素 |
| 類選擇器 | $('.class') | 獲取同一類class的元素 |
| 標簽選擇器 | $('div') | 獲取同一類標簽的所有元素 |
| 並集選擇器 | $('div,p,li') | 獲取多個元素 |
| 交集選擇器 | $('ul.li.a') | 交集元素 |
層級選擇器
層級選擇器最常用的兩個分別為：后代選擇器和子代選擇器。
| 名稱 | 用法 | 描述 |
|---|---|---|
| 子代選擇器 | $("ul>li”); | 使用>號，獲取親兒子層級的元素（子一代）；注意，並不會獲取孫子層級的元素（子二代） |
| 后代選擇器 | $("ul li"); | 使用空格，獲取ul下所有的li元素，包括子二代、子三代。。。 |
案例：
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
篩選選擇器
在所有的選項中選擇滿足條件的進行篩選選擇。常見如下：
| 語法 | 用法 | 描述 |
|---|---|---|
| :first | $('li:first') | 獲取第一個li元素 |
| :last | $('li:last') | 獲取最后一個li元素 |
| :eq(index) | $('li:eq(2)') | 獲取到的li元素中，選擇索引號為2的元素，索引號index從0開始 |
| :odd | $('li:odd') | 獲取到的li元素中，選擇索引號為奇數的元素 |
| :even | $('li:even') | 獲取到的li元素中，選擇索引號為偶數的元素 |
案例代碼
<body>
<ul>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
</ul>
<ol>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
<li>多個里面篩選幾個</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
另: jQuery中還有一些篩選方法，類似DOM中的通過一個節點找另外一個節點，父、子、兄以外有所加強。
| 語法 | 用法 | 說明 |
|---|---|---|
| parent() | $("li").parent(); | 查找父級 |
| children(selector) | $("ul").children("li"); | 相當於$("ul>li"),子一代（兒子） |
| find(selector) | $("ul").find("li"); | 相當於$("ul li"),后代選擇器 |
| siblings(selector) | $(".first").siblings("li"); | 查找除自身以外的兄弟節點 |
| nextAll([expr]) | $(".first").nextAll(); | 查找該元素當前位置之后所有的同輩元素 |
| prevtAll([expr]) | $(".last").prevAll(); | 查找該元素當前位置之前所有的同輩元素 |
| hasClass(class) | $("div").hasClass("protected") | 檢查當前元素是否含有某個特定的類，如果有，則返回true |
| eq(index) | $("li").eq(2); | 相當於$("li:eq(2)"),index 從0開始，選取下標為2的元素（index可以直接是一個變量） |
重點記住：parent() children() find() siblings() eq()
排他思想
- jQuery 設置樣式
$('div').css('屬性', '值')
- jQuery 里面的排他思想
// 想要多選一的效果，排他思想：當前元素設置樣式，其余的兄弟元素清除樣式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
隱式迭代
// 遍歷內部 DOM 元素（偽數組形式存儲）的過程就叫做隱式迭代。
// 簡單理解：給匹配到的所有元素進行循環遍歷，執行相應的方法，而不用我們再進行循環，簡化我們的操作，方便我們調用。
$('div').hide(); // 頁面中所有的div全部隱藏，不用循環操作
$('div').css('background','pink');//給所有div設置背景色為pink
$('ul li').css('color','skyblue');
鏈式編程
// 鏈式編程是為了節省代碼量，看起來更優雅。
//原先分為兩句：
//$(this).css("color","red");
//$(this).siblings().css("color","");
//jQuery鏈式編程 代碼更簡潔
$(this).css('color', 'red').sibling().css('color', '');
舉個栗子：
<button><div>a</div>
快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>
<script>
$(function() {
// 1. 隱式迭代 給所有的按鈕都綁定了點擊事件
$("button").click(function() {
// 2. 讓當前元素顏色變為紅色
// $(this).css("color", "red");
// 3. 讓其余的姐妹元素不變色
// $(this).siblings().css("color", "");
// 鏈式編程
// $(this).css("color", "red").siblings().css("color", "");
// 兄弟的父級變色
// $(this).siblings().parent().css("color","red");
//兄弟的兒子變色
$(this).siblings().children().css("color","red");
});
})
</script>
案例：淘寶服飾精品案例
思路分析：
- 核心原理：鼠標經過左側盒子某個小li，就讓內容區盒子相對應圖片顯示，其余的圖片隱藏。
- 需要得到當前小li 的索引號，就可以顯示對應索引號的圖片
- jQuery 得到當前元素索引號 $(this).index()
- 中間對應的圖片，可以通過 eq(index) 方法去選擇
- 顯示元素 show() 隱藏元素 hide()
代碼：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: hidden;
}
#left,
#content {
float: left;
}
#left li {
background: url(../img/lili.jpg) repeat-x;
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: url(../img/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script type="text/javascript">
// 入口函數
$(function() {
// 1. 鼠標經過左側小li 事件
$("#left li").mouseover(function() {
// 2 得到當前小 li 的索引號
var index = $(this).index();
// console.log(index);
// //3 讓我們右側的盒子相應索引號的圖片顯示出來就好了
// $("#content div").eq(index).show();
// //4 讓其余的圖片隱藏（兄弟元素隱藏）
// $("#content div").eq(index).siblings().hide();
// 通過鏈式編程將 3 4 整合為一句代碼
$("#content div").eq(index).show().siblings().hide();
})
})
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">連衣裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女褲</a></li>
<li><a href="#">羽絨服</a></li>
<li><a href="#">牛仔褲</a></li>
</ul>
<div id="content">
<div>
<a href="#"><img src="../img/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/女褲.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/羽絨服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="../img/牛仔褲.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
jQuery 樣式操作
jQuery中常用的樣式操作有兩種:CSS()和設置類樣式方法
方法一：操作CSS方法
jQuery可以使用css方法來修改簡單元素樣式；也可以操作類，修改多個樣式。常用以下三種形式：
// 1.參數只寫屬性名，則是返回屬性值
var strColor = $(this).css('color');
// 2. 參數是屬性名，屬性值，逗號分隔，是設置一組樣式，屬性必須加引號，值如果是數字可以不用跟單位和引號(不加引號的話必須是數字，且不能加單位，且默認單位為px)
$(this).css(''color'', ''red'');
// 3. 參數可以是對象形式，方便設置多組樣式。屬性名和屬性值用冒號隔開， 屬性可以不用加引號，復合屬性必須采用駝峰命名法，如果值不是數字，需要加引號
// 通過對象+引號設置多種樣式：
$("div").css({
"width":"400px",
"height":"400px",
"background-color":"skyblue"
})
//如果用對象且不加引號寫法，那么復合屬性必須采用駝峰命名法，如果值不是數字，需要加引號（默認單位為px）
$("div").css({
width:400,
height:400,
backgroundColor:"skyblue"
})
})
注意：css() 多用於樣式少時操作，多了則不太方便
方法二：設置類樣式操作方法
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。常用以下三種形式 :
// 1.追加類
$("div").addClass("current");//類名不用添加 .
// 2.刪除類
$("div").removeClass("current");
// 3.切換類//沒有就加上，有就切換
$("div").toggleClass("current");
注意：
- 設置類樣式方法比較適合樣式多時操作，可以彌補css()的不足。
- 原生 JS 中 className 會覆蓋元素原先里面的類名，jQuery 里面類操作只是對指定類進行操作（追加，刪除，切換），不影響原先的類名。
- 類名不用加 .
舉個栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
transition: all 0.5s;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
margin: 0 auto;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="one"></div>
<script type="text/javascript">
// 原生js通過className修改類名，該方法會覆蓋掉之前所有的類名，只保留新的類名
// var one = document.querySelector(".one");
// one.onclick = function(){
// this.className = "two";
// }
// jQuery 通過添加類名方法（addClass）可以做到在不覆蓋之前類名時追加類名
$(function() {
$(".one").click(function(){
$(".one").addClass("two");//div.class = "one two"
})
})
</script>
</body>
</html>
jQuery 動畫效果
jQuery 給我們封裝了很多動畫效果，最為常見的如下：
- 顯示隱藏：show() / hide() / toggle() ;
- 滑入滑出：slideDown() / slideUp() / slideToggle() ;
- 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 自定義動畫：animate() ;
注意：
- 動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
- jQuery為我們提供另一個方法，可以停止動畫排隊：stop() ;
顯示隱藏
顯示隱藏動畫，常見有三個方法：show() / hide() / toggle() ;
語法規范如下:
-
顯示語法規范：
-
show([speed,[easing],[fn]]); -
顯示參數
-
參數都可以省略，無動畫，直接顯示
-
speed：三種預定速度之一的字符串（“slow”,"nomal","fast"）或表示動畫時長的毫秒數值（如：1000）
-
easing：（Optional）用來指定切換效果，默認時"swing"，可用參數“linear”
-
fn:回調函數，在動畫完成時執行的函數，每個元素執行一次
-
-
-
隱藏語法規范：
-
hide([speed,[easing],[fn]]); -
顯示參數
-
參數都可以省略，無動畫，直接顯示
-
speed：三種預定速度之一的字符串（“slow”,"nomal","fast"）或表示動畫時長的毫秒數值（如：1000）
-
easing：（Optional）用來指定切換效果，默認時"swing"，可用參數“linear”
-
fn:回調函數，在動畫完成時執行的函數，每個元素執行一次
-
-
-
切換語法規范：
-
toggle([speed,[easing],[fn]]);-
參數都可以省略，無動畫，直接顯示
-
speed：三種預定速度之一的字符串（“slow”,"nomal","fast"）或表示動畫時長的毫秒數值（如：1000）
-
easing：（Optional）用來指定切換效果，默認時"swing"，可用參數“linear”
-
fn:回調函數，在動畫完成時執行的函數，每個元素執行一次
-
-
舉個栗子
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 300px;
background-color: pink;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script type="text/javascript">
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(1);
});
})
$("button").eq(1).click(function(){
$("div").hide("swing");
})
$("button").eq(2).click(function(){
$("div").toggle("swing");
})
});
</script>
</body>
</html>
案例：tab 欄切換
案例分析：
- 點擊上部的li，當前li添加current類，其余兄弟移除類
- 點擊的同時，獲得當前li的索引號
- 讓下部里面相應索引號的item顯示，其余的item隱藏
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介紹</li>
<li>規格與包裝</li>
<li>售后保障</li>
<li>商品評價（50000）</li>
<li>手機社區</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介紹模塊內容
</div>
<div class="item">
規格與包裝模塊內容
</div>
<div class="item">
售后保障模塊內容
</div>
<div class="item">
商品評價（50000）模塊內容
</div>
<div class="item">
手機社區模塊內容
</div>
</div>
</div>
<script type="text/javascript">
$(function() {
// 1. 點擊上部的li，當前li添加current類，其余兄弟移除類
// 1.1先給小li綁定點擊事件 隱式迭代
$(".tab_list li").click(function() {
// 鏈式編程
// 1.2 點擊后給li添加current類 其余兄弟移除current類
$(this).addClass("current").siblings().removeClass("current");
// 2. 點擊的同時，獲得當前li的索引號
var index = $(this).index();
// console.log(index);
// 3. 讓下部tab_con里面相應索引號的item顯示，其余的item隱藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>
事件切換
hover([over],out)
- over:鼠標移到元素上要觸發的函數（相當於mouseenter）
- out:鼠標移出元素要觸發的函數（相當於mouseleave）
案例：簡潔版滑動下拉菜單
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/jquery-3.6.0.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">評論</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function(){
// // 鼠標經過
// $(".nav>li").mouseover(function(){
// // $(this) jQuery 當前元素 this不要加引號
// // show() 顯示元素 hide()隱藏元素
// $(this).children('ul').slideDown(500);
// })
// // 鼠標離開
// $(".nav>li").mouseout(function(){
// $(this).children("ul").slideUp(500);
// })
// 1、事件切換 hover :就是鼠標經過和離開的復合寫法
// $(".nav>li").hover(function(){
// $(this).children('ul').slideDown(500);
// },function(){
// $(this).children("ul").slideUp(500);
// })
// 2、事件切換 hover :如果只寫一個函數，那么鼠標經過和鼠標離開都會觸發這個函數
$(".nav>li").hover(function(){
$(this).children("ul").slideToggle(200);
});
})
</script>
</body>
</html>
這個案例有個小問題，就是動畫一旦出發就會執行，形成動畫隊列
動畫隊列及其停止排隊方法
動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果隊列執行。
停止排隊：
stop();
- stop() 方法用於停止動畫或效果
- stop() 寫道動畫或者效果的前面，相當於停止結束上一次的動畫
舉個栗子：給上面 事件切換的案例的效果前面添加stop()
$(".nav>li").hover(function(){
// stop() 方法必須寫在動畫或效果前面，如果寫在后面則相當於該效果不執行
$(this).children("ul").stop().slideToggle(200);
});
淡入淡出效果
淡入效果語法規范
fadeIn([speed,[easing],[fn]])
- 參數都可以省略
- speed:三種預定速度之一的字符串（”slow“，”normal“，”fast“）或表示動畫時長的毫秒數值（如：1000）
- easing:(Optional)用來指定切換效果，默認是”swing“，可用參數”linear“
- fn：回調函數，在動畫完成時執行的函數，每個元素執行一次
淡出效果語法規范
fadeOut([speed,[easing],[fn]])
- 參數都可以省略
- speed:三種預定速度之一的字符串（”slow“，”normal“，”fast“）或表示動畫時長的毫秒數值（如：1000）
- easing:(Optional)用來指定切換效果，默認是”swing“，可用參數”linear“
- fn：回調函數，在動畫完成時執行的函數，每個元素執行一次
漸進方式調整到指定的不透明度
fadeTo([speed],opacity,[easing],[fn])
效果參數：
- opacity 透明度必須寫，取值 0-1之間。
- speed:三種預定速度之一的字符串（”slow“，”normal“，”fast“）或表示動畫時長的毫秒數值（如：1000）
- easing:(Optional)用來指定切換效果，默認是”swing“，可用參數”linear“
- fn：回調函數，在動畫完成時執行的函數，每個元素執行一次
舉個栗子
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 150px;
height: 300px;
background-color: pink;
display:none;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切換</button>
<button>修改透明度</button>
<div></div>
<script type="text/javascript">
$(function(){
$("button").eq(0).click(function(){
// 淡入效果
$("div").fadeIn(1000);
})
$("button").eq(1).click(function(){
// 淡出效果
$("div").fadeOut(1000);
})
$("button").eq(2).click(function(){
// 淡入淡出切換
$("div").fadeToggle(1000);
})
$("button").eq(3).click(function(){
// 修改透明度
$("div").fadeTo(1000,0.2);
})
});
</script>
</body>
</html>
淡入淡出及突出顯示案例
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="../lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 當鼠標進入的時候，其他的li標簽透明度：0.5
$(".wrap li").hover(function() {
// 別忘了加停止動畫 stop()
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
$(this).siblings().stop().fadeTo(400, 1);
})
//當鼠標離開時，其他li 透明度改為1
})
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="../img/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="../img/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
自定義動畫 animate
animate(params,[speed],[easing],[fn]);
- params：想要更改的樣式屬性，以對象形式傳遞，必須寫。屬性名可以不用帶引號，如果是復合屬性則需要采用駝峰命名法 borderLeft。其余參數都可以省略。
- speed:三種預定速度之一的字符串（”slow“，”normal“，”fast“）或表示動畫時長的毫秒數值（如：1000）
- easing:(Optional)用來指定切換效果，默認是”swing“，可用參數”linear“
- fn：回調函數，在動畫完成時執行的函數，每個元素執行一次
舉個栗子：
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("div").animate({
width:500,
left:500,
top:300,
opacity:0.4
},500);
})
})
</script>
王者榮耀手風琴效果
布局分析：
首先一個大的盒子包裹（class = "king"）,里面由ul包裹七個小li，每個小li里面由一個a標簽包裹兩個img標簽，分別存放一個大圖和一個小圖，小圖片用定位方式定位到大圖片左上角，所有小圖片浮動起來。正常情況下能看到小圖片，看不到大圖片，點擊小圖片會展開大圖片，當前默認的能看到大圖片，看不到小圖片
案例分析：
- 鼠標經過某個小li 有兩步操作：
- 當前小li寬度變為224px，同時里面的小圖片淡出，大圖片淡入
- 其余兄弟小li 寬度變為69px，小圖片淡入，大圖片淡出
代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手風琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(../img/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="../lib/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$(".king li").mouseover(function() {
//當前小li寬度變為224px，同時里面的小圖片淡出，大圖片淡入
$(this).animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 其余兄弟小li 寬度變為69px，小圖片**淡入**，大圖片**淡出**
$(this).siblings("li").animate({
width:69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="../img/m1.jpg" alt="" class="small">
<img src="../img/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/l1.jpg" alt="" class="small">
<img src="../img/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/c1.jpg" alt="" class="small">
<img src="../img/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/w1.jpg" alt="" class="small">
<img src="../img/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/z1.jpg" alt="" class="small">
<img src="../img/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/h1.jpg" alt="" class="small">
<img src="../img/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="../img/t1.jpg" alt="" class="small">
<img src="../img/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
jQuery 屬性操作
設置或獲取元素固有屬性值
獲取元素本身自帶的屬性，比如<a> 元素里面的href ，比如<input> 元素里面的type。
方法：prop("屬性名")
舉個栗子：
<script type="text/javascript">
$(function(){
// element.prop("屬性名") 獲取屬性值
console.log($("a").prop("href"));
// 設置a標簽中title屬性為自定義
$("a").prop("title","所發放的方法");
// 當復選框狀態改變時，獲取當前狀態
$("input").change(function(){
console.log($(this).prop("checked"));
})
})
</script>
設置或獲取元素自定義屬性值
方法：attr()
舉個栗子：
// 獲取自定義屬性
console.log($("div").attr("index"));
// h5自定義屬性
console.log($("div").attr("data-index"));
// 修改自定義屬性：
$("div").attr("index","sdd");
數據緩存 data()
data()方法可以在指定的元素上存取數據，並不會修改DOM元素結構。一旦頁面刷星，之前存放的數據都將被移除。
-
附加數據語法：
data("name","value") //向被選元素附加數據 -
獲取數據語法
data("name") //向被選元素獲取數據 -
讀取HTML5自定義屬性 data-index ，得到的是數字型
-
這個方法獲取data-index h5自定義屬性 不用寫data- 而且返回的是數字型（不包括字符）
// 數據緩存 data() 里面的數據是存放在元素的內存里面 $("span").data("uname","shabi"); console.log($("span").data("uname")); console.log($("div").data("index"));
-
購物車模塊-全選
案例分析：
- 全選思路：里面3個小的復選框按鈕（j-checkbox）選中狀態（checked）跟着全選按鈕（checkall）走。
- 因為checked 是復選框的固有屬性，此時我們需要利用prop()方法獲取和設置該屬性。
- 把全選按鈕狀態賦值給3小復選框就可以了。
- 當我們每次點擊小的復選框按鈕，就來判斷：
- 如果小復選框被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
- checked 選擇器 :checked 查找被選中的表單元素。
$(function(){
// 1.全選 /全部選功能模塊
// 就是把全選按鈕(checkall) 的狀態賦值給 三個小按鈕(j-checkbox)就可以了
// 事件可以使用change
$(".checkall").change(function(){
console.log();
var index = $(this).prop("checked");
// 下面那個全選按鈕也要綁定，
$(".j-checkbox, .checkall").prop("checked",index);
})
// 2. 通過小復選框控制全選按鈕 如果小復選框選中的個數等於3，就把上下兩個全選按鈕選上，否則全選按鈕不選
$(".j-checkbox").change(function(){
// if(被選中的小的復選框個數與所有小復選框個數相同){
// 全選按鈕選中
// }else{
// 不選中全選按鈕
// }
// 通過checked 選擇器 :checked 查找被選中的表單元素
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length：所有小復選框個數
if($(".j-checkbox:checked").length===$(".j-checkbox").length){
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
})
})
jQuery 內容文本值
主要針對元素的內容還有表單的值的操作
普通元素內容html()
該方法相當於原生 innerHTML
html() //獲取元素的內容，能夠獲得元素內的其他元素及內容
舉個栗子：
<div>
<span>sdfa</span>
</div>
<input type="text" name="" id="" value="請輸入內容" />
<script type="text/javascript">
// 獲取設置元素內容
console.log($("div").html());
$("div").html("123");
console.log($("div").html());
</script>
/*
<span>sdfa</span>
123
*/
普通元素文本內容text()
相當於原生 innerText
text() //獲取元素內容（忽略其他子元素）
test("文本內容") //修改元素文本內容
舉個栗子：
//修改文本內容（忽略標簽）
$("div").html("456");
//獲取文本內容（忽略標簽）
console.log($("div").text());//456
獲取/修改表單中的值
//修改表單中的值
$("input").val("789");
//獲取表單中的值
console.log($("input").val());//789
購物車模塊-增減商品數量
案例分析：
- 核心思路:首先聲明一個變量，當我們點擊+號(increment)，就讓這個值++，然后賦值給文本框。
- 注意1：只能增加本商品的數量，就是當前+號的兄弟文本框(itxt)的值
- 修改表單的值是val()方法
- 注意2：這個變量初始值應該是這個文本框的值，在這個值的基礎上++。因此要獲取表單的值。
- 減號（decrement）思路同理，但是如果文本框的值是1，就不能再減了。
// 3. 增減商品數量模塊
/* 首先聲明一個變量，當我們點擊+號時（increment）,就讓這個值++，然后賦值給文本框 */
$(".increment").click(function(){
// 得到當前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
})
// 減號 - 同上 把increment改為decrement，把n++改為n--，但要注意 n最小為1
$(".decrement").click(function(){
// 得到當前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
// if(n!=1){
// n--;
// }
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
})
// 3. 增減商品數量模塊
購物車模塊-修改商品小計
案例分析：
- 核心思路：每次點擊+號或者-號，根據文本框的值 乘以 當前商品的價格 就是 商品的小計
- 注意1： 只能增加本商品的小計， 就是當前商品的小計模塊（p-sum）
- 修改普通元素的內容是text() 方法
- 注意2： 當前商品的價格，要把￥符號去掉再相乘 截取字符串 substr(1)
- parents(‘選擇器’) 可以返回指定祖先元素
- 最后計算的結果如果想要保留2位小數 通過 toFixed(2) 方法
- 用戶也可以直接修改表單里面的值，同樣要計算小計。 用表單change事件
- 用最新的表單內的值 乘以 單價即可 但是還是當前商品小計
// 2. 增減商品數量模塊 3.計算小計模塊
/* 首先聲明一個變量，當我們點擊+號時（increment）,就讓這個值++，然后賦值給文本框 */
$(".increment").click(function() {
// 得到當前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
// 計算小計模塊 根據文本框的值 乘以 當前商品的價格，就是商品總價（小計）
// var p = $(this).parent(".quantity-form").parent(".p-num").siblings(".p-price").html();
// 使用parents(),獲得當前元素所有父輩，參數可以填指定父輩元素
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = (p.substr(1) * n).toFixed(2);
// console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
// 減號 - 同上 把increment改為decrement，把n++改為n--，但要注意 n最小為1
$(".decrement").click(function() {
// 得到當前兄弟文本框的值val
// console.log($(".itxt").val());
var n = $(this).siblings(".itxt").val();
// console.log(n);
// if(n!=1){
// n--;
// }
if (n == 1) {
return false;
}
n--;
$(this).siblings(".itxt").val(n);
// 計算小計模塊 根據文本框的值 乘以 當前商品的價格，就是商品總價（小計）
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = (p.substr(1) * n).toFixed(2);
// console.log(p);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
// 2. 增減商品數量模塊 3.計算小計模塊
//頁面初始化調用計算總件數和總額函數
getSum();
//4、用戶修改文本框的值 計算 小計模塊 change事件
$(".itxt").change(function() {
// console.log($(this).val());
var n = $(this).val();
// 注意 當n小於1時，默認改為1
if (n < 1) {
n = 1;
};
$(this).val(n);
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = (p.substr(1) * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + p);
getSum();
})
//4、用戶修改文本框的值 計算 小計模塊
jQuery 元素操作
主要是遍歷、創建、添加、刪除元素操作
遍歷元素
jQuery 隱式迭代是對同一類元素做了同樣的操作，如果想要給同一類元素做不同的操作，就需要用到遍歷。
語法1、
$("div").each(function(index,domEle){
xxx;
})
- each()方法遍歷匹配的每一個元素。主要用DOM處理。each每一個。
- 里面的回調函數有兩個參數：index是每個元素的索引號，domEle是每個DOM元素對象，不是jQuery對象
- 所以想要使用jQuery方法，需要給這個dom元素轉換為jQuery對象$(domEle)
舉個栗子：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script type="text/javascript">
$(function(){
var sum = 0;
var colors = ["red","blue","yellow"]
$("div").css("color","red");
// 如果針對於同一類元素做不同操作，需要用到遍歷元素(類似for，但是比for強大)
// 1. each()方法遍歷元素
$("div").each(function(index,domEle){
// 回調函數第一個參數是索引號，可以自己指定索引號名稱 i，index k都行
// 回調函數第二個參數是 dom元素對象，也是自己命名
// console.log(domEle);
$(domEle).css("color",colors[index]);
sum+=Number($(this).html());
})
console.log(sum);
})
</script>
</body>
方法二、
$.each($("div"),function(i,ele){
xxx;
})
- $.each()方法可用於遍歷任何對象。主要用於數據處理，比如數組，對象
- 里面有兩個參數，都可以自定義名稱，index是每個元素的索引號，ele是遍歷內容
購物車模塊-計算總計和總額
案例分析：
- 核心思路：把所有文本框里免的值相加就是總計數量，總額同理
- 文本框里面的值不同，如果想要相加需要用到each遍歷。申明一個變量，相加即可
- 點擊+號 -號，會改變總計和總額，如果用戶修改了文本框里面的值，同樣會改變總計和總額
- 因此可以分裝一個函數求總計和總額的，以上兩個操作調用這個函數即可
- 注意1：總計是文本框里的值，相加用val() 總額是普通元素的內容，用text()
- 注意2：普通元素里面的內容要去掉￥並且轉換為數字型才能相加
// 計算總件數和總額
function getSum() {
var count = 0; //激素那總件數
var money = 0; //計算總價錢
console.log(1);
$(".itxt").each(function(i, ele) {
count += parseInt($(ele).val());
});
$(".p-sum").each(function(i, ele) {
var temp = $(ele).text().substr(1);
// console.log(temp);
// count += parseInt($(ele).val());
money += parseFloat($(ele).text().substr(1));
});
$(".amount-sum em").text(count);
$(".price-sum em").text("￥" + money.toFixed(2));
}
// 計算總件數和總額
創建元素
//動態創建li標簽
$("<li></li>");
//可以搭配append()和prepend()
在元素內部添加
element.append("內容")
把內容放入匹配元素內部最后面，類似原生appendChild
element.prepend("內容")
把內容放到匹配元素內部最前面
舉個栗子：
<body>
<ul>
<li>li.before</li>
</ul>
<div class="test">div.before</div>
<script type="text/javascript">
// 1.創建元素
var li = $("<li>li.after</li>");
// 2.添加元素
// 內部添加
// $("ul").append(li);//內部添加並且放到內容的最后面
$("ul").prepend(li);//內部添加並且放到內容的最前面
</script>
</body>
在元素外部添加
element.after("內容")
//把內容放入目標元素后面
element.before("內容")
//把內容放到目標元素前面
舉個栗子：
<div class="test">div</div>
<script type="text/javascript">
// 3.元素外部添加元素
var div1 = $(".test").before("<div>div.before</div>")
var div2 = $(".test").after("<div>div.after</div>")
</script>
注意：
- 在元素內部添加元素，生成之后，他們是父子關系
- 在元素外部添加元素，生成之后，他們是兄弟關系
刪除元素
element.remove() //刪除匹配的元素本身
element.empty() //刪除匹配的元素集合中所有子節點、內容
element.html("") //清空匹配的元素集合中所有子節點、內容，本質是修改內容為空
購物車模塊-刪除商品模塊
案例分析：
- 核心思路：把商品remove()刪除元素即可
- 有三個地方需要刪除，1.商品后面的刪除按鈕 2.刪除選中的商品 3.清空購物車
- 商品后面的刪除按鈕：一定是刪除當前的商品，所以從$(this)出發
- 刪除選中的商品： 先判斷小的復選框按鈕是否選中狀態，如果是選中，則刪除對應的商品
- 清理購物車： 則是把所有的商品全部刪掉
- 注意，每次刪除商品都要重新計算商品件數和總額(調用getSum();函數)
// 刪除商品模塊
$(".p-action").click(function() {
$(this).parents(".cart-item").remove();
// 每次刪除商品都要重新計算總件數和總額
getSum();
})
$(".remove-batch").click(function(){
// 刪除的是小的復選框選中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
// 每次刪除商品都要重新計算總件數和總額
getSum();
})
$(".clear-all").click(function(){
$(".cart-item").remove();
// 每次刪除商品都要重新計算總件數和總額
getSum();
})
// 刪除商品模塊
購物車模塊-選中商品添加背景
案例分析：
- 核心思路：選中的商品添加背景，未選中移除背景
- 全選按鈕點擊：如果全選是選中的，則所有的商品添加背景，否則移除背景
- 小的復選框點擊：如果是選中狀態，則當前商品添加背景
- 這個背景可以通過類名修改，添加類和刪除類
$(".checkall").change(function() {
console.log();
var index = $(this).prop("checked");
// 下面那個全選按鈕也要綁定，
$(".j-checkbox, .checkall").prop("checked", index);
// 全選按鈕選中則給商品添加背景色
if($(this).prop("checked")){
// 讓所有商品添加類 check-cart-item 類名
$(".cart-item").addClass("check-cart-item");
}else{
// 否則移除類
$(".cart-item").removeClass("check-cart-item");
}
})
// 1.2. 通過小復選框控制全選按鈕 如果小復選框選中的個數等於3，就把上下兩個全選按鈕選上，否則全選按鈕不選
$(".j-checkbox").change(function() {
// if(被選中的小的復選框個數與所有小復選框個數相同){
// 全選按鈕選中
// }else{
// 不選中全選按鈕
// }
// 通過checked 選擇器 :checked 查找被選中的表單元素
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length：所有小復選框個數
if($(this).prop("checked")){
// 讓當前商品添加類 check-cart-item 類名
$(this).parents(".cart-item").addClass("check-cart-item");
}else{
// 否則移除類
$(this).parents(".cart-item").removeClass("check-cart-item");
}
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
})
jQuery 尺寸、位置操作
jQuery 尺寸
| 語法 | 用法 |
|---|---|
| width() / height() | 取得匹配元素寬度和高度 只算 |
| innerWidth() / innerHeight() | 取得匹配元素寬度和高度值 包含padding |
| outerWidth() / outerHeight() | 取得匹配元素寬度和高度值 包含 padding 、border |
| outerWidth(true) / outerHeight(true) | 取得匹配元素寬度和高度值 包含 padding、border、margin |
注意：
- 以上參數為空，則獲取相應數值，返回的是數字型
- 如果參數為數字，則修改相應值
- 參數可以不寫單位。
舉個栗子
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid #00FFFF;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$(function(){
// 1、width() / height() 獲取設置元素大小
console.log($("div").width());//200
console.log($("div").innerWidth());//220 = 200 + padding*2
console.log($("div").outerWidth());//250 = 200 + padding*2 + border*2
console.log($("div").outerWidth(true)); //290 = 200 + padding*2 + border*2 + margin*2
})
</script>
</body>
</html>
注意：有了這套 API 我們將可以快速獲取盒子的寬高，至於其他屬性想要獲取和設置，還要使用 css() 等方法配合。
jQuery 位置操作
jQuery的位置操作主要有三個： offset()、position()、scrollTop()/scrollLeft() , 具體介紹如下:
語法：
offset() //設置或獲取元素偏移
- offset()方法設置或返回被選元素相對於文檔的便宜坐標，跟父級沒有關系
- 該方法有兩個屬性 left、top。
offset().top:用於獲取元素到文檔頂部的距離；offset().left:用於獲取元素到文檔左側的距離 - 可以設置元素的偏移：offset({top:10,left:30}); 設置當前選定的元素的偏移，於父盒子無關（即使有定位關系）
舉個栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid #00FFFF;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$(function(){
// 1、width() / height() 獲取設置元素大小
console.log($("div").width());//200
console.log($("div").innerWidth());//220 = 200 + padding*2
console.log($("div").outerWidth());//250 = 200 + padding*2 + border*2
console.log($("div").outerWidth(true)); //290 = 200 + padding*2 + border*2 + margin*2
})
</script>
</body>
</html>
position()獲取元素偏移
- position()方法用於返回被選元素相對於帶有定位的父級偏移坐標，如果父級都沒有定位，則以文檔為准。
- 該方法有兩個屬性：left和top，用法和offset類似
- 該方法只能獲取，不能設置
舉個栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin:0;
padding: 0;
}
.father {
position: relative;
left: 100px;
top: 100px;
width: 300px;
height: 300px;
background-color: pink;
}
.son {
position: absolute;
width: 100px;
height: 100px;
background-color: #00FFFF;
}
</style>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script type="text/javascript">
$(function() {
console.log($(".son").offset());//object()
console.log($(".son").offset().top);//100
$(".son").offset({
top:100,
left:150
})
console.log($(".son").offset());
// 獲取距離帶有定位父級位置(偏移)position 如果沒有帶定位的父級，則以文檔穩准
console.log($(".son").position());
})
</script>
</body>
</html>
scrollTop()/scrollLeft() 設置或獲取元素被卷去的頭部和左側
- scrollTop() 方法設置或返回被選元素被卷去的頭部（頁面滾動溢出部分）。
- 不跟參數是獲取，參數為不帶單位的數字則是設置被卷去的頭部。
舉個栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="back">返回頂部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);
// 被卷去的頭部 scrollTop() / 被卷去的左側 scrollLeft()
// 頁面滾動事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回頂部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文檔而是 html和body元素做動畫
})
})
</script>
</body>
</html>
jQuery 事件
on 事件注冊
單個事件注冊：
element.事件(function(){
xxx
})
$("div").click(fuction(){
事件處理程序
})
其他事件和原生基本一致
比如 mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
事件處理 on() 優勢1
on() 方法在匹配元素上綁定一個或多個事件的事件處理函數
語法：
element.on(events[selector],[fn])
- events：一個或多個用空格隔開的事件類型，如：click keydown
- selector：元素的子元素選擇器
- fn：回調函數，即綁定在元素身上的偵聽函數
舉個栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: #0099CC;
}
.current{
background:#87CEEB;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
$(function(){
// 給div綁定多個事件
// $("div").on({
// mouseenter:function(){
// $(this).css("background","skyblue");
// },
// click:function(){
// $(this).css("background","pink");
// },
// mouseleave:function(){
// $(this).css("background","#aaa");
// }
// });
// 如果多個事件是相同的，可以采取下面方式
$("div").on("mouseenter mouseleave",function(){
$(this).toggleClass("current");
}
})
</script>
</body>
</html>
on()方法優勢2：
可以事件委派操作。事件委派的定義就是，把原來嫁給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素
$('ul').on('click','li',function(){
alert('hello world!');
})
//click 綁定在ul身上，但是觸發的對象是ul里面的小li
在此之前，有bind() ,live() ，delegate() 等方法來處理事件綁定或者事件委派，目前最新版用 on 來代替他們
on()方法優勢3：
動態創建的元素，click()沒有辦法綁定事件，on()可以給動態生成的元素綁定事件
$("div").on("click","p",function(){
alert("可以給動態生成元素綁定事件")
})
$("div").append($("<p>動態創建p標簽</p>"));
舉個栗子：
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以綁定1個或者多個事件處理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以實現事件委托（委派）
// click 是綁定在ul 身上的，但是 觸發的對象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以給未來動態創建的元素綁定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后來創建的</li>");
$("ol").append(li);
})
</script>
</body>
off 解綁事件
當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。jQuery 為我們提供 了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發一次的事件綁定方法 one()，在這里我們重點講解一下 off() ;
語法：
off() 方法 可以移除通過 on() 方法 添加的事件處理程序
$("p").off() //解綁p元素所有事件處理程序
$("p").off("click") //解綁p元素上面的點擊事件 后面的 foo 是偵聽函數名
$("ul").off("click","li") //解綁事件委托
如果有的事件只想觸發一次，用one() 來綁定事件
舉個栗子：
<body>
<div></div>
<ul>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
<li>我們都是好孩子</li>
</ul>
<p>我是一個P標簽</p>
<script>
$(function() {
// 事件綁定
$("div").on({
click: function() {
console.log("我點擊了");
},
mouseover: function() {
console.log('我鼠標經過了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解綁 off
// $("div").off(); // 這個是解除了div身上的所有事件
$("div").off("click"); // 這個是解除了div身上的點擊事件
$("ul").off("click", "li");
// 2. one() 但是它只能觸發事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>
trigger() 自動觸發事件
有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致。可以利用定時器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發。由此 jQuery 為我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;
trigger()
element.click() //第一種簡寫形式
element.trigger("type") //第二種自動觸發模式
triggerHandler()
element.triggerHandler(type) //第三種自動觸發模式
注意：
triggerHandler模式不會觸發元素的默認性為（比如input標簽沒有光標在閃爍），這是和前面兩種的區別
舉個栗子：
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 綁定事件
$("div").on("click", function() {
alert(11);
});
// 自動觸發事件
// 1. 元素.事件()
// $("div").click();會觸發元素的默認行為
// 2. 元素.trigger("事件")
// $("div").trigger("click");會觸發元素的默認行為
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行為
$("input").on("focus", function() {
$(this).val("你好嗎");
});
// 一個會獲取焦點，一個不會
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>
jQuery 多庫共存
實際開發中，很多項目連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱為，jQuery 多庫共存。
jQuery解決方案
- 把里面的 $ 符號統一改為jQuery。比如 jQuery("div");
- jQuery 變量規定新的名稱，$.noConflict() var xx = $.noConfict();
舉個栗子：
<div></div>
<span></span>
<script type="text/javascript">
$(function(){
// 假設之前版本的方法和現在版本的 $ 方法名沖突，
function $(ele){
return document.querySelector(ele);
}
console.log($("div"));
//$.each();//老版本的$方法里沒有這個方法（上面沒有定義該方法），調用報錯
// 解決方法一：使用jQuery 代替 $
jQuery.each();
// 解決方法二：讓jQuery 釋放對 $ 控制權，讓用戶自己決定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
suibian.each();
}
圖片懶加載
圖片的懶加載就是：當頁面滑動到有圖片的位置，圖片才進行加載，用以提升頁面打開的速度及用戶體驗，幫助減輕服務器負載
注意：
-
該插件必須寫在所有圖片的下面（現有圖片才能懶加載）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> img { display: block; margin: 0 auto; margin-top: 100px; } </style> </head> <body> <img data-lazy-src="./pictures/冬裙.jpg"/> <img data-lazy-src="/pictures/呢大衣.jpg" /> <img data-lazy-src="./pictures/圍巾.jpg"/> <img data-lazy-src="./pictures/女褲.jpg"/> <img data-lazy-src="./pictures/毛衣.jpg"/> <img data-lazy-src="./pictures/牛仔褲.jpg"/> <img data-lazy-src="./pictures/男毛衣.jpg"/> <img data-lazy-src="./pictures/皮帶.jpg"/> <img data-lazy-src="./pictures/皮衣.jpg"/> <img data-lazy-src="./pictures/羽絨服.jpg"/> <script src="./lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script src="./lib/EasyLazyload.min.js" type="text/javascript" charset="utf-8"></script> <script> lazyLoadInit({ coverColor: "white", coverDiv: "<h1>test</h1>", offsetBottom: 0, offsetTopm: 0, showTime: 1100, onLoadBackEnd: function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } }); </script> </body> </html>
jQuery Ajax
Ajax 的全稱是 Asynchronous Javascrip And XML（翻：異步 JavaScrip 和XML）
通俗的理解：在網頁中利用XMLHttpRequest 對象和服務器進行數據交互的方式，就是Ajax
Ajax作用：讓我們輕松實現網頁與服務器之間的數據交互
Ajax 典型應用場景
- 用戶名檢測：注冊用戶時，通過Ajax 的形式，動態 檢測用戶名是否被占用
- 搜索提示：當輸入搜索關鍵字時，通過Ajax的形式，動態 加載搜索提示列表
- 數據分頁顯示：當點擊頁碼值的時候，根據頁碼動態刷新表格的數據
- 數據的增刪改查：數據的增刪改查操作都要通過ajax實現數據交互
jQuery中的Ajax
瀏覽器中提供的XMLHttpRequest 用法比較復雜，jQuery 對 XMLHttpRequest 進行了封裝，提供了一系列Ajax相關函數，極大地降低了Ajax的使用難度
jQuery中發起Ajax請求最常用的三個方法如下：
- $.get()
- $.post()
- $.ajax()
$.get()函數語法
jQuery中$.get()函數的功能單一，專門用來發起get請求，從而將服務器上的資源請求到客戶端使用
語法：
$.get(url,[data],[callback]) //后兩個參數可選
參數含義如下：
| 參數名 | 參數類型 | 是否必選 | 說明 |
|---|---|---|---|
| url | string | 是 | 要請求的資源地址 |
| data | object | 否 | 請求資源期間要攜帶的參數(會發送到服務器) |
| callback | function | 否 | 請求成功時的回調函數 |
$.get()發起不帶參數的請求
使用$.get()函數發起不帶參數的請求時，直接提供請求的URL地址和請求成功之后的回調函數即可，示例如下：
$.get('http://www.baidu.com',function(res)){
console.log(res) //這里res是服務器返回的數據
}
通過XHR過濾所有ajax請求
舉個栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnGET">發起不帶參數的GET請求</button>
</body>
<script type="text/javascript">
$(function(){
$('#btnGET').on('click',function(){
$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
console.log(res);
})
})
})
</script>
</html>
$.get()發起帶參數的請求
$.get('http://www.baidu.com',{id:1},function(res)){
console.log(res) //這里res是服務器返回的數據
}
$.post()函數語法
jQuery 中$.post() 函數的功能單一，專門用來發起post請求，從而向服務器提交數據
$.post(url,[data],[callback])
其中，三個參數代表含義如下：
| 參數名 | 參數類型 | 是否必選 | 說明 |
|---|---|---|---|
| url | string | 是 | 提交數據的地址 |
| data | object | 否 | 要提交的資源 |
| callback | function | 否 | 數據提交成功時的回調函數 |
$.post()向服務器提交數據
使用$post向服務器提交數據示例：
$.post('http://www.liulongbin.top:3006/api/addbook',//請求的URL地址
{
bookname:'水滸傳',author:'施耐庵',publisher:'上海圖書出版社'
},//提交數據
function(res){//回調函數
console.log(res)
}
)
舉個栗子：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">向服務器提交數據</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click',function(){
$.post('http://www.liulongbin.top:3006/api/addbook', //請求的URL地址
{
bookname: '水滸傳q',
author: '施耐庵q',
publisher: '北京圖書出版社'
}, //提交數據
function(res) { //回調函數
console.log(res)
}
)
})
})
</script>
</body>
</html>
$.ajax()函數的語法
相比於$.get() 和 $.post() 函數，jQuery 中提供的$.ajax()函數，是一個功能比較綜合的函數，它允許我們對Ajax請求經行更詳細的配置
語法如下：
$.ajax({
type:'', //請求方式：get/post 等
url:'',//請求的URL地址
data:{},//這次請求要攜帶的數據
success:function(res){//請求成功后的回調函數
}
})
$.ajax()函數發起GET請求
使用$.ajax()發起GET請求時，只需要將type屬性的值設置為’GET‘ 即可：
$.ajax({
type:'GET', //請求方式：get/post 等
url:'http://www.liulongbin.top:3006/api/getbooks',//請求的URL地址
data:{id:1},//這次請求要攜帶的數據
success:function(res){//請求成功后的回調函數
console.log(res)
}
})
舉個栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">使用ajax發起GET請求</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click', function() {
$.ajax({
type: 'GET', //請求方式：get/post 等
url: 'http://www.liulongbin.top:3006/api/getbooks', //請求的URL地址
data: {
//id: 1
}, //這次請求要攜帶的數據
success: function(res) { //請求成功后的回調函數
console.log(res)
}
})
})
})
</script>
</body>
</html>
$.ajax()函數發起POST請求
語法同上，舉個栗子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../lib/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button id="btnPOST">使用ajax發起POST請求</button>
<script type="text/javascript">
$(function() {
$('#btnPOST').on('click', function() {
$.ajax({
type: 'POST', //請求方式：get/post 等
url: 'http://www.liulongbin.top:3006/api/addbook', //請求的URL地址
data: {
bookname:'水許傳',
author:'施耐安',
publisher:'安徽大學出版社'
}, //這次請求要攜帶的數據
success: function(res) { //請求成功后的回調函數
console.log(res)
}
})
})
})
</script>
</body>
</html>