jquery 操作css 选择器
.addClass()
為每個匹配的元素添加指定的樣式類名
.addClass(className)
className 為每個匹配元素所有增加的一個或多個樣式名
.addClass(function(index,currentClass))
函數返回一個或者多個用空格隔開, index 表示參數匹配中的索引位置 this 指向匹配元素集合中的當前元素。
$("p").addClass("myClass yourClass"); 給p 這個元素添加這兩個類名樣式。
$("ul li:last").addClass(function(index){
return "item-" index;
}) 在最后一個<li> 元素上加上“item-1”樣式。
.css()
獲取匹配元素集合中的第一個元素的樣式屬性計算值或設置每一個匹配元素的一個或多個
css屬性。
.css(propertyName)
propertyName 一個css 屬性名 。 一個或者多個css 屬性組成的數組。
$(this).css("background-color"); 獲取當前元素的背景顏色。
$(this).css(["width","height",color]) 獲取當前元素的 寬 高 字體顏色。
.css(propertyName,value)
propertyName 一個css 屬性名。
value 設置這個css 的屬性值。
.css(propertyName,function)
propertyName 一個css 屬性名。
function 一個用來返回設置值的函數。this,是當前元素。
$('div.example').css('width',function(index){
return index*50;
}) 設置一個匹配元素的寬度增加到較大的值。
$("p").mouseover(function(){
$(this).css("color","red");
}) 當鼠標經過p 元素時文字變成紅色。
$("#box").one("click",function(){
$(this).css("width"," =200")
}) 增加#box 的寬度為200像素。
.hasClass()
確定任何一個匹配的元素是否有被分配給定的(樣式類)
.hasClass(className)
className 要查詢的樣式名。
$("#mydiv").hasClass("foo") 匹配的元素是否含有 foo這個樣式
如果有這個樣式那么就返回true 如果沒有那么就返回false
.removeClass()
移除匹配的元素上面的樣式。
.removeClass([className])
每個匹配元素移除的一個或者多個用空格隔開的樣式名。
$("p").removeClass("myClass yourClass")
.removeClass(function(index,class))
一個函數,返回一個或多個要移除的元素,index 所有匹配的元素集合中的當前的元素。
.toggleClass()
在匹配的元素集合中的每個元素上切換樣式名
.toggleClass(className)
className 在匹配的元素集合中的每個元素上用來切換的一個或多個(用空格隔開)樣式類名。
.toggleClass(className,switch)
switch 一個布爾值,用于判斷樣式是否應該被添加或移除。
.toggleClass([switch])
switch 一個用來判斷樣式類天添加還是移除的布爾值。
$('#foo').toggleClass(className,add0rRemove) 就等同于
if(add0rRemove){
$('#foo').addClass(className);
}else{
$('#foo').removeClass(className)
}
$("p").click(function(){
$(this).toggleClass("highlight");
//點擊當前的p 標簽的時候切換樣式。
})
更多專業前端知識,請上 【猿2048】www.mk2048.com
總結
以上是生活随笔為你收集整理的jquery 操作css 选择器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 移动设备HTML5页面布局
- 下一篇: jquery表单属性筛选元素