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

时间：2014-04-16 编辑：简简单单来源：一聚教程网

看下面片段：

代码如下

复制代码

$(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

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

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

上一个：去除phpcms内容标签的文章标题省略号
下一个： js中undefined与null的例子对比

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程