jQuery操作css方法的超全用法
一、jQuery可以使用css方法來(lái)修改元素樣式
jQuery可以使用css方法來(lái)修改簡(jiǎn)單元素樣式;也可以操作類，修改多個(gè)樣式。
1.參數(shù)只寫屬性名，則是返回屬性值
$(this).css("color"");⒉.參數(shù)是屬性名，屬性值，逗號(hào)分隔，是設(shè)置一組樣式，屬性必須加號(hào)，值如果是數(shù)字可以不用
跟單位和引號(hào)
$(this).css("color", "red");示例：
<body>
<div>123</div>
<script>
$(function(){
$("div").css("color","red");
});
</script>
</body>3.參數(shù)可以是對(duì)象形式，方便設(shè)置多組樣式。屬性名和屬性值用冒號(hào)隔開(kāi)，屬性可以不用加引號(hào)，
$(this).css({ "color":" white","font-size":"20px"});示例：
<body>
<div></div>
<script>
$(function(){
$("div").css({
width:200,
height:200,
backgroundColor:"red"
});
});
</script>
</body>二、設(shè)置類的樣式方法
作用等同于以前的classList，可以操作類樣式，注意操作類里面的參數(shù)不要加點(diǎn)。
1.添加類
$("div").addClass("current");2.移除類
$("div").removeClass("current");3.切換類
$("div").toggleClass("current");示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
margin: 100px auto;
transition: all 0.5s;
}
.current{
background-color: red;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="current"></div>
<script>
//添加類addClass()
/* $(function(){
$("div").click(function(){
$(this).addClass("current");
});
}) */
//刪除類removeClass()
/* $("div").click(function(){
$(this).removeClass("current");
}); */
//切換類 toggleClass()
$("div").click(function(){
$(this).toggleClass("current");
});
</script>
</body>三、類操作與className區(qū)別
原生JS中className會(huì)覆蓋元素原先里面的類名。
jQuery里面類操作只是對(duì)指定類進(jìn)行操作，不影響原先的類名。
<body>
<div class="one"></div>
<script>
//追加類名，覆蓋原來(lái)的類名
var one = document.querySelector(".one");
one.className = "two";
//addClass相當(dāng)于追加類名，不影響以前的類名
$(".one").addClass("two");
//移除two這個(gè)類名
//$(".one").removeClass("two");
</script>
</body>四、顯示隱藏效果
1、顯示語(yǔ)法
show ([speed,[easing],[fn]])
顯示參數(shù)
（1）參數(shù)都可以省略，無(wú)動(dòng)畫直接顯示。
( 2 ) speed :三種預(yù)定速度之一的字符串(“slow”,"norma",or“fast”)或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值
(如:1000)。
( 3 ) easing : (Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“linear”。
( 4 ) fn:回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
2、隱藏語(yǔ)法
hide([speed,[easing],[fn]])
3、切換語(yǔ)法
toggle([speed,[easing],[fn]])
示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>
<script>
$(function(){
$("button").eq(0).click(function(){
$("div").show(1000,function(){
alert(1);
});
});
$("button").eq(1).click(function(){
$("div").hide(1000,function(){
alert(1);
});
});
//一般情況不加參數(shù)，直接顯示隱藏
$("button").eq(2).click(function(){
$("div").toggle(1000);
});
})
</script>
</body>五、滑動(dòng)效果
1、上滑效果語(yǔ)法
slideUp ([speed,[easing],[fn]])
2、下滑效果語(yǔ)法
slideDown([speed,[easing],[fn]])
3、滑動(dòng)切換效果語(yǔ)法
slideToggle ([speed,[easing],[fn]])
示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
display: none;
}
</style>
</head>
<body>
<button>下滑</button>
<button>上滑</button>
<button>滑動(dòng)切換</button>
<div></div>
<script>
$(function(){
//下滑slideDown()
$("button").eq(0).hover(function(){
$("div").slideDown();
})
//上滑slideUp()
$("button").eq(1).hover(function(){
$("div").slideUp();
})
//滑動(dòng)切換slideToggle()
$("button").eq(2).hover(function(){
$("div").slideToggle();
})
})
</script>
</body>4、事件切換
hover([over,]out)
( 1 ) over:鼠標(biāo)移到元素上要觸發(fā)的函數(shù)(相當(dāng)于mouseenter )
( 2 ) out:鼠標(biāo)移出元素要觸發(fā)的函數(shù)（相當(dāng)于mouseleave )
六、動(dòng)畫隊(duì)列及其停止排隊(duì)方法
1、動(dòng)畫或效果隊(duì)列
動(dòng)畫或者效果一旦觸發(fā)就會(huì)執(zhí)行，如果多次觸發(fā)，就造成多個(gè)動(dòng)畫或者效果排隊(duì)執(zhí)行。
2、停止排隊(duì)
stop()
(1 ) stop()方法用于停止動(dòng)畫或效果。
(2)注意:stop()寫到動(dòng)畫或者效果的前面，相當(dāng)于停止結(jié)束上一次的動(dòng)畫。
<script>
$(function(){
//下滑slideDown()
$("button").eq(0).hover(function(){
$("div").stop().slideDown();
})
//上滑slideUp()
$("button").eq(1).hover(function(){
$("div").stop().slideUp();
})
//滑動(dòng)切換slideToggle()
$("button").eq(2).hover(function(){
$("div").stop().slideToggle();
});
});
</script>七、淡入淡出效果
1、淡入效果語(yǔ)法
fadeIn([speed,[easing],[fn]])
淡入效果參數(shù)
(1)參數(shù)都可以省略。
( 2 ) speed :三種預(yù)定速度之一的字符串(“slow”,“normal”,or"fast”)或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如
∶1000)。
( 3 ) easing : (Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“linear”。.
( 4 ) fn:回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
2、淡出效果語(yǔ)法
fadeout([speed,[easing],[fn]])
3、淡入淡出切換效果語(yǔ)法
fadeToggle([speed, [easing],[fn]])
4、漸進(jìn)方式調(diào)整到指定的不透明度
fadeTo ([[speed],opacity,[easing],[fn]])
2.效果參數(shù)
( 1 ) opacity透明度必須寫，取值0~1之間。
( 2 ) speed :三種預(yù)定速度之一的字符串(“slow”,"normal" ,or“fast”)或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如∶1000)。必須寫
( 3 ) easing : (Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“linear”。
( 4 ) fn:回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
示例：
<style>
div{
width: 100px;
height: 100px;
background-color: aquamarine;
display: none;
}
</style>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出</button>
<button>修改不透明度</button>
<div></div>
<script>
$(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.5);
});
});
</script>
</body>八、自定義動(dòng)畫animate
語(yǔ)法：
animate(params, [speed],[easing],[fn])
參數(shù)
( 1 ) params:想要更改的樣式屬性，要以對(duì)象的形式傳遞，必須寫。屬性名可以不用帶引號(hào)，如果
是復(fù)合屬性則需要采取駝峰命名法borderLeft。其余參數(shù)都可以省略。
( 2 ) speed :三種預(yù)定速度之一的字符串(“slow”,"normal”,or“fast”)或表示動(dòng)畫時(shí)長(zhǎng)的毫秒數(shù)值(如
∶1000)。
( 3 ) easing : (Optional)用來(lái)指定切換效果，默認(rèn)是“swing”，可用參數(shù)“linear”。
( 4 ) fn:回調(diào)函數(shù)，在動(dòng)畫完成時(shí)執(zhí)行的函數(shù)，每個(gè)元素執(zhí)行一次。
示例：
<style>
div{
//盒子定位
position: absolute;
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<button>動(dòng)起來(lái)</button>
<div></div>
<script>
$(function(){
$("button").click(function(){
$("div").animate({
left: 300,
top: 200,
opacity: 0.4,
width: 200,
height: 200
},500);
});
});
</script>
</body>總結(jié)
到此這篇關(guān)于jQuery操作css方法的文章就介紹到這了,更多相關(guān)jQuery操作css方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
33個(gè)優(yōu)秀的 jQuery 圖片展示插件分享
這篇文章收集了33個(gè)優(yōu)秀的 jQuery 圖片插件分享給大家。2012-03-03
使用jQuery+HttpHandler+xml模擬一個(gè)三級(jí)聯(lián)動(dòng)的例子
昨天同學(xué)問(wèn)我有關(guān)如何快速讀取多層級(jí)xml文件的問(wèn)題，于是我就使用省、市、縣模擬了一個(gè)三級(jí)聯(lián)動(dòng)的例子，客戶端使用jQuery實(shí)現(xiàn)異步加載服務(wù)器返回的json數(shù)據(jù)，服務(wù)器端則使用XPath表達(dá)式查詢數(shù)據(jù)。2011-08-08
jQuery dateRangePicker插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery dateRangePicker插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)
這篇文章主要介紹了jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)的相關(guān)資料,需要的朋友可以參考下2016-04-04
基于jQuery滑動(dòng)桿實(shí)現(xiàn)購(gòu)買日期選擇效果
這是一款基于jQuery的滑動(dòng)桿購(gòu)買日期選擇插件，它的外觀仿的是阿里云的服務(wù)器購(gòu)買日期選擇界面。這款jQuery插件非常適合在一些虛擬產(chǎn)品購(gòu)買頁(yè)面上使用，它可以幫助你的用戶快速選擇產(chǎn)品的購(gòu)買日期，感興趣的朋友跟著小編學(xué)習(xí)吧2015-09-09
jQuery倒計(jì)時(shí)代碼(超簡(jiǎn)單)
本文給大家分享一段超簡(jiǎn)單的代碼基于jquery實(shí)現(xiàn)倒計(jì)時(shí)功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-02-02
本篇文章分享了基于jQuery實(shí)現(xiàn)的幻燈圖片切換效果的部分代碼。感興趣的朋友可以下載實(shí)例運(yùn)行，下面就跟小編一起來(lái)看看吧2016-12-12
jQuery制作input提示內(nèi)容（兼容IE8以上）
這篇文章主要為大家詳細(xì)介紹了jQuery制作input提示內(nèi)容，兼容IE8以上，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
jquery.post用法之type設(shè)置問(wèn)題
這篇文章主要介紹了jquery.post用法之type設(shè)置問(wèn)題,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了基于編寫jQuery的無(wú)縫滾動(dòng)插件實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-08-08