文档章节

jQuery基础 - 改变CSS样式

凯文加内特
 凯文加内特
发布于 2015/02/13 10:48
字数 597
阅读 20986
收藏 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

共有 人打赏支持
凯文加内特
粉丝 331
博文 667
码字总数 87615
作品 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基础与JavaScript与CSS交互-第五章

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

达叔小生
08/03
0
0
jQuery中文入门指南,翻译加实例,jQuery的起点教程

整理自:http://www.k99k.com/jQuerygettingstarted.html 中文版译者:Keel 此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译(添加我的补充说明)如下。如有相关意见或建议请 ...

晨曦之光
2012/03/09
0
0
回味jQuery系列(1)-选择器

jQuery-选择器浅析 jQuery 最核心的组成部分就是:选择器引擎,选择器引擎Sizzle占了jQuery很大一部分。它继承了CSS 的语法,可以对DOM 元素的标签名、属性名、状态等进行快速准确的选择,并...

xzavier
08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker多容器部署lnmp环境

环境:RHEL7.5 ip:192.168.10.102,主机名:lb02 一、创建web、数据库目录 web网站目录为:/wwwroot,属主属组:www [root@lb02 ~]# mkdir /wwwroot[root@lb02 ~]# useradd -s /sbin/nolo...

人在艹木中
14分钟前
0
0
eclipse运行springboot项目报错‘找不到或无法加载主类’

这是一个很烦躁的问题~,往往困住大家好长时间,然后各种百度。借此,咱将这个问题有可能产生的原因进行一下总结。若有不完善之处欢迎大家在下面留言指出~~ Duang!问题出现 然后开始尝试解决...

Code辉
34分钟前
0
0
springboot oauth2 跨域设置

@Overridepublic void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/security/**") .authentica......

昆虫大侠
36分钟前
0
0
08-利用思维导图梳理JavaSE-泛型

08-利用思维导图梳理JavaSE-泛型 主要内容 1.泛型的基本概念 1.1.定义 1.2.使用前提 1.3.使用泛型的好处 2.泛型的使用 2.1.泛型类定义 2.2.泛型对象定义 2.3.泛型中的构造方法 2.4.泛型方法的...

飞鱼说编程
38分钟前
0
0
Docker 部署 Spring Boot 项目指南

仅想在Docker里运行一个Spring Boot项目,捣鼓了许久。。。 本文主要适用于Windows环境下的Docker 一、运行环境 Windows 10 Maven 3.5 Docker 18.06.1-ce-win73 (19507) 二、创建Spring Boot...

AmosWang
44分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部