首页 > web前端 > js教程 > 正文

jquery操作css选择器

黄舟
发布: 2016-12-16 10:47:17
原创
1172 人浏览过

.addClass()
  为每个匹配的元素添加指定的样式类名
  .addClass(className)
    className 为每个匹配元素所有增加的一个或多个样式名
  .addClass(function(index,currentClass))
    函数返回一个或者多个用空格隔开, index 表示参数匹配中的索引位置 this 指向匹配元素集合中的当前元素。
  $("p").addClass("myClass yourClass"); 给p 这个元素添加这两个类名样式。
  $("ul li:last").addClass(function(index){ 
    return "item-"+index;
  }) 在最后一个

  • 元素上加上“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 标签的时候切换样式。
      })

     以上就是jquery操作css选择器的内容,更多相关文章请关注PHP中文网(www.php.cn)! 


  • 相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责声明 Sitemap
    PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!