jQuery css()选择器使用说明
css選擇器只是jquery中的一個功能罷了,下面我來給各位朋友詳細介紹jQuery css()選擇器使用方法與說明詳解,有需要了解學習的同學可參考。
CSS操作有一個重要的方法:CSS()
CSS()有三個不同的語法,來完成各自的工作:
■$(selector).css(name,value)
■$(selector).css({properties})
■$(selector).css(name)
返回CSS屬性使用CSS(name)返回指定的第一個匹配元素的CSS屬性值:
示例
$(this).css("background-color");
試一試 ? 設置 CSS 屬性和值使用css(name,value),為所有匹配元素設置的CSS屬性:
示例
$("p").css("background-color","yellow");
果我們需要改變多個樣式屬性,我們可以先定義屬性變量,然后直接賦值給css()方法。示例如下:
?var divcss = {
? background: '#EEE',
????? width: '478px',
????? margin: '10px 0 0',
????? padding: '5px 10px',
????? border: '1px solid #CCC'
};
$("#result").css(divcss);
//這里我們先定義了一個CSS樣式屬性變量‘divcss’,這類似于建立一個外部CSS文件。
//然后通過jQuery提供的css()方法,把屬性賦給ID為'#result'的DIV。另外jQuery提供的css()方法還可以用來查看某個元素的css屬性值。例如,我們想查看鏈接的顏色,可以使用下面的代碼:
$("#61dh a").css("color")
//和第一個例子相似,但是這里我們只傳遞一個參數(樣式屬性)最后要介紹的是如何設置鼠標劃過后的鏈接樣式(比如: 顏色)。我們無法使用選擇器直接選擇鼠標劃過狀態下的鏈接,也就是說$("a:hover")是不成立的。因此我們需要用到jQuery提供的事件類方法 - hover()。值得注意的是,hover()方法需要定義兩個函數,一個是鼠標劃過時;另一個是鼠標劃過后。具體方法如下:
$("#61dh a").css('color','#123456');
? $("#61dh a").hover(function(){
? $(this).css('color','#999');
? },
? function(){
? $(this).css('color','#123456');
});
//hover()方法的兩個函數使用用逗號分隔你或許注意到這種方法一點都不簡潔(違背了jQuery的宗旨),其實jQuery提供的hover()方法不是用來改變CSS樣式的。在實際運用中,建議使用添加/移出CSS的方法來改變鼠標劃過的鏈接樣式。
切換樣式
Jquery提供toggleclass()方法控制樣式的切換
$(“p”).toggleclass(“another”);
判斷是否包含某樣式,如果有 返回true 否則 返回 false
$(“p”).hasClass(“another”); 相當于$(“p”).is(“.another”);
jquery如何刪除一個css屬性
可以用class去設置,然后removeClass(),比如說
$("#test").attr("style",{"display":"none"});
如果完全不要就可以使用
?$("#test").attr("style",{"display":"none"});
?
如果完全不要就可以使用
$("#test").removeAttr("style");
?
注意:使用 removeAttr 就可以了。
另外,如果只是顯示和隱藏(不做動畫效果),定義一個 .hide {display:none;},然后使用 addClass() 和 removeClass() 性能會更高。
?
轉載于:https://www.cnblogs.com/hclw/p/3795188.html
總結
以上是生活随笔為你收集整理的jQuery css()选择器使用说明的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JS模拟窗口
- 下一篇: 总结ASP.NET中的各种弹窗