WEB前端第四十四課——jQuery框架（二）常用方法
1.css()方法
用於更改jq物件的css樣式，本方法可讀可寫，相當於js中的style屬性
語法：$("選擇器") .css("key", "value");
css()方法的第二個引數為可選引數，
如果只有第一個引數，就是讀取樣式；
如果有兩個引數或JSON樣式引數就是設定樣式。
示例，var $w=$("div").css("width");
console.log(parseInt($w)); //讀取 jq物件尺寸的返回值包含單位，使用數字時需要轉換。
注意，書寫css屬性名時可以使用“駝峰”格式，也可以使用“橫槓”格式；
當css屬性的值是以“px”為計量單位的數值時，可以不寫px單位，寫px時必須加引號！
特性，jq中css樣式的寬度和高度可以直接在原值的基礎上累加，示例如下：
$("div").css("width", "+=400px"); //可以配合監聽事件使用
2.show()和hide()
show()，用於設定元素的顯示，相當於 style中的 display：block；
hide()，用於設定元素的隱藏，相當於 style中的 display：none；
語法：$("選擇器").show(timeValue) || hide(timeValue);
兩種方法都可以設定引數，用於定義顯示和隱藏的動畫效果時間。
這兩種方法可以配合“toggle()”方法使用，可以方便的實現元素的切換，包括顯示/隱藏切換和內容切換。
語法：$("點選元素").toggle(function(){
$("選擇器").show(timeValue);
$("選擇器").html(“textContent”);
},
function(){
$("選擇器").hide(timeValue);
});
toggle()方法內可以繫結多個事件處理函式，以響應被選元素的輪流的click事件，
另外，還可以定義時間和效果引數（字串），實現動畫效果，但toggle()方法在高版本中已取消。
程式碼示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<button>顯示Div元素</button>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<script>
var d1=$(".div1");
var d2=$(".div2");
var d3=$(".div3");
$("button").click(function () {
d1.css({"width":200,"height":"200px",backgroundColor:"gold"});
d2.css({"width":200,"height":"200px",backgroundColor:"gray"});
});
// 給div1新增滑鼠進入、離開和點選事件
var colorArr=["red","yellow","blue","green","orange","indigo","purple","brown"];
d1.bind({
mouseenter: function () {
$(this).animate({
width:100,height:100,
"backgroundColor":"hotpink",
borderRadius:"50%",
},1000).css({ //鏈式宣告
"backgroundColor":"hotpink",
"border":"2px solid white"
}); //不支援animate()方法？？
},
click:function () {
var i=Math.floor(Math.random()*8);
$(this).css("backgroundColor",colorArr[i]); //獲取隨機背景顏色
},
mouseleave:function () {
$(this).animate({
"width":200,"height":"200px",
borderRadius:"0",
},1000).css({
backgroundColor:"gold",
});
$(this).off("mouseenter"); //去除事件
}
});
// 給div2新增滑鼠懸停
// 定義hover事件中的 in事件
d2.hover(function () {
$(this).animate({
"width":100,"height":"100px",
},1000).css({ //鏈式宣告
"backgroundColor":"yellowgreen",
"border": "2px solid darkorange",
"cursor":"pointer",
});
d3.css({
"backgroundColor":"red",
"width":"100px","height":"100px",
"borderRadius":"50%",
"position":"absolute",
"display":"none",
"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px",
"top":d2[0].offsetTop+2+"px",
});
// 在hover的in事件中定義click事件
$(this).click(function () { //存在問題：1.連續快速點選後，目標元素會一直移動停不下來？2.點選事件會逐次累加導致多次移動？
d3.show(2000) //動畫顯示
.animate({"left":"+=500px", //定義left屬性的自增效果
},1000);
console.log(d3[0].offsetLeft);
console.log(d3[0].offsetTop);
});
},
// 定義hover事件中的out事件
function () {
d3.animate({"left":d2[0].offsetLeft+d2[0].offsetWidth+1+"px"},2000);
d3.hide(1000); //動畫隱藏
})
</script>
</body>
</html>
3.slideDown()和slideUp()
slideDown()，表示下拉顯示，當元素的style屬性為“display:none”時，才能呼叫slideDown()方法；
語法：$("選擇器").slideDown(timeValue);
slideUp()，表示上滑隱藏，當元素為顯示的時候，才能呼叫slideUp()方法，
語法：$("選擇器").slideUp(timeValue);
這兩種方法都可以定義“時間”引數，實現動畫效果，即使不設定時間引數也會有較短的動畫效果。
注意，兩種方法存在一個隱藏的屬性“邊界”，即下拉開始和上滑結束的位置，預設是元素的上邊框；
可以通過“定位”的方式來設定jq物件的邊界屬性，改變動作開始和結束位置。
對於連續快速操作導致動畫一直執行的現象稱作“動畫積累”，可以通過“stop()”方法解決這一問題。
stop()，用於停止所有在指定元素上正在執行的動畫，如果佇列中有等待執行的動畫（並且
clearQueue沒有設為true），他們將被馬上執行。
語法：$("選擇器").stop(true||false);
引數為true，表示清空佇列（立即結束動畫），
預設為false，表示立即完成正在執行的動畫，同時重設show和hide原始樣式，呼叫回撥函式等
4.fadeIn()和fadeOut()
這兩種方法表示淡入、淡出效果。
語法：$("選擇器").fadeIn(timeValue);
$("選擇器").fadeOut(timeValue);
注意，fadeIn()的起點和fadeOut()的終點都是“display:none”，而不是“opacity:0”。
也就是說一個元素如果想實現淡入，一定要設定“display:none”屬性，而不是“opacity:0”屬性。
程式碼示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>顯示&隱藏</title>
<script src="jQueryFiles/jquery-1.8.3.js"></script>
<style>
button{display:block;margin: 0px auto;letter-spacing: 2px;}
.div1{
width: 100px;height: 200px;background-color: orangered;
margin:0px auto;
}
.div2{
width: 100px;height: 300px;border: 1px solid fuchsia;
margin:0px auto;position: relative;
}
.div3{
width: 100px;height: 200px;background-color: deepskyblue;
bottom:0px;position: absolute;
}
</style>
</head>
<body>
<button>Div操作</button>
<div class="div1"></div>
<div class="div2" style="display: none">
<div class="div3"></div>
</div>
<script>
var $d1=$(".div1");
var $d2=$(".div2");
var $d3=$(".div3");
var $btn=$("button");
$btn.toggle(function () {
$d1.hide(3000); //隱藏元素
$(this).html("顯示Div1");
$d2.fadeIn(3000); //淡入元素
},function () {
$d1.show(3000); //顯示元素
$(this).html("隱藏Div1");
$d2.fadeOut(3000); //淡出元素
});
$d2.hover(function () {
for (var i=0;i<5;i++){
$d3.slideUp(1000).slideDown(1000); //滑出&滑入元素
}
},function () {
$d3.stop(); //立即完成正在執行的動畫
})
</script>
</body>
</html>
ps：上述示例中的滑入&滑出的“重複動畫效果”，可以通過“from…to…”關鍵字實現。
5.addClass()和removeClass()
這兩種方法用於“追加類”和“移除類”。
語法：$("選擇器").addClass("className"); //追加類名，不改變已有類名
$("選擇器").removeClass("className"); //刪除指定類名，不影響其他類名
※ className前不需要加“點號”！！！
ps：可以通過增加和刪除類名，操作元素樣式。
6.attr()方法
在原生js中通過類似如下方式修改元素屬性：
document.getElementById("#pic").src="newUrl";
在jQuery中使用attr()方法“讀寫”元素的屬性值。
語法：$("選擇器").adttr("key", "value");
當 attr()方法只有一個引數時，表示“讀取”元素的屬性。
語法：$("選擇器").adttr("property");
7.html()方法
用於“讀寫”元素內部的內容，相當於原生js中的“innerHTML”。
語法：$("選擇器").html("textContent");
當 html()方法中不寫引數時表示“讀取”元素的內容。