jQuery设置div css样式的简单例子

作者：袖梨 2022-11-14

看下面片段：

代码如下 复制代码

$(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");
});

例子

使用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样式名

代码如下 复制代码





  • aaaaa

  • bbb

  • ccc


$(document).ready(function(){
$('span').mouseover(function(){
alert($(this).attr('class'));
});
});

已经够多了吧？这得益于jQuery强大的选择器和筛选方法。要从四个div选取后三个，可以从集合的第二个div开始选取所有元素，换种说法说是选取除去第一个div的所有元素，还有一种办法就是选取第一个div的所有兄弟元素。正所谓“条条大路通罗马”，可见jQuery的灵活。当然，如果不考虑兼容浏览器的话，最好的方法是使用CSS3选择器。

相关文章

精彩推荐