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

jquery 操作css 选择器的更多相关文章

  1. JQuery:JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  2. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  3. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  4. jQuery 操作 CSS

    jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleCl ...

  5. JQUERY操作css与css()方法、获取设置尺寸;

    一.jQuery addClass() 方法 向不同的元素添加 class 属性.在添加类时,您也可以选取多个元素 <style> .aa { color:red; }; </sty ...

  6. jquery操作CSS样式全记录

    $(this).click(function(){  if($(this).hasClass(“zxx_fri_on”)){    $(this).removeClass(“zxx_fri_on”); ...

  7. jQuery操作css

    jQuery addClass() 方法 向被选中元素添加class属性,参数为属性值 $("div").addClass("imp"); 也可以同时向多个元素 ...

  8. Jquery操作属性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 转:99%的人都理解错了HTTP中GET与POST的区别

    原贴来自:http://www.techweb.com.cn/network/system/2016-10-11/2407736.shtml GET和POST是HTTP请求的两种基本方法,要说它们的区 ...

  2. Murano Weekly Meeting 2016.06.21

    Meeting time: 2016.June.21 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summary: 1. ...

  3. 深入学习webpack(二)

    深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...

  4. Spring Boot实战(3) Spring高级话题

    1. Spring Aware Spring的依赖注入的最大亮点就是你所有的Bean对Spring容器的存在是没有意识的.即你可以将你的容器替换成别的容器. 实际项目中,不可避免地会用到Spring容 ...

  5. 使用Aspose.Cell控件实现Excel高难度报表的生成

    1.使用Aspose.Cell控件实现Excel高难度报表的生成(一) http://www.cnblogs.com/wuhuacong/archive/2011/02/23/1962147.html ...

  6. Python数据类型及常用操作

    Python字符串类型 1.用途: 用来记录有描述性的状态.比如:人名,地址等. 2.定义方式: 创建字符串非常简单,在‘ ’,“ ”,‘’‘ ’‘’内一填写一系列的字符例如:msg='hello' ...

  7. LINQ&EF任我行(二)--LinQ to Object

    (原创:灰灰虫的家http://hi.baidu.com/grayworm)LinQ to Objects是LinQ家庭的核心,其它的LinQ也使用了与LinQ to Objects相同的查询句法.最 ...

  8. 【起航计划 021】2015 起航计划 Android APIDemo的魔鬼步伐 20 App->Intents createChooser

    Intents 这个例子的代码非常简单: public void onGetMusic(View view) { Intent intent = new Intent(Intent.ACTION_GE ...

  9. C#设计模式--工厂模式(创建型模式)

    一.简单工厂模式(UML类图): 核心类代码: public class Calc { public double NumberA { get; set; } public double Number ...

  10. 然之协同系统3.5(OA+CRM+CASH+TEAM)

    平台: Ubuntu 类型: 虚拟机镜像 软件包: mariadb-server 10.0.25 nginx 1.10.0 php7.0.4 collaboration commercial crm ...