jQuery 改变CSS样式基础代码


Posted in Javascript onFebruary 11, 2010

其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开。比如我们要改变链接颜色,我们可以使用下面的代码:

$("#61dh a").css('color','#123456'); 
//这里选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'

如果我们需要改变多个样式属性,我们可以先定义属性变量,然后直接赋值给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的方法来改变鼠标划过的链接样式。
Javascript 相关文章推荐
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
Jul 03 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 #Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 #Javascript
JavaScript 输入框内容格式验证代码
Feb 11 #Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 #Javascript
我遇到的参数传递中 双引号单引号嵌套问题
Feb 11 #Javascript
一段实现页面上的图片延时加载的js代码
Feb 11 #Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 #Javascript
You might like
dedecms系统常用术语汇总
2007/04/03 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
php多重接口的实现方法
2015/06/20 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Vue-router 中hash模式和history模式的区别
2018/07/24 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
整理Python最基本的操作字典的方法
2015/04/24 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
python批量处理txt文件的实例代码
2020/01/13 Python
python对文件的操作方法汇总
2020/02/28 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
雷蛇美国官网:Razer
2020/04/03 全球购物
投资建议书模板
2014/05/12 职场文书
学校百日安全活动总结
2015/05/07 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书