為甚嚒要學習jQuery？
因為JS中有很多痛點：
- window.onload事件只能出現一次，如果出現多次，后面的事件會覆蓋掉前面的事件；
- 代碼容錯性差，如果獲取標簽發生錯誤，會影響后續代碼執行；
- 瀏覽器兼容性問題：如innerText等；
- 簡單功能實現很繁瑣，如漸變的動畫效果。
jQuery是什么？
jQuery描述（理解）
- jQuery是js的一個庫，封裝了我們開發過程中常用的一些功能，方便我們來調用，提高了我們的開發效率；
- Js庫是把我們常用的功能放到一個單獨的文件中，我們用的時候，直接引用到頁面里面來就可以了。
學習jQuery，主要學習什么內容？
- 目前這個階段，主要學習如何來使用jQuery操作DOM，其實就是學習jQuery封裝好的那些功能方法，這些方法叫做API（Application Programming Interface應用程序編程接口）。
- 這些API的共同特點是：幾乎全都是方法。所以，在使用jQuery的API時，都是方法調用，也就是說要加
小括號()，小括號里面是相應的參數，參數不同，功能不同。
jQuery網站
jQuery特點
- 鏈式編程；
- 隱式迭代（遍歷）。
如何使用jQuery重點
三個步驟：
- 引包
<script src="XXX"></script>
- 入口函數
- 功能實現代碼（事件處理）
$(document).ready(function (){ //入口函數
//功能實現代碼（事件處理）
//獲取元素和綁定事件（通過方法實現）
事件源.事件(function(){
//事件處理程序
});
});
- 體驗：
<script src="jquery-1.11.1.js"></script> //引包
<script type="text/javascript">
$(document).ready(function () { //入口函數
//使用$獲取元素，通過標簽獲取直接寫標簽名；通過類名獲取寫.XXX；通過id獲取寫#XXX。
var jqBtn = $("button");
var jqDiv = $("div");
jqBtn.click(function () {
jqDiv.show(1000); //可以設置開始顯示到結束顯示的時間間隔
jqDiv.html(12345); //設置顯示內容
});
});
</script>
入口函數
- 入口函數一：文檔加載完畢，圖片沒有加載時就可以調用：
$(document).ready(function () {
//code;
});
- 入口函數二：是入口函數一的簡寫，作用和入口函數一相同：
$(fucntion (){
//code
});
- 入口函數三：文檔加載完畢，圖片也加載完畢時候執行：
$(window).ready(function (){
//code;
});
- 原生js入口函數，頁面上所有內容加載完畢時候執行（不僅文本加載完畢，而且圖片也要加載完畢時候才執行函數）：
window.onload = function (){
//code;
};
- jQuery入口函數和js入口函數的區別（理解）
- 書寫個數不同：js入口函數只能出現一次，出現多次會存在事件覆蓋的問題（其它函數也都會出現覆蓋的問題，除了addEventListener、attachEvent方法）；jQuery的入口函數可以出現任意多次，并不會存在事件覆蓋問題。
- 執行時機不同：js入口函數是在所有的文件資源加載完成后，才執行（這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等）；jQuery的入口函數，是在文檔加載完成后，就執行。文檔加載完成指的是：DOM樹加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成，如果想要所有的資源都加載完畢后再執行就用入口函數三。
jQuery的$符號重點
- js命名規范允許出現的字符有：數字、字母、下劃線、$（不能以數字開頭）；
- jQuery中$是一個函數，和jQuery的值基本一樣
$===jQuery的值為true； - jQuery中使用$的原因：書寫簡潔，相對于其它字符更容易被記住。
- 怎么理解jQuery中的$符號：
- $實際上是一個函數名；
$(); //調用我們自定義的函數$
$(document).ready(function(){}); //調用入口函數
$(function(){}); //調用入口函數
$(window).ready(function(){}); //調用入口函數
$("#btnStyle"); //獲取id屬性為btnStyle的元素
$("div"); //獲取所有的div元素
$(".content"); //獲取類名為content(包含即可)的元素
jQuery對象(jQuery中的DOM對象)和js中的DOM對象的區別和聯系重點！！！難點
jQuery對象是一個數組，數組中包含著原生js中的DOM對象；
jQuery中有css()方法，原生js沒有，因為jQuery有一層功能皮膚，
jqDiv.css({"width":100});;jQuery中DOM對象和js中DOM對象的轉換：
js中DOM對象轉換為jQuery中DOM對象，使其皮膚上有功能，然后可以直接使用相應方法，使用$就可以實現轉換：
$(js對象)，如：box = $(box);；-
jQuery對象轉換為js對象：通過索引值就可以進行轉換：
- 方法一：
jQuery對象[索引值];，如：jqDiv[0].style.backgroundColor = "red"; - 方法二：
jQuery對象.get(索引值);，如：jqDiv.get(3).style.backgroundColor = "pink";
- 方法一：
如果想要使用哪種方式(jQuery或者js)設置屬性或者方法，必須轉換成對應的類型(jQuery類型或者js類型)才能調用。
練習：
隔行變色；
<body>
<ul>
<li>馬老大今天很漂亮---1---賊老美啦</li>
<li>馬老大今天很漂亮---2---賊老美啦</li>
<li>馬老大今天很漂亮---3---賊老美啦</li>
<li>馬老大今天很漂亮---4---賊老美啦</li>
<li>馬老大今天很漂亮---5---賊老美啦</li>
<li>馬老大今天很漂亮---6---賊老美啦</li>
<li>馬老大今天很漂亮---7---賊老美啦</li>
<li>馬老大今天很漂亮---8---賊老美啦</li>
<li>馬老大今天很漂亮---9---賊老美啦</li>
<li>馬老大今天很漂亮---10---賊老美啦</li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
var jqLi = $("li");
for(var i=0; i<jqLi.length; i++){
if (i%2===0){
jqLi[i].style.backgroundColor = "green";
}else {
jqLi.get(i).style.backgroundColor = "pink";
}
}
});
</script>
</body>
- 開關燈
<body>
<!--開關燈-->
<input type="button" value="開燈">
<input type="button" value="關燈">
<div>
</div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
//通過js獲取
var btns = document.getElementsByTagName("input");
//通過js獲取
var bd = $("body");
$(btns[0]).click(function () {
bd[0].style.backgroundColor = "white";
});
$(btns[1]).click(function () {
bd.get(0).style.backgroundColor = "rgba(0,0,0,0.3)";
});
</script>
</body>
jQuery版本
- v1.11.3和v2.1.4是兩個大版本的最新版；
- 版本一：1.x版本；版本二：2.x版本；
- 兩個版本的最大區別：2.x版本不再支持IE678。
選擇器
基本選擇器重點
- id選擇器：
$("#id名")； - 類選擇器：
$(".類名")； - 標簽選擇器：
$("標簽名")； -
jqDiv.css(參數1,參數2);：如果只有一個參數是獲取屬性值，如果有兩個參數是設置屬性值。
層級選擇器重點，基本過濾選擇器
層級選擇器
- 空格：后代選擇器（所有后代選擇器，可以隔代），用法：
$("#jiang li").css("background-color","red");，選擇id為jiang的元素的所有后代元素li； -
>：子代選擇器，只能是直接下一代。
基本過濾選擇器
-
:eq(index)：選擇匹配到的元素中索引號為index的一個元素，index從0開始； -
:odd：選擇匹配到的元素中索引號為奇數的所有元素； -
:even：選擇匹配到的元素中索引號為偶數的所有元素； - 其它的有：
:first/:last/:not()/...
篩選選擇器（方法）重點
元素.find(selector)：查找指定元素的所有后代元素（子子孫孫），必須指定參數，如$("#jiang").find("li").css("color","red");：設置id為jiang的元素的所有后代元素li的顏色；children()：查找指定元素的所有直接子元素（親兒子元素），如$("jiang").children("ul").css("color","red");；siblings()：查找所有兄弟元素（不包括自己），如$("jiang").siblings().css("color","red");；parent()：查找親父親元素；eq(index)：查找指定元素的第index個元素，如$("li").eq(2).css("color","red");：選擇所有li元素中的第2個；next()：該元素的下一個兄弟元素。練習：
-
下拉菜單（this）；
- jQuery對象綁定的事件中的this也代指js中的對象。
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 340px;
height: 30px;
margin: 80px auto 0;
background-image: url("images/bg.jpg");
}
.wrap li{
background-image: url("images/libg.jpg");
}
.wrap>ul>li{
float: left;
margin-left: 10px;
position: relative;
}
ul,li{
list-style: none;
}
.wrap a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
text-decoration: none;
text-align: center;
}
.wrap>ul>li>ul{
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="">一級標簽1</a>
<ul>
<li><a href="">二級標簽11</a></li>
<li><a href="">二級標簽12</a></li>
<li><a href="">二級標簽13</a></li>
</ul>
</li>
<li><a href="">一級標簽2</a>
<ul>
<li><a href="">二級標簽21</a></li>
<li><a href="">二級標簽22</a></li>
<li><a href="">二級標簽23</a></li>
</ul>
</li>
<li><a href="">一級標簽3</a>
<ul>
<li><a href="">二級標簽31</a></li>
<li><a href="">二級標簽32</a></li>
<li><a href="">二級標簽33</a></li>
</ul>
</li>
</ul>
</div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function () {
var jqLi = $(".wrap>ul>li");
jqLi.mouseover(function () {
console.log(this);
$(this).children("ul").show();
});
jqLi.mouseout(function () {
$(this).children("ul").hide();
});
});
</script>
</body>
- 鼠標進入高亮，離開恢復（隔行變色）；
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 350px;
background-color: #999;
margin: 60px auto ;
}
li{
list-style: none;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
<li>今天天氣真好，我和馬老大去放風箏</li>
</ul>
</div>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//獲取奇數行
var jqLiOdd = $("ul li:odd");
//獲取偶數行
var jqLiEven = $("ul li:even");
jqLiEven.css("background-color","red");
jqLiOdd.css("background-color","green");
var jqLi = $("li");
var color = "";
jqLi.mouseenter(function () {
color = this.style.backgroundColor;
this.style.backgroundColor = "yellow";
});
jqLi.mouseout(function () {
this.style.backgroundColor = color;
});
});
</script>
</body>
- 突出展示案例；
<head>
<meta charset="UTF-8">
<title>練習</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background-color: #333;
}
.wrap{
width: 630px;
height: 598px;
margin: 60px auto 0;
border: 1px solid #ffffff;
padding: 10px 10px 0 0;
}
li{
list-style: none;
float: left;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<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>
<script src="jquery-1.11.1.js"></script>
<script type="text/javascript">
//為每一個li元素綁定方法
$(".wrap").find("li").mouseover(function () {
$(this).css("opacity",1).siblings().css("opacity",0.3);
});
//當鼠標離開時，全部li為全透明
$(".wrap").mouseleave(function () {
$(this).find("li").css("opacity",1);
});
</script>
</body>
- 手風琴；
- 淘寶精品服飾。
jQuery操作DOM
為甚嚒要使用jQuery操作DOM
- 對比js操作DOM和jQuery操作DOM發現，使用jQuery的方式來操作DOM更加的簡潔、方便，統一的調用方式方便我們學習，降低我們的學習成本。
重點內容
- 樣式和類的操作；
- jQuery動畫；
- 節點操作。
樣式操作
樣式屬性操作.css()
- 作用：設置或獲取元素的樣式屬性值；
- 設置樣式屬性操作：
- 設置單個樣式：
$("div").css("background-color","red");
- 第一個參數表示樣式屬性名稱；
- 第二個參數表示樣式屬性值。
- 設置多個樣式：（此種方式也可以用來設置單個）
$("div").css({"background-color":"red","margin":"10px"});
- 參數是{}(`對象`)。
- 獲取樣式屬性值的操作：
$("div").css("background-color");
- 參數表示要獲取的
樣式屬性名稱。
類操作
- 添加類樣式：
addClass(className) - 為指定元素添加類className：
$(selector).addClass("liItem");
注意：
此處類名不帶點，所有類操作的方法類名都不帶點;移除類樣式：
removeClass(className)-
為指定元素移除類 className:
- 指定參數（類名）：
$(selector).removeClass(“liItem”);
- 不指定參數：表示移除被選中元素的所有類：
$(selector).removeClass();
- 判斷有沒有類樣式：
hasClass(calssName) - 判斷指定元素是否包含類 className
$("div").hasClass(“liItem”);
此時，會返回true或false;
有一個div有liItem時就返回true，只有所有的div都沒有類liItem時才返回false。
練習：切換背景色（點擊一次變換一下，再次點擊恢復，可判斷也可用toggle實現）。
切換類樣式：
toggleClass(className):為指定元素切換類 className，該元素有類則移除，沒有指定類則添加:
$(selector).toggleClass(“liItem”);
注意點：
操作類樣式的時候，所有的類名，都
不帶點（.）;經驗：
操作的樣式非常少，那么可以通過.css()這個 方法來操作;
操作的樣式很多，那么要通過使用類的方式來操作;
如果考慮以后維護方便（把CSS從js中分離出來）的話，推薦使用類的方式來操作。類比CSS書寫位置（把css從html中分離出來）。
前面內容特色總結：簡約、“粗暴”、干凈利落、直截了當
案例：圖片京東Table欄
jQuery動畫
- jQuery提供的一組網頁中常見的動畫效果，這些動畫是標準的、有規律的效果；同時還提供給我們了自定義動畫的功能。
隱藏顯示動畫（通過改變寬高和透明度display來實現）
- show方法：讓匹配的方法展示出來
- 用法一：參數為數值類型，表示執行動畫時長（從開始到結束的時間）（底層是改變
寬高和透明度）；
$("div").show(2000); //從開始展示到展示結束花費2秒時間（）
- 用法二：參數是字符串類型，是jQuery預設的值，共有三個，分別為：slow(600ms)、normal(400ms)、fast(200ms)，如果傳入其它字符串默認為normal；
$("div").show("fast");
- 用法三：參數一可以是數值類型或者字符串類型表示動畫執行時間，參數二表示動畫執行完畢之后立刻執行的回調函數；
$("div").show(1000,function (){});
- 用法四：不帶參數，作用等同于
css("display","block");（底層是通過改變display:block來實現的），此時沒有動畫效果
$("div").show();
- hide方法：使得匹配元素隱藏
- 四種用法如下：
//方法一
$("div").hide(1000);
//方法二
$("div").hide("slow");
//方法三
$("div").hide("normal",function (){});
//方法四
$("div").hide();
- 顯示隱藏進行切換
toggle，用法完全一致。
滑入滑出動畫（通過改變高度display來實現）
- 滑入動畫效果（聯想生活中的卷簾門）：讓元素以下拉動畫效果展示出來，也有四種用法，這里展示常用的兩種
- 用法一：
$("div").slideDown(speed，callback);
- 用法二：
$("div").slideDown();
注意：省略參數或者傳入不合法的參數，就會使用默認值400ms（同樣適用于slideUp、fadeIn）。
滑出動畫效果：讓元素以上拉動畫效果形式隱藏，也有四種方法，這里不再全部展示
$("div").slideUp(speed,callback);
- 滑入滑出切換動畫效果
slideToggle - 如果元素已經隱藏，該方法就相當于slideDown；如果元素已經展示，該方法就相當于slideUp
$("div").slideToggle(speed,callback);
淡入淡出動畫（通過改變透明度display來實現）
- 淡入動畫效果：讓元素以淡淡的的進入視線的方式展示出來，有四種方法；
$("div").fadeIn(speed,callback);
- 淡出動畫效果：讓元素以漸漸消失的方式隱藏起來，有四種方法
$("div").fadeOut(speed,callback);
- 淡入淡出切換動畫效果：通過改變透明度，切換匹配元素的顯示和隱藏(完全透明時隱藏)狀態；
$("div").fadeToggle("fast",callback);
- 改變透明度到具體的某個值
fadeTo - 與淡入淡出的區別：淡入淡出只能控制元素的不透明度從 完全不透明 到完全透明；而fadeTo可以指定元素不透明度的具體值。并且
時間參數是必需的！ - 用法有別于其它動畫效果；第一個參數表示時長；第二個參數表示透明度，范圍：0-1，0為全透明，1為不透明；可以有第三個參數（回調函數）；
$("div").fadeTo(100,0.4);
- 第一個參數為0時，此時的作用相當于：
.css("opacity",.4);；
$("div").fadeTo(0,.4);
- 注意：
- jQuery預設的三組動畫效果的語法幾乎一致：參數可以有兩個，第一個是動畫的執行時長，第二個是動畫執行完成后的回調函數;第一個參數是：可以是指定字符或者毫秒數(fadeTo()除外)；
- 展示隱藏：
- 表示展示：show()、fadeIn()、slideDown();
- 表示隱藏：hide()、fadeOut()、slideUp()。
自定義動畫
- 注意：所有能夠執行動畫的屬性必須只有一個數字類型的值，如要改變字體的大小，要使用：fontSize（font-size），不要使用font。
$("div").animate(params,speen,callback);
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #96c;
position: absolute;
}
</style>
</head>
<body>
<button>點我</button>
<div></div>
<script src="jquery-1.11.1.js"></script>
<script>
var btn = $("button");
btn.click(function () {
var json1 = {"width":"500px","height":"500px","left":"200px","top":"200px","border-radius":100 };
var json2 = {"width":300,"height":300,"left":100,"top":100};
$("div").animate(json1,1000,function () {
$("div").animate(json2,1000,function () {
alert("動畫2執行完畢");
});
});
});
</script>
</body>
- 作用：執行一組CSS屬性的自定義動畫;
- 第一個參數表示要執行動畫的
CSS屬性（必選）（JSON串），不支持背景色；第二個參數表示執行動畫時長（可選）；第三個參數表示動畫執行完畢之后立即執行的回調函數（可選）：
停止動畫stop():停止當前正在執行的動畫
如果一個以上的動畫方法在同一個元素上調用，那么對這個元素來說，后面的動畫將被放到效果隊列中。這樣就形成了動畫隊列。（聯想：排隊進站）
動畫隊列里面的動畫不會全部執行，直到第一個動畫執行完成；
第一個參數表示后續動畫是否要執行
true:后續動畫不執行 ;false:后續動畫會執行第二個參數表示當前動畫是否執行完
true:立即執行完成當前動畫 ;false:立即停止當前動畫，一定要注意，是當前動畫
$(selector).stop(clearQueue,jumpToEnd);
都不給，默認false；
解釋：
當調用stop()方法后，隊列里面的下一個動畫將會立即開始。但是，如果參數clearQueue被設置為true，那么隊列面剩余的動畫就被刪除了，并且永遠也不會執行。
如果參數jumpToEnd被設置為true，參與動畫的每一個CSS屬性將被立即設置為它們的目標值。比如：slideUp()方法，那么元素會立即隱藏掉。如果存在回調函數，那么回調函數也會立即執行。
注意：如果元素動畫還沒有執行完，此時調用stop()方法，那么動畫將會停止。并且動畫沒有執行完成，那么回調函數也不會被執行。
常用方式：
$(selector).stop();
- 練習：
- 右下角彈出的廣告（打開頁面廣告先滑入再滑出；再淡入，點擊關閉按鈕后再淡出）；兩種方式實現：一種是鏈式編程，一種是通過函數回調實現。
jQuery節點操作
創建節點
回顧一下js中創建節點的三種方式：
方式一：
document.write();，容易層疊掉已有的元素；方式二：使用
innerHTML或者html屬性；方式三：
document.createElement();$()函數的另外一個作用：動態創建元素；方式一：
var $spanNode = $(“<span>我是一個span元素</span>”);
- 類比js中的
document.createElement("span")。 - 方式二：html創建元素（推薦使用，
重點）
var node = $(“#box”).html（“<li>我是li</li>”）；
- 作用：設置或返回所選元素的html內容（包括 HTML 標記）;
- 設置內容的時候，如果是html標記，會動態創建元素，此時可類比js里面的 innerHTML屬性，因為此屬性識別html標簽；
- 獲取html內容
$(selector).html();
添加元素append()（重點）
- 在元素的最后一個子元素后面追加元素；
- 作用：在被選元素內部的最后一個子元素（或內容）后面插入內容（存在或者創建出來的元素都可以）；
- 如果是頁面中存在的元素，那么調用append()后，會把這個元素放到相應的目標元素里面去；但是，原來的這個元素，就不存在了；
- 如果是給多個目標追加元素，那么方法的內部會復制多份這個元素，然后追加到多個目標里面去；
- 常用參數：htmlString 或者 jQuery對象；
- 在$(selector)中追加$node
$(selector).append($node);
- 在$(selector)中追加div元素，參數為htmlString
$(selector).append('<div></div>');
- 不常用操作：（用法跟append()方法基本一致）
-
appendTo(),作用：同append()；
node.appendTo($(selector));
-
prepend(),作用：在元素的第一個子元素前面追加內容或節點;
//方式一：
$(selector).prepend(node);
//方式二：
node.prependTo($(selector));
-
after(),作用：在被選元素$(selector)之后，作為兄弟元素插入內容或節點
$(selector).after(node);
-
before(),作用：在被選元素$(selector)之前，作為兄弟元素插入內容或節點
$(selector).before(node);
清空元素
- 清空指定元素的所有子元素（光桿司令）；
- 方法一：沒有參數；
$(selector).empty(); //方式一
$(selector).html(""); //方式二
- “自殺” 把自己（包括所有內部元素）從文檔中刪除掉；
$(selector).remove();
復制元素
- 作用：復制匹配的元素
- 復制$(selector)所匹配到的元素；
- 返回值為復制的新元素，只有深層復制；
$(selector).clone();
總結：
推薦使用html("<span></span>")方法來創建元素或者html("")清空元素。練習：
選擇水果；
動態創建表格；
動態添加數據；
重點內容
-
val()屬性操作； - 時間綁定；
- 事件解綁；
- 事件觸發；
- 插件基本使用。
操作form表單
屬性操作
- 設置屬性
$(selector).attr("title","卡內基梅隴");
第一個參數表示：要設置的屬性名稱；
第二個參數表示：該屬性名稱對應的值。
獲取屬性：返回指定屬性的值
$(selector).attr("title");
參數為：要獲取屬性的名稱，該操作會返回指定屬性對應的值。
移除屬性操作
$(selector).removeAttr("title");
參數為：要移除的屬性的名稱；
注意：
checked、selected、disabled要使用
.prop()方法;prop方法通常用來影響DOM元素的動態狀態，而不是改變的HTML屬性;
例如：input和button的disabled特性，以及checkbox的checked特性;
案例：表格案例全選反選；
值和內容
-
val()方法： - 作用：設置或者返回表單元素的值，例如：input、select、textarea的值；
//獲取匹配元素的值，只匹配第一個元素
$(selector).val();
//設置所有匹配到的元素的值
$(selector).val("具體值");
-
text()方法： - 作用：設置或者獲取匹配元素的文本內容；
- 方法一：獲取操作不帶參數（注意：這時候會把所有匹配到的元素內容拼接為一個字符串，不同于其他獲取操作！）
$(selector).text();
- 設置操作帶參數，參數表示要設置的文本內容
// 如果設置的內容包含html標簽（<span>我要動態創建span</span>），那么text這個方法會把他們當作文本內容輸出，而不會創建元素。這個text()和html()方的主要區別
$(selector).text(“我是內容”);
- 案例：紅鯉魚與綠鯉魚
尺寸位置操作
高度和寬度操作
- 高度操作height() ：
- 作用：設置或獲取匹配元素的高度值;
- 帶參數表示設置高度
$(selector).height(200);
- 不帶參數獲取高度
$(selector).height();
- 寬度操作width() ：
- 作用：設置或獲取匹配元素的寬度值;
- 帶參數表示設置寬度;
- 不帶參數獲取寬度;
$(selector).width(200);
- css()獲取高度和height獲取高度的區別:
- 方式一：
height()方法返回值為number類型，例如：30；
$("div").height();
- 方式二：
css()方法返回值為string類型，例如："30px"；
$("div").css("height");
- 區別：方式一常用于參與數學計算的情況。
坐標值操作
-
offset(): - 作用：獲取或設置元素相對于文檔的位置；
- 無參數表示獲取，返回值為：
{left:num, top:num}，值是相對于document的位置;
$(selector).offset();
- 有參數表示設置，參數推薦使用數值類型;
$(selector).offset({left:100, top: 150});
注意點：設置offset后，如果元素沒有定位(默認值：static)，則被修改為
relative。position():作用：獲取相對于其最近的具有定位的父元素的位置;
獲取，返回值為對象：{left:num, top:num};
$(selector).position();
注意：只能獲取，不能設置。
scrollTop():作用：獲取或者設置元素垂直方向滾動的位置；
無參數表示獲取偏移；
有參數表示設置偏移，參數為數值類型；
$(selector).scrollTop(100);
-
scrollLeft(): - 作用：獲取或者設置元素水平方向滾動的位置;
$(selector).scrollLeft(100);
對scrollTop的理解：
垂直滾動條位置 是可滾動區域 在 可視區域上方的 被隱藏區域的高度。
如果滾動條在最上方沒有滾動 或者 當前元素沒有出現滾動條，那么這個距離為0。案例：固定導航欄
jQuery事件機制
- jQuery的事件機制，指的是：jQuery對JavaScript操作DOM事件的封裝，包括了：事件綁定、事件解綁、事件觸發。
jQuery事件的發展歷程（了解）
簡單事件綁定 >> bind事件綁定 >> delegate事件綁定 >> on
重點；簡單事件綁定：
| 事件 | 事件描述 |
|---|---|
| click(handler) | 單擊事件 |
| blur(handler) | 失去焦點事件 |
| mouseenter(handler) | 鼠標進入事件 |
| mouseleave(handler) | 鼠標離開事件 |
| dbclick(handler) | 雙擊事件 |
| change(handler) | 改變事件，如：文本框值改變，下拉列表值改變等 |
| focus(handler) | 獲得焦點事件 |
| keydown(handler) | 鍵盤按下事件 |
其他參考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
bind方式（不推薦，1.7以后的jQuery版本被on取代）
作用：給匹配到的元素直接綁定事件
// 綁定單擊事件處理程序
$("p").bind("click", function(e){
//事件響應方法
});
第一個參數：事件類型;
第二個參數：事件處理程序;
-
比簡單事件綁定方式的優勢：
- 可以同時綁定多個事件，比如：
bind(“mouseenter mouseleave”, function(){});； - 缺點：要綁定事件的元素必須存在文檔中。
- 可以同時綁定多個事件，比如：
delegate方式（特點：性能高，支持動態創建的元素）
作用：給匹配到的元素綁定事件，對支持動態創建的元素有效；
$(".parentBox").delegate("p", "click", function(){
//為 .parentBox下面的所有的p標簽綁定事件
});
第一個參數：selector，要綁定事件的元素；
第二個參數：事件類型；
第三個參數：事件處理函數。
與前兩種方式最大的優勢：
減少事件綁定次數提高效率，支持動態創建出來的元素綁定事件！
on方式（最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用的方式）重點
- jQuery1.7版本后，jQuery用on統一了所有的事件處理的方法；
- 作用：給匹配的元素綁定事件，包括了上面所有綁定事件方式的優點；
- 語法：
- 第一個參數：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）；
- 第二個參數：selector, 執行事件的后代元素；
- 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候通過event.data來使用；
- 第四個參數：handler，事件處理函數；
$(selector).on(events[,selector][,data],handler);
- 表示給$(selector)綁定事件，當必須是它的內部元素span才能執行這個事件;
$(selector).on( "click",“span”, function() {});
- 綁定多個事件
- 表示給$(selector)匹配的元素綁定單擊和鼠標進入事件;
$(selector).on(“click mouseenter”, function(){});
事件解綁
-
unbind()方式 - 作用：解綁 bind方式綁定的事件;
- 解綁所有的事件:
$(selector).unbind();
- 解綁指定的事件
$(selector).unbind(“click”);
- undelegate() 方式
- 作用：解綁delegate方式綁定的事件；
- 解綁所有的delegate事件;
$( selector ).undelegate();
- 解綁所有的click事件;
$( selector).undelegate("click"); ```
- off解綁on方式綁定的事件`重點`
- 解綁匹配元素的所有事件:
```js
$(selector).off();
- 解綁匹配元素的所有click事件:
$(selector).off("click");
- 解綁所有代理的click事件，元素本身的事件不會被解綁:
$(selector).off("click", "**" );
事件觸發
- 簡單事件觸發
- 觸發 click事件:
$(selector).click();
- trigger方法觸發事件，觸發瀏覽器行為：
$(selector).trigger(“click”);
- triggerHandler觸發 事件響應方法，不觸發瀏覽器行為，比如:文本框獲得焦點的默認行為：
$(selector).triggerHandler(“focus”);
jQuery事件對象介紹
| 事件對象 | 說明 |
|---|---|
| event.data | 傳遞給事件處理程序的額外數據 |
| event.currentTarget | 等同于this，當前DOM對象 |
| event.pageX | 鼠標相對于文檔左部邊緣的位置 |
| event.target | 觸發事件源，不一定===this |
| event.stopPropagation()； | 阻止事件冒泡 |
| event.preventDefault(); | 阻止默認行為 |
| event.type | 事件類型：click，dbclick… |
| event.which | 鼠標的按鍵類型：左1 中2 右3 |
| event.keyCode | 鍵盤按鍵代碼 |
- 案例：按鍵變色
jQuery補充
鏈式編程
鏈式編程原理：return this;
通常情況下，只有設置操作才能把鏈式編程延續下去。因為獲取操作的時候，會返回獲取到的相應的值，無法返回 this。
end();:結束當前鏈最近的一次過濾操作，并且返回匹配元素之前的狀態。
隱式迭代
- 隱式迭代的意思是：在方法的內部會為匹配到的所有元素進行循環遍歷，執行相應的方法；而不用我們再進行循環，簡化我們的操作，方便我們調用;
- 如果獲取的是多元素的值，大部分情況下返回的是第一個元素的值。
- 案例【五角星評分控件】
each方法
有了隱式迭代，為什么還要使用each函數遍歷？
大部分情況下是不需要使用each方法的，因為jQuery的隱式迭代特性；
如果要對每個元素做不同的處理，這時候就用到了each方法；
作用：遍歷jQuery對象集合，為每個匹配的元素執行一個函數
參數一表示當前元素在所有匹配元素中的索引號；
參數二表示當前元素（DOM對象）；
$(selector).each(function(index,element){});
element是一個 js對象，需要轉換成jquery對象。
【案例】 什么都看不見
多庫共存
此處多庫共存指的是：jQuery占用了
$和jQuery這兩個變量。當在同一個頁面中引用了jQuery這個js庫，并且引用的其他庫（或者其他版本的jQuery庫）中也用到了$或者jQuery這兩個變量，那么，要保證每個庫都能正常使用，這時候就有了多庫共存的問題。模擬另外的庫使用了
$這個變量，此時，就與jQuery庫產生了沖突:
var $ = { name : “itecast” };
- 解決方式：
- 作用：讓jQuery釋放對$的控制權，讓其他庫能夠使用$符號，達到多庫共存的目的。此后，只能使用jQuery來調用jQuery提供的方法;
$.noConflict(); //true兩個都交出來，返回值是新的調用方法；
- 作用：讓jQuery釋放對$的控制權，讓其他庫能夠使用$符號，達到多庫共存的目的。此后，只能使用jQuery來調用jQuery提供的方法;
<script src="../jquery-1.8.2.min.js"></script>
<script src="../jquery-1.11.1.js"></script>
<script>
$.noConflict();
//打印當前jQuery的版本號
console.log($.fn.jquery); //1.8.2
console.log(jQuery.fn.jquery); //1.11.1
</script>
jQuery插件機制
- jQuery這個js庫，雖然功能強大，但也不是面面俱到包含所有的功能。
- jQuery是通過插件的方式，來擴展它的功能：
- 當你需要某個插件的時候，你可以“安裝”到jQuery上面，然后，使用；
- 當你不再需要這個插件，那你就可以從jQuery上“卸載”它。（就好比如手機軟件，安裝的app就好比插件，用的時候安裝上，不用的時候卸載掉）
第三方插件
- jQuery.color.js
- animate()自定義動畫：不支持背景的動畫效果;
-
animate動畫支持的屬性列表; - jQuery.lazyload.js
- 使用步驟：
- 引入jQuery文件
- 引入插件
- 使用插件
制作插件
如何創建jQuery插件：http://learn.jquery.com/plugins/basic-plugin-creation/
全局jQuery函數擴展方法:
$.pluginName = function() {};
- jQuery對象擴展方法
$.fn.pluginName = function() {};
jQueryUI
- jQueryUI專指由jQuery官方維護的UI方向的插件。
- 官方API：http://api.jqueryui.com/category/all/
- 其他教程：jQueryUI教程:http://www.runoob.com/jqueryui/jqueryui-intro.html
- 基本使用:
- 引入jQueryUI的樣式文件；
- 引入jQuery；
- 引入jQueryUI的js文件；
- 使用jQueryUI功能。
