jQuery功能操作

2015-07-15

Css操作

功能：设置或者修改样式，操作的是style属性。

1 设置单个样式
    name：需要设置的样式名称
    value：对应的样式值
    css(name, value);
    使用案例
    $("#one").css("background","gray");//将背景色修改为灰色
2 设置多个样式

  参数是一个对象，对象中包含了需要设置的样式名和样式值
    css(obj);
    使用案例
    $("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
    });

3 获取样式

    name:需要获取的样式名称
    css(name);
    案例
    $("div").css("background-color");
    注意：获取样式操作只会返回第一个元素对应的样式值。

class操作

1 添加样式 addClass()
    name：需要添加的样式类名，注意参数不要带点.
    addClass(name);
    例子,给所有的div添加one的样式。
    $(“div”).addClass(“one”);
2 移除所有样式 removeClass()
     不带参数，移除所有的样式类
    removeClass()
    例子，移除div所有的样式类
    $(“div”).removeClass();
3 移除单个样式
    name:需要移除的样式类名
    removeClass(“name”);
    例子，移除div中one的样式类名
    $(“div”).removeClass(“one”);
4  判断是否有样式值 hasClass()
    name:用于判断的样式类名，返回值为true false
    hasClass(name)
    例子，判断第一个div是否有one的样式类
    $(“div”).hasClass(“one”);
5 切换样式 toggleClass() 
    toggleClass(name);
    例子
    $(“div”).toggleClass(“one”);

    经验总结：
    1.    如果操作到的样式非常少，可以考虑css方法
    2. 如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
    3.    如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。