文档章节

jQuery基础 - 改变CSS样式

凯文加内特
 凯文加内特
发布于 2015/02/13 10:48
字数 597
阅读 21017
收藏 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
博文 678
码字总数 103855
作品 0
青岛
后端工程师
私信 提问
[转]精简 jQuery Mobile CSS样式

原文地址:http://xuui.net/librarys/webapps/lite-the-jquery-mobile-css-style.html jQuery Mobile 这个JS 的库用起来很方便。也是最适合搞前端的人用的 WebApp JS库了。 不过其默认主题的...

xu81.com
2012/06/26
3.7K
0
Java程序员从笨鸟到菜鸟之(八十八)跟我学jquery(四)JQuery框架操作元素的属性与样式

在前面几篇博客中,我们初步了解了一下jquery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,...

长平狐
2012/11/12
23
0
一些必看的jQuery导航插件和教程

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

迷路的阿修罗
2010/12/30
0
1
100+个最佳jQuery菜单与下拉菜单示例(1/10)

1) jQuery w菜单/下拉菜单示例教程 此教程是描述一个拥有全部不错的样式动画以及功能的菜单,也许这正式你一直在寻找的。我将细致描述 HTML 与 CSS 。我将假设你了解了 HTML 与 CSS 的知识并...

彭博
2012/04/22
10.1K
7
11 款 jQuery 的复选框和单选框美化插件

作者:Chris Spooner 翻译:Terry li - GBin1.com 英文: jQuery Plugins for Styling Checkbox & Radio Buttons web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的...

小编辑
2011/07/13
2.8K
9

没有更多内容

加载失败,请刷新页面

加载更多

MySQL学习笔记之二

数据库的操作总结就是:增删改查(CURD),今天记录一下基础的检索查询工作。 检索MySQL 1.查询表中所有的记录 mysql> select * from apps;+----+------------+-----------------------+------...

凌宇之蓝
29分钟前
0
0
PaddlePaddle-GitHub的正确打开姿势

GitHub是一个面向开源及私有软件项目的托管平台、也是项目版本管理工具,会使用它是程序员入门的必备技能。PaddlePaddle也不例外,所有的源码及项目进展都在GitHub上开源公布。但对于刚入门写...

深度学习之路
29分钟前
1
0
最强NLP模型BERT可视化学习

摘要: 最强NLP模型谷歌BERT狂破11项纪录,全面超越人类,本文通过可视化带你直观了解它。 2018年是自然语言处理(Natural Language Processing, NLP)领域的转折点,一系列深度学习模型在智...

阿里云官方博客
36分钟前
1
0
导出功能

public void downloadD(HttpServletRequest request, HttpServletResponse res,String contractName, String contractPath) throws IOException {// FileAttach fileAttach = fileA......

卖星星的小矮人
40分钟前
1
0
gradle 打包可执行jar包

group 'android.com'version '1.0-SNAPSHOT'apply plugin: 'java'sourceCompatibility = 1.8repositories { mavenCentral()}jar { manifest { attributes ('Main-......

zdglf
51分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部