BY-Work经验浇筑

CSS JQuery Backbone

JQuery之CSS方法使用

css(name)

访问第一个匹配元素的样式属性。

$("p").css("color"); //取得第一个段落的color样式属性的值。

css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。

$("p").css({ color: "#ff0011", background: "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({ "margin-left": "10px", "background-color": "blue" });//如果属性名包含 "-"的话，必须使用引号:

css(name, value)

在所有匹配的元素中，设置一个样式属性的值。

var firecrackerStr = vars.cdn + "welcomenationalday/firecracker0#.png";
firecrackerStr = firecrackerStr.replace('#' , 22 );
this.$('#sprite').css({'background':"url("+firecrackerStr+")", 'background-size': "200% 100%"});

css(name, function(index, value))

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

CSS链式写法

注意：，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

CSS显示图片变灰

.图片变灰 (兼容IE6~9，FF3.5+，chrome19+；亦可让其他元素变灰)

img{  
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");   
    filter: gray;
    -webkit-filter: grayscale(100%);
} 

PS： 此法还并不适用于TV上Html页面（2015-12-02）
可以参看页面变灰二三事文章;

JQuery 取第N个元素 ,eq()

jquery中使用eq()方法找到第几个元素或第N个元素，jquery中eq()的使用如下：
eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素。
例子：

$('#test').children().eq(1).css({'display':'inline-block'});

将id为test的元素的第二个子元素样式设置为'display':'inline-block'。
另一种写法:

$(":eq(index)")

如：$("p:eq(1)")
希望该文对您有帮助，注意区分jquery中index的用法。
这里介绍的是根据索引获取元素，那么如何获取元素索引值呢？
参考: http://www.webzhishi.com/jquery-index/

jQuery修改CSS伪元素属性的方法

CSS伪元素（pseudo elements）不是DOM元素，因此你无法直接选择到它们。

假设有如下HTML代码：

<div class="techbrood" id="td_pseudo">techbrood introduction</div>

和CSS代码：

.techbrood:before {
    width: 0;
}

现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%，
有两个方法，一个是添加新的样式：

$('head').append("<style>.techbrood::before{ width:100% }</style>");

（注意该方法将影响所有的class为techbrood的元素）

另外一个方法是为该元素添加新类，并通过设置新类的属性来达到改变伪元素属性的效果：

.techbrood.change:before{
    width: 100%;
}

jQuery代码：

$('#td_pseudo').addClass("change");