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="https://www.cnblogs.com/husa/p/jQueryFiles/jquery-1.8.3.js"></script>
</head>
<body>
<button>顯示Div元素</button>
<div ></div>
<div ></div>
<div ></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="https://www.cnblogs.com/husa/p/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 ></div>
<div style="display: none">
<div ></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="https://www.cnblogs.com/husa/p/newUrl";
在 jQuery中使用 attr()方法“讀寫”元素的屬性值，
語法：$("選擇器").adttr("key", "value");
當 attr()方法只有一個引數時，表示“讀取”元素的屬性，
語法：$("選擇器").adttr("property");
7.html()方法
用于“讀寫”元素內部的內容，相當于原生 js中的“innerHTML”，
語法：$("選擇器").html("textContent");
當 html()方法中不寫引數時表示“讀取”元素的內容，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/68395.html
標籤：JavaScript