看下面片段：
| 代码如下 | 复制代码 |
| $(function(){ $("div:not(:first)").css("color", "red"); $("div").not(":first").css("color", "red"); $("div:first").nextAll().css("color", "red"); $("div:first").siblings().css("color", "red"); $("div + *").css("color", "red"); $("div ~ div").css("color", "red"); $("div:gt(0)").css("color", "red"); $(this).find("div:gt(0)").css("color", "red"); $("div").filter(":gt(0)").css("color", "red"); $("div").first().nextAll().css("color", "red"); $("div").slice(1).css("color", "red"); }); </script> |
|
例子
使用css(properties)方法
参数properties是一个object，其中定义了class属性名称和值对。这样一次就可以进行多个css属性的设置了。
返回的依然是wrapped set以方便JQuery链式操作。
如：
| 代码如下 | 复制代码 |
|
$('div:eq(0)').css({ 'font-size' : '2em', 'color' : '#cc00ff' |
|
比较郁闷的是,这个Object的属性名必须用引号引起来作为一个字符串，否则是不能被浏览器识别的，attr()类似的方法就无需这样。
同样Object中也可以包含function,如：
| 代码如下 | 复制代码 |
| $('div').css({ 'font-size': function(n) { return (n+2) + 'em'; } }); |
|
例子,div样式名
| 代码如下 | 复制代码 |
|
<script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style> .t1{background:red} </style> <script> var cur; window.onload=function(){ $("li").click(function(){ if(cur == $(this)[0]) return false; if(cur!=null) cur.className = ""; $(this)[0].className = "t1"; cur = $(this)[0]; }) }
$(document).ready(function(){ <script type="text/javascript"> |
|
已经够多了吧？这得益于jQuery强大的选择器和筛选方法。要从四个div选取后三个，可以从集合的第二个div开始选取所有元素，换种说法说是选取除去第一个div的所有元素，还有一种办法就是选取第一个div的所有兄弟元素。正所谓“条条大路通罗马”，可见jQuery的灵活。当然，如果不考虑兼容浏览器的话，最好的方法是使用CSS3选择器。