• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jQuery css()选择器使用说明

jQuery css()选择器使用说明

• 作者：创新互联 文章来源：前端开发部 点击数： 更新时间：2008-12-08
• 　　css选择器只是jquery中的一个功能罢了，下面我来给各位朋友详细介绍jQuery css()选择器使用方法与说明详解，有需要了解学习的同学可参考。
  CSS操作有一个重要的方法：CSS（）
  CSS()有三个不同的语法，来完成各自的工作：
  ■$(selector).css(name,value)
  ■$(selector).css({properties})
  ■$(selector).css(name)
  
  返回CSS属性使用CSS（name）返回指定的第一个匹配元素的CSS属性值：
  示例
  代码如下 复制代码
  $(this).css("background-color");
   
  试一试 » 设置 CSS 属性和值使用css(name,value)，为所有匹配元素设置的CSS属性：
  
  示例
  代码如下 复制代码
  $("p").css("background-color","yellow");
  如果我们需要改变多个样式属性，我们可以先定义属性变量，然后直接赋值给css()方法。示例如下：
  代码如下 复制代码
  var divcss = {
    background: '#EEE',
        width: '478px',
        margin: '10px 0 0',
        padding: '5px 10px',
        border: '1px solid #CCC'
  };
  $("#result").css(divcss);
   
  //这里我们先定义了一个CSS样式属性变量‘divcss’，这类似于建立一个外部CSS文件。
  //然后通过jQuery提供的css()方法，把属性赋给ID为'#result'的DIV。另外jQuery提供的css()方法还可以用来查看某个元素的css属性值。例如，我们想查看链接的颜色，可以使用下面的代码：
  代码如下 复制代码
  $("#61dh a").css("color")
   
  　　//和第一个例子相似，但是这里我们只传递一个参数(样式属性)最后要介绍的是如何设置鼠标划过后的链接样式(比如: 颜色)。我们无法使用选择器直接选择鼠标划过状态下的链接，也就是说$("a:hover")是不成立的。因此我们需要用到jQuery提供的事件类方法 - hover()。值得注意的是，hover()方法需要定义两个函数，一个是鼠标划过时；另一个是鼠标划过后。具体方法如下：
  代码如下 复制代码
  $("#61dh a").css('color','#123456');
    $("#61dh a").hover(function(){
    $(this).css('color','#999');
    },
    function(){
    $(this).css('color','#123456');
  });
  
  //hover()方法的两个函数使用用逗号分隔你或许注意到这种方法一点都不简洁(违背了jQuery的宗旨)，其实jQuery提供的hover()方法不是用来改变CSS样式的。在实际运用中，建议使用添加/移出CSS的方法来改变鼠标划过的链接样式。
  
  切换样式
  Jquery提供toggleclass()方法控制样式的切换
   代码如下 复制代码
  $(“p”).toggleclass(“another”);
   

  
  

  判断是否包含某样式，如果有 返回true 否则 返回 false

  代码如下 复制代码
  $(“p”).hasClass(“another”); 相当于$(“p”).is(“.another”);
   
  jquery如何删除一个css属性
  
  可以用class去设置,然后removeClass(),比如说
  代码如下 复制代码
  $("#test").attr("style",{"display":"none"});
  
  如果完全不要就可以使用
  代码如下 复制代码
  $("#test").removeAttr("style");
  
  注意:使用 removeAttr 就可以了。
  另外，如果只是显示和隐藏（不做动画效果），定义一个 .hide {display:none;}，然后使用 addClass() 和 removeClass() 性能会更高。

• jQuery绑定事件之live()、bind()方法介绍 :上一篇
  jquery 鼠标悬停特效代码 :下一篇