文档章节

jQuery基础 - 改变CSS样式

凯文加内特
 凯文加内特
发布于 2015/02/13 10:48
字数 597
阅读 21004
收藏 8

jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性。其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

$("#61dh a").css('color','#123456');

//这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接。
//.css(‘color’,'#123456');表示把颜色设为'#123456'
$("#61dh a").addClass('className');//添加样式,样式名为className
$("#61dh a").removeClass('className');//删除样式,样式名为className
$("#61dh a").css('display','none');//隐藏,等同于hide()方法
$("#61dh a").hide();//隐藏
$("#61dh a").css('display','block');//显示,等同于show()方法
$("#61dh a").show();//显示

如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给css()方法。示例如下:

ar 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的方法来改变鼠标划过的链接样式。

本文转载自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html

共有 人打赏支持
凯文加内特
粉丝 337
博文 672
码字总数 94457
作品 0
青岛
后端工程师
私信 提问
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1
【jQuery】-----jQuery简介(一)

query在线api文档:http://t.mb5u.com/jquery/ 最新的api文档:http://api.jquery.com 官方网站:http://www.ycku.com 北风网网址:http://www.ibeifeng.com 一.什么是jQuery 1、 什么是DOM...

LYQ1990
2016/06/03
0
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
05/17
0
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
08/03
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

我为什么坚持写作

说写作可能是抬高了自己,目前来说只能是写东西、记录东西、表达观点和情感。 在俞敏洪的公众号上看到过一篇文章,里面讲了一个观点,大概是说写作不求能写出伟大的作品,只是把自己的生活、...

Bob2100
58分钟前
1
0
中国公有云三巨头,同时支持Rancher Kubernetes平台

华为云容器引擎(CCE)、阿里云K8S容器服务(ACK)和腾讯云K8S引擎(TKE),中国公有云三巨头正式全面支持Rancher Kubernetes平台。 Rancher正式宣布扩大对中国领先Kubernetes服务的支持,华...

RancherLabs
今天
1
0
【NLP】【八】基于keras与imdb影评数据集做情感分类

【一】本文内容综述 1. keras使用流程分析(模型搭建、模型保存、模型加载、模型使用、训练过程可视化、模型可视化等) 2. 利用keras做文本数据预处理 【二】环境准备 1. 数据集下载:http:...

muqiusangyang
今天
1
0
nginx 解决session一致性

session 粘滞性 每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题。 upstream backserver {ip_hash;server 192.168.0.14:88;server 192.1...

zhu_kai1
今天
2
0
使用Cloud application Studio在C4C UI里创建下拉列表(dropdown list)

在Cloud Application Studio里新建一个Code List Data Type: 维护Value和描述信息,以及在ABSL里使用的constant值。 保存之后,上述维护的信息会存储到一个名为.codelist 的文件里。激活之后...

JerryWang_SAP
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部