首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jquery 操作css 选择器

jquery 操作css 选择器

作者头像
用户1197315
发布2018-01-19 16:19:42
9200
发布2018-01-19 16:19:42
举报
文章被收录于专栏:柠檬先生柠檬先生

.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 标签的时候切换样式。   })

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-10-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档