jQery基礎
- 概述
-
- 優點
- jQuery 的入口函數
- jQuery 的頂級對象$
- jQuery 對象和 DOM 對象
- jQuery 基礎選擇器
- jQuery 層級選擇器
- jQuery 設定樣式
- 隐式疊代
- jQuery 篩選選擇器
- 排他思想
- 案例：淘寶服飾精品案例
- 操作 css 方法
- 設定類樣式方法
- 案例：tab 欄切換
- 類操作與className差別
- jQuery 效果
-
- 顯示文法規範
- 隐藏文法規範
- 切換文法規範
- 下滑效果文法規範
- 上滑效果文法規範
- 滑動切換效果文法規範
- 事件切換
- 動畫隊列及其停止排隊方法
-
- 淡入效果文法規範
-
- 淡入效果參數
- 淡出效果文法規範
-
- 淡出效果參數
- 淡入淡出切換效果文法規範
-
- 淡入淡出切換效果參數
- 漸進方式調整到指定的不透明度
-
- 效果參數
- 高亮顯示案例
- 自定義動畫 animate
-
- 1. 文法
- 參數
- 案例：王者榮耀手風琴效果
- 設定或擷取元素固有屬性值 prop()
- 設定或擷取元素自定義屬性值 attr()
- 資料緩存 data()
- 附加資料文法
- 案例：購物車案例子產品-全選
- jQuery 内容文本值
- 案例：購物車案例子產品-增減商品數量
- 案例：購物車案例子產品-修改商品小計
- 周遊元素
- ajax
概述
jQuery 是一個快速、簡潔的 JavaScript 庫，其設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼， 做更多的事情。
jQuery 封裝了 JavaScript 常用的功能代碼，優化了 DOM 操作、事件處理、動畫設計和 Ajax 互動。
學習jQuery本質： 就是學習調用這些函數（方法）
jQuery 出現的目的是加快前端人員的開發速度，我們可以非常友善的調用和使用它，進而提高開發效率。
優點
輕量級。核心檔案才幾十kb，不會影響頁面加載速度
跨浏覽器相容。基本相容了現在主流的浏覽器
鍊式程式設計、隐式疊代
對事件、樣式、動畫支援，大大簡化了DOM操作
支援插件擴充開發。有着豐富的第三方的插件，例如： 樹形菜單、日期控件、輪播圖等
免費、開源
jQuery 的入口函數
$(function () {
... // 此處是頁面 DOM 加載完成的入口
}) ;
--------------------------------------------------
$(document).ready(function(){
... // 此處是頁面DOM加載完成的入口
});
- 等着 DOM 結構渲染完畢即可執行内部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
- 相當于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 檔案、css檔案、圖檔加載完畢才執行内部代碼。
- 更推薦使用第一種方式。
jQuery 的頂級對象$
1.$ 是 jQuery 的别稱，在代碼中可以使用 jQuery 代替 $，
但一般為了友善，通常都直接使用 $ 。
2.$ 是jQuery 的頂級對象， 相當于原生JavaScript中的 window。
把元素利用$包裝成jQuery對象，就可以調用 jQuery 的方法。
jQuery 對象和 DOM 對象
注意：
隻有 jQuery 對象才能使用 jQuery 方法，DOM 對象則使用原生的 JavaScirpt 方法
DOM 對象與 jQuery 對象之間是可以互相轉換的。
因為原生js 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把 jQuery對象轉換為DOM對象才能使用
- DOM 對象轉換為 jQuery 對象： $(DOM對象)
- jQuery 對象轉換為 DOM 對象（兩種方式）
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
<script>
var div = document.querySelector('div');
div.style.display='none';
$(div).hide();
$('div')[0].style.display='none';
$('div').get(0).style.display='none';
</script>
總結：實際開發比較常用的是把DOM對象轉換為jQuery對象，這樣能夠調用功能更加強大的jQuery中的方法。
jQuery 基礎選擇器
原生 JS 擷取元素方式很多，很雜，而且相容性情況不一緻，是以 jQuery 給我們做了封裝，使擷取元素統一标準。
jQuery 層級選擇器
jQuery 設定樣式
隐式疊代
周遊内部 DOM 元素（僞數組形式存儲）的過程就叫做隐式疊代。
簡單了解：給比對到的所有元素進行循環周遊，執行相應的方法，而不用我們再進行循環，簡化我們的操作， 友善我們調用
jQuery 篩選選擇器
排他思想
想要多選一的效果，排他思想：目前元素設定樣式，其餘的兄弟元素清除樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>排他思想</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<script>
$(function () {
// 1. 隐式疊代 給所有的按鈕都綁定了點選事件
$("button").click(function () {
// 2. 目前的元素變化背景顔色
$(this).css("background", "pink").siblings().css("background", ""); //鍊式程式設計
// 3. 其餘的兄弟去掉背景顔色 隐式疊代
// $(this).siblings().css('background','');
});
});
</script>
</body>
</html>
案例：淘寶服飾精品案例
① 核心原理：滑鼠經過左側盒子某個小li，就讓内容區盒子相對應圖檔顯示，其餘的圖檔隐藏。
② 需要得到目前小li 的索引号，就可以顯示對應索引号的圖檔
③ jQuery 得到目前元素索引号 $(this).index()
④ 中間對應的圖檔，可以通過 eq(index) 方法去選擇
⑤ 顯示元素 show() 隐藏元素 hide()
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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(images/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(images/abg.gif);
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(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();
// 鍊式程式設計
$("#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="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/女褲.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/羽絨服.jpg" width="200" height="250" /></a>
</div>
<div>
<a href="#"><img src="images/牛仔褲.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
操作 css 方法
jQuery 可以使用 css 方法來修改簡單元素樣式； 也可以操作類，修改多個樣式。
- 參數隻寫屬性名，則是傳回屬性值
- 參數是屬性名，屬性值，逗号分隔，是設定一組樣式，屬性名必須加引号，值如果是數字可以不用跟機關和引号
$(this).css(''color'', ''red'');
$(this).css(''height'', ''100px'');
也可以是
$(this).css(''height'', 100);
- 參數可以是對象形式，友善設定多組樣式。屬性名和屬性值用冒号隔開， 屬性可以不用加引号，
$(this).css({ "color":"white","font-size":"20px"});
也可以是
$(this).css({
color:"white",
font-size:20
});
設定類樣式方法
作用等同于以前的 classList，可以操作類樣式， 注意操作類裡面的參數不要加點。
- 添加類
- 移除類
- 切換類
案例：tab 欄切換
① 點選上部的li，目前li 添加current類，其餘兄弟移除類。
② 點選的同時，得到目前li 的索引号
③ 讓下部裡面相應索引号的item顯示，其餘的item隐藏
<!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>
* {
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>
<script src="js/jquery.min.js"></script>
</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>
$(function () {
$(".tab_list ul li").click(function () {
// 1.點選上部的li，目前li 添加current類，其餘兄弟移除類
// 鍊式程式設計操作
$(this).addClass("current").siblings().removeClass("current");
// 2.點選的同時，得到目前li 的索引号
var index = $(this).index();
console.log(index);
// 3.讓下部裡面相應索引号的item顯示，其餘的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
------------------------------------------------------------
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
$(".item")
.eq(index)
.css("display", "block")
.siblings()
.css("display", "none");
});
});
</script>
</body>
</html>
類操作與className差別
原生 JS 中 className 會覆寫元素原先裡面的類名。
jQuery 裡面類操作隻是對指定類進行操作，不影響原先的類名。
這個addClass相當于追加類名 不影響以前的類名
jQuery 效果
顯示文法規範
顯示參數
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次
隐藏文法規範
** 隐藏參數**
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次
切換文法規範
切換參數
（1）參數都可以省略， 無動畫直接顯示。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
建議：平時一般不帶參數，直接顯示隐藏即可。
下滑效果文法規範
下滑效果參數
（1）參數都可以省略。
（2）speed:三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing:(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次
上滑效果文法規範
上滑效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
滑動切換效果文法規範
滑動切換效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
事件切換
（1）over:滑鼠移到元素上要觸發的函數（相當于mouseenter）
（2）out:滑鼠移出元素要觸發的函數（相當于mouseleave）
（3）如果隻寫一個函數，則滑鼠經過和離開都會觸發它
// 滑鼠經過
$(".nav>li").mouseover(function() {
$(this) jQuery 目前元素 this不要加引号
$(this).children("ul").slideDown(200);
});
// 滑鼠離開
$(".nav>li").mouseout(function() {
$(this).children("ul").slideUp(200);
});
可以簡寫成
// 1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
$(".nav>li").hover(function() {
$(this).children("ul").slideDown(200);
}, function() {
$(this).children("ul").slideUp(200);
});
在進一步簡寫成
// 2. 事件切換 hover 如果隻寫一個函數，那麼滑鼠經過和滑鼠離開都會觸發這個函數
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
動畫隊列及其停止排隊方法
- 動畫或效果隊列
- 動畫或者效果一旦觸發就會執行，如果多次觸發，就造成多個動畫或者效果排隊執行。
- 停止排隊
(1）stop() 方法用于停止動畫或效果。
(2) 注意： stop() 寫到動畫或者效果的前面， 相當于停止結束上一次的動畫。
淡入效果文法規範
淡入效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
淡出效果文法規範
淡出效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次
淡入淡出切換效果文法規範
淡入淡出切換效果參數
（1）參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
漸進方式調整到指定的不透明度
效果參數
（1）opacity 透明度必須寫，取值 0~1 之間。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。必須寫
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
高亮顯示案例
當滑鼠經過某個li時讓他的兄弟的亮度變低，這樣就顯得目前的亮度變亮，滑鼠離開時在恢複亮度
<!DOCTYPE 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="jquery.min.js"></script>
<script>
$(function() {
//滑鼠進入的時候,其他的li标簽透明度：0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 滑鼠離開，其他li 透明度改為 1
$(this).siblings().stop().fadeTo(400, 1);
})
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt="" /></a>
</li>
</ul>
</div>
</body>
</html>
自定義動畫 animate
1. 文法
參數
（1）params: 想要更改的樣式屬性，以對象形式傳遞，必須寫。 屬性名可以不用帶引号， 如果是複合屬性則需要采 取駝峰命名法 borderLeft。其餘參數都可以省略。
（2）speed：三種預定速度之一的字元串(“slow”,“normal”, or “fast”)或表示動畫時長的毫秒數值(如：1000)。
（3）easing：(Optional) 用來指定切換效果，預設是“swing”，可用參數“linear”。
（4）fn: 回調函數，在動畫完成時執行的函數，每個元素執行一次。
<!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>
* {
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>
<script src="js/jquery.min.js"></script>
</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).children('ul').stop().slideDown();
// })
// $('.nav li').mouseout(function () {
// $(this).children('ul').stop().slideUp();
// })
//1. 事件切換 hover 就是滑鼠經過和離開的複合寫法
// $('.nav li').hover(function(){
// $(this).children('ul').stop().slideDown();
// },function(){
// $(this).children('ul').stop().slideUp();
// })
//2. 事件切換 hover 如果隻寫一個函數，那麼滑鼠經過和滑鼠離開都會觸發這個函數
$('.nav li').hover(function(){
$(this).children('ul').stop().slideToggle();
})
})
</script>
</body>
</html>
案例：王者榮耀手風琴效果
① 滑鼠經過某個小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(images/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>
<script src="js/jquery.min.js"></script>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 滑鼠經過某個小li 有兩步操作：
$(".king li").mouseenter(function() {
// 1.目前小li 寬度變為 224px， 同時裡面的小圖檔淡出，大圖檔淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其餘兄弟小li寬度變為69px， 小圖檔淡入， 大圖檔淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>
設定或擷取元素固有屬性值 prop()
所謂元素固有屬性就是元素本身自帶的屬性，比如 元素裡面的 href ，比如 元素裡面的 type。
- 擷取屬性文法
- 設定屬性文法
設定或擷取元素自定義屬性值 attr()
使用者自己給元素添加的屬性，我們稱為自定義屬性。 比如給 div 添加 index =“1”。
- 擷取屬性文法
- 設定屬性文法
資料緩存 data()
data() 方法可以在指定的元素上存取資料，并不會修改 DOM 元素結構。一旦頁面重新整理，之前存放的資料都将被移除。
附加資料文法
- 擷取資料文法
同時，還可以讀取 HTML5 自定義屬性 data-index ，得到的是數字型
注意如果是h5的自定義屬性來取attr和data有差別，例如 data-index
attr("data-index")
data("index")
用data取不需要前面的data-
案例：購物車案例子產品-全選
① 全選思路：裡面3個小的複選框按鈕（j-checkbox）選中狀态（checked）跟着全選按鈕（checkall）走。
② 因為checked 是複選框的固有屬性，此時我們需要利用prop()方法擷取和設定該屬性。
③ 把全選按鈕狀态指派給3小複選框就可以了。
④ 當我們每次點選小的複選框按鈕，就來判斷：
⑤ 如果小複選框被選中的個數等于3 就應該把全選按鈕選上，否則全選按鈕不選。
⑥ :checked 選擇器 :checked 查找被選中的表單元素。
//如果全選按鈕選中，則每一個按鈕都被選中
$('.checkall').change(function () {
$('.j-checkbox,.checkall').prop('checked',$(this).prop('checked'));
})
$('.j-checkbox').click(function(){
// 如果按鈕選中的個數等于所有按鈕的個數
if($('.j-checkbox:checked').length==$('.j-checkbox').length){
$('.checkall').prop('checked',true);
}
else{
$('.checkall').prop('checked',false);
}
})
jQuery 内容文本值
主要針對元素的内容還有表單的值操作。
- 普通元素内容 html()（ 相當于原生inner HTML)
html() // 擷取元素的内容
html(''内容'') // 設定元素的内容
- 普通元素文本内容 text() (相當與原生 innerText)
text() // 擷取元素的文本内容
text(''文本内容'') // 設定元素的文本内容
- 表單的值 val()（ 相當于原生value)
val() // 擷取表單的值
val(''内容'') // 設定表單的值
案例：購物車案例子產品-增減商品數量
① 核心思路：首先聲明一個變量，當我們點選+号（increment），就讓這個值++，然後指派給文本框。
② 注意1： 隻能增加本商品的數量， 就是目前+号的兄弟文本框（itxt）的值。
③ 修改表單的值是val() 方法
④ 注意2： 這個變量初始值應該是這個文本框的值，在這個值的基礎上++。要擷取表單的值
⑤ 減号（decrement）思路同理，但是如果文本框的值是1，就不能再減了
$('.increment').click(function(){
//每次的初始值是目前頁面的值而不是0
var num=$(this).siblings('.itxt').val();
num++;
//更改表單的值
$(this).siblings('.itxt').val(num);
})
$('.decrement').click(function(){
var num=$(this).siblings('.itxt').val();
num--;
//減到0後就return結束
if(num==0){
return false;
}
$(this).siblings('.itxt').val(num);
})
案例：購物車案例子產品-修改商品小計
① 核心思路：每次點選+号或者-号，根據文本框的值 乘以 目前商品的價格 就是 商品的小計
② 注意1： 隻能增加本商品的小計， 就是目前商品的小計子產品（p-sum） ③ 修改普通元素的内容是text() 方法
④ 注意2： 目前商品的價格，要把￥符号去掉再相乘 截取字元串 substr(1) ⑤ parents(‘選擇器’) 可以傳回指定祖先元素
⑥ 最後計算的結果如果想要保留2位小數 通過 toFixed(2) 方法
⑦ 使用者也可以直接修改表單裡面的值，同樣要計算小計。 用表單change事件
⑧ 用最新的表單内的值 乘以 單價即可 但是還是目前商品小計
$('.increment').click(function(){
//每次的初始值是目前頁面的值而不是0
var num=$(this).siblings('.itxt').val();
num++;
//更改表單的值
$(this).siblings('.itxt').val(num);
var price=$(this).parents('.p-num').siblings('.p-price').html();
//去掉前面的￥符号
price=price.substr(1);
// 字元串和數值相乘隐式轉換
// toFixed(2)保留兩位小數
$(this).parents('.p-num').siblings('.p-sum').html("￥"+(price*num).toFixed(2));
})
$('.decrement').click(function(){
var num=$(this).siblings('.itxt').val();
num--;
//減到0後就return結束
if(num==0){
return false;
}
$(this).siblings('.itxt').val(num);
var price=$(this).parents('.p-num').siblings('.p-price').html();
//去掉前面的￥符号
price=price.substr(1);
// 字元串和數值相乘隐式轉換
// toFixed(2)保留兩位小數
$(this).parents('.p-num').siblings('.p-sum').html("￥"+(price*num).toFixed(2));
})
$('.itxt').change(function(){
var num=$('.itxt').val();
var price=$(this).parents('.p-num').siblings('.p-price').html();
//去掉前面的￥符号
price=price.substr(1);
// 字元串和數值相乘隐式轉換
// toFixed(2)保留兩位小數
$(this).parents('.p-num').siblings('.p-sum').html("￥"+(price*num).toFixed(2));
})
周遊元素
jQuery 隐式疊代是對同一類元素做了同樣的操作。 如果想要給同一類元素做不同操作，就需要用到周遊。
文法1：
$("div").each(function (index, domEle) { xxx; }）
- each() 方法周遊比對的每一個元素。主要用DOM處理。 each 每一個
- 裡面的回調函數有2個參數： index 是每個元素的索引号; demEle 是每個DOM元素對象，不是jquery對象
- 是以要想使用jquery方法，需要給這個dom元素轉換為jquery對象 $(domEle)
文法2：
$.each(object，function (index, element) { xxx; }）
- $.each()方法可用于周遊任何對象。主要用于資料處理，比如數組，對象
- 裡面的函數有2個參數： index 是每個元素的索引号; element 周遊内容
案例：購物車案例子產品-計算總計和總額
① 核心思路：把所有文本框裡面的值相加就是總計數量。總額同理
② 文本框裡面的值不相同，如果想要相加需要用到each周遊。聲明一個變量，相加即可
③ 點選+号-号，會改變總計和總額，如果使用者修改了文本框裡面的值同樣會改變總計和總額
④ 是以可以封裝一個函數求總計和總額的， 以上2個操作調用這個函數即可。
⑤ 注意1： 總計是文本框裡面的值相加用 val() 總額是普通元素的内容用text()
⑥ 要注意普通元素裡面的内容要去掉￥并且轉換為數字型才能相加
function getsum(){
var snum=0;
var smoney=0;
$('.itxt').each(function(i,ele){
//ele是一個dom對象需要轉化為jQuery對象
var ele=$(ele);
//如果選中才把數量加到總和裡面
if(ele.parents('.p-num').siblings('.p-checkbox').children('.j-checkbox').prop('checked')){
snum+=parseInt(ele.val());
}
})
console.log(snum);
$('.amount-sum em').text(snum);
console.log($('.p-sum').text());
$('.p-sum').each(function(i,ele){
var ele=$(ele);
//如果選中才把價錢加到總和裡面
if(ele.siblings('.p-checkbox').children('.j-checkbox').prop('checked')){
smoney+=parseFloat(ele.text().substr(1));
}
})
$('.price-sum em').text(smoney.toFixed(2));
}
建立元素
文法：
内部添加
把内容放入比對元素内部最後面，類似原生 appendChild
把内容放入比對元素内部最前面。
外部添加
element.after(''内容'') // 把内容放入目标元素後面
element.before(''内容'') // 把内容放入目标元素前面
① 内部添加元素，生成之後，它們是父子關系。
② 外部添加元素，生成之後，他們是兄弟關系。
删除元素
① remove 删除元素本身。
② empt() 和 html(’’’’) 作用等價，都可以删除元素裡面的内容，隻不過 html 還可以設定内容。
案例：購物車案例子產品-删除商品子產品
① 核心思路：把商品remove() 删除元素即可
② 有三個地方需要删除：
- 商品後面的删除按鈕
- 删除選中的商品
-
清理購物車
③ 商品後面的删除按鈕： 一定是删除目前的商品，是以從 $(this) 出發
④ 删除選中的商品： 先判斷小的複選框按鈕是否選中狀态，如果是選中，則删除對應的商品
⑤ 清理購物車： 則是把所有的商品全部删掉
// 6. 删除商品子產品
// (1) 商品後面的删除按鈕
$(".p-action a").click(function() {
// 删除的是目前的商品
$(this).parents(".cart-item").remove();
getSum();
});
// (2) 删除選中的商品
$(".remove-batch").click(function() {
// 删除的是小的複選框選中的商品
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
});
// (3) 清空購物車 删除全部商品
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
案例：購物車案例子產品-選中商品添加背景
① 核心思路：選中的商品添加背景，不選中移除背景即可
② 全選按鈕點選：如果全選是選中的，則所有的商品添加背景，否則移除背景
③ 小的複選框點選： 如果是選中狀态，則目前商品添加背景，否則移除背景
④ 這個背景，可以通過類名修改，添加類和删除類
//如果全選按鈕選中，則每一個按鈕都被選中
$('.checkall').change(function () {
$('.j-checkbox,.checkall').prop('checked',$(this).prop('checked'));
if($(this).prop('checked')){
$('.cart-item').addClass('check-cart-item');
}
else{
$('.cart-item').removeClass('check-cart-item');
}
})
$('.j-checkbox').click(function(){
// 如果按鈕選中的個數等于所有按鈕的個數
if($('.j-checkbox:checked').length==$('.j-checkbox').length){
$('.checkall').prop('checked',true);
}
else{
$('.checkall').prop('checked',false);
}
if($(this).prop('checked')){
$(this).parents('.cart-item').addClass('check-cart-item');
}
else{
$(this).parents('.cart-item').removeClass('check-cart-item');
}
})
jQuery 尺寸
位置主要有三個： offset()、position()、scrollTop()/scrollLeft()
-
offset() 設定或擷取元素偏移
① offset() 方法設定或傳回被選元素相對于文檔的偏移坐标，跟父級沒有關系。
② 該方法有2個屬性 left、top 。offset().top 用于擷取距離文檔頂部的距離，offset().left 用于擷取距離文檔左側的距離。
③ 可以設定元素的偏移：offset({ top: 10, left: 30 });
-
position() 擷取元素偏移
① position() 方法用于傳回被選元素相對于帶有定位的父級偏移坐标，如果父級都沒有定位，則以文檔為準。
② 該方法有2個屬性 left、top。position().top 用于擷取距離定位父級頂部的距離，position().left 用于擷取距離定 位父級左側的距離。
③ 該方法隻能擷取不能修改
-
scrollTop()/scrollLeft() 設定或擷取元素被卷去的頭部和左側
① scrollTop() 方法設定或傳回被選元素被卷去的頭部。
② 不跟參數是擷取，參數為不帶機關的數字則是設定被卷去的頭部
案例：帶有動畫的傳回頂部
① 核心原理： 使用animate動畫傳回頂部。
② animate動畫函數裡面有個scrollTop 屬性，可以設定位置
③ 但是是元素做動畫，是以 $(“body,html”).animate({scrollTop: 0})
<!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="js/jquery.min.js"></script>
</head>
<body>
<div class="back">傳回頂部</div>
<div class="container">
</div>
<script>
$(function (){
$(window).scroll(function() {
if($(this).scrollTop()>=($('.container').offset().top)){
$('.back').show();
}
else{
$('.back').hide();
}
})
//不能是文檔而是 html和body元素做動畫
$('.back').click(function(){
$('html, body').animate({
scrollTop : 0,
})
})
})
</script>
</body>
</html>
jQuery 事件注冊
element.事件(function(){})
$(“div”).click(function(){ 事件處理程式 })
其他事件和原生基本一緻。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
事件處理 on() 綁定事件
on() 方法在比對元素上綁定一個或多個事件的事件處理函數
文法：
- events:一個或多個用空格分隔的事件類型，如"click"或"keydown" 。
- selector: 元素的子元素選擇器 。
- fn:回調函數 即綁定在元素身上的偵聽函數。
on() 方法優勢1：
可以綁定多個事件，多個處理事件處理程式
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
});
如果事件處理程式相同
$(“div”).on(“mouseover mouseout”, function() { $(this).toggleClass(“current”);
});
on() 方法優勢2：
可以事件委派操作 。事件委派的定義就是，把原來加給子元素身上的事件綁定在父元素身上，就是把事件委派給父元素。
$('ul').on('click', 'li', function() {
alert('hello world!');
});
在此之前有bind(), live() delegate()等方法來處理事件綁定或者事件委派，最新版本的請用on替代他們
on() 方法優勢3：
動态建立的元素，click() 沒有辦法綁定事件， on() 可以給動态生成的元素綁定事件
$(“div").on("click",”p”, function(){
alert("俺可以給動态生成的元素綁定事件")
});
$("div").append($("<p>我是動态建立的p</p>"));
案例：釋出微網誌案例
① 點選釋出按鈕， 動态建立一個小li，放入文本框的内容和删除按鈕， 并且添加到ul 中。
② 點選的删除按鈕，可以删除目前的微網誌留言。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1.點選釋出按鈕， 動态建立一個小li，放入文本框的内容和删除按鈕， 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.點選的删除按鈕，可以删除目前的微網誌留言li
// $("ul a").click(function() { // 此時的click不能給動态建立的a添加事件
// alert(11);
// })
// on可以給動态建立的元素綁定事件
$("ul").on("click", "a", function() {
$(this).parent().slideUp(function() {
$(this).remove();
});
})
})
</script>
</head>
<body>
<div class="box" id="weibo">
<span>微網誌釋出</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">釋出</button>
<ul>
</ul>
</div>
</body>
</html>
off() 方法可以移除通過 on() 方法添加的事件處理程式。
$("p").off() // 解綁p元素所有事件處理程式
$("p").off( "click") // 解綁p元素上面的點選事件 後面的 foo 是偵聽函數名
$("ul").off("click", "li"); // 解綁事件委托
如果有的事件隻想觸發一次， 可以使用 one() 來綁定事件。
自動觸發事件 trigger()
有些事件希望自動觸發, 比如輪播圖自動播放功能跟點選右側按鈕一緻。可以利用定時器自動觸發右側按鈕點選事件，不必滑鼠 點選觸發。
element.click() // 第一種簡寫形式
element.trigger("type") // 第二種自動觸發模式
$("p").on("click", function () { alert("hi~"); });
$("p").trigger("click"); // 此時自動觸發點選事件，不需要滑鼠點選
element.triggerHandler(type) // 第三種自動觸發模式
triggerHandler模式不會觸發元素的預設行為，這是和前面兩種的差別。
事件被觸發，就會有事件對象的産生。
阻止預設行為：event.preventDefault() 或者 return false
阻止冒泡： event.stopPropagation()
jQuery 對象拷貝
如果想要把某個對象拷貝（合并） 給另外一個對象使用，此時可以使用 $.extend() 方法
文法：
- deep: 如果設為true 為深拷貝， 預設為false 淺拷貝
- target: 要拷貝的目标對象
- object1:待拷貝到第一個對象的對象。
- objectN:待拷貝到第N個對象的對象。
- 淺拷貝目标對象引用的被拷貝的對象位址，修改目标對象會影響被拷貝對象。
- 深拷貝，前面加true， 完全克隆，修改目标對象不會影響被拷貝對象
jQuery 多庫共存
問題概述：
jQuery使用 作 為 标 示 符 ， 随 着 j Q u e r y 的 流 行 , 其 他 j s 庫 也 會 用 這 作為标示符，随着jQuery的流行,其他 js 庫也會用這 作為标示符，随着jQuery的流行,其他js庫也會用這作為辨別符， 這樣一起使用會引起沖突。
客觀需求：
需要一個解決方案，讓jQuery 和其他的js庫不存在沖突，可以同時存在，這就叫做多庫共存。
jQuery 解決方案：
- 把裡面的 $ 符号 統一改為 jQuery。 比如 jQuery(’‘div’’)
- jQuery 變量規定新的名稱：$.noConflict() var xx = $.noConflict();
jQuery 功能比較有限，想要更複雜的特效效果，可以借助于 jQuery 插件完成。
注意: 這些插件也是依賴于jQuery來完成的，是以必須要先引入jQuery檔案，是以也稱為 jQuery 插件。
jQuery 插件常用的網站：
3. jQuery 插件庫 http://www.jq22.com/
4. jQuery 之家 http://www.htmleaf.com/
jQuery 插件使用步驟：
5. 引入相關檔案。（jQuery 檔案 和 插件檔案）
6. 複制相關html、css、js (調用插件)。
ajax
| 參數 | 參數類型及預設值 | 說明 |
|---|---|---|
| url | 類型：String 預設值: 目前頁位址。發送請求的位址 | 請求的位址 |
| type | 類型：String預設值: “GET”) | 請求方式 (“POST” 或 “GET”) |
| data | 類型：String | 發送到伺服器的資料，會被jquery自動轉化為查詢字元串 |
| dataType | 類型：String，預設由浏覽器自動判斷 | 期待伺服器傳回的資料類型 |
| error | 類型：Function | 請求失敗時調用此函數 |
| success | 類型：Function | 請求成功後的回調函數 |
| complete(XHR, TS) | 類型：Function | 請求完成後回調函數 (請求成功或失敗之後均調用) |
| contentType | 類型：String 預設值: “application/x-www-form-urlencoded”。發送資訊至伺服器時内容編碼類型 | 發送請求時使用的内容類型，即請求首部的content-Type |