jquery 操作css 选择器

向右看齐 2023-06-11 05:21 1阅读 0赞

**.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**