learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
来源:互联网 发布:dm4036解锁网络限制 编辑:程序博客网 时间:2024/05/19 07:44
注:本笔记内容摘自《jQuery基础教程》+ jQuery 1.4.1中文参考
修改内联CSS
.css()方法,这个方法集获取和设置方法于一体。为取得某个样式属性的值,可以为这个方法传递一个字符串形式的属性名,比如.css(‘backgroundColor’)。对于多个单词构成的属性名,jQuery既可以解释连字符版的CSS表示法(如background-color),也可以解释驼峰大小写形式(camel-cased)的DOM表示法(如backgroundColor)。在设置样式属性时,.css方法能够接受的参数有两种,一种是为它传递一个单独的样式属性和值,另一种则是为它传递一个由属性-值对构成的映射(map):
jQuery 1.4.1 API
css(name)----à.css(‘proerty’,’value’)
返回值:String css(name)
概述
访问第一个匹配元素的样式属性。
参数
name String
要访问的属性名称
示例
描述:
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
css(proerties)----à.css({proerty1:”value1”,proerty2:”value2’’})
返回值:jQuery css(properties)
概述
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
参数
Properties Map
要设置为样式属性的名/值对
示例
描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({color: "#ff0011", background: "blue" });
描述:
如果属性名包含 "-"的话,必须使用引号:
jQuery 代码:
$("p").css({"margin-left": "10px", "background-color":"blue" });
示例:
$(document).ready(function(){
$(‘#switcher-large’).click(function(){
var$speech = $(‘div.speech’);
varcurrentSzie = $speech.css(‘fontSize’);
varnum = parseFloat(currentSzie,10);
varunit = currentSize.slice(-2);
if(this.id== ‘switcher-large’){
num *= 1.4;
}else if(this.id == ‘switcher-small’){
Num /= 1.4;
}
$speech.css(‘fontSize’,num+unit);
});
});
通过$(‘div.speech’).css(‘fontSize’)可以轻而易举地取得当前的字体大小,但是包含了度量单位,所以要将这两部分保存到各自的变量中,在乘出新的字体大小后,再重新加上单位。 parseFloat()函数会在一个字符串从左到右的查找一个浮点数,并且会去掉结尾的非数字字符,最终转换为数字。例如字符串12px 转为数字12。
.slice()方法返回字符串中从指定 的字符串开始的一个子字符串。因为这里使用的度量单位(px)是两个字符,所以我们指定子字符串应该从倒数第2个字符开始。
- learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
- learning jQuery 学习笔记八(+jQuery 1.4.1 API)-- 效果-基本的隐藏、显示和效果
- learning jQuery 学习笔记二(+jQuery 1.4.1 API)--DOM遍历方法
- learning jQuery 学习笔记四(+jQuery 1.4.1 API)--简单的事件
- learning jQuery 学习笔记五(+jQuery 1.4.1 API)--复合事件
- learning jQuery 学习笔记六(+jQuery 1.4.1 API)-- 事件捕获+事件冒泡+模仿事件
- learning jQuery 学习笔记十四(+jQuery 1.4.1 API)-- AJAX ----$.ajax([options])
- learning jQuery 学习笔记十五(+jQuery 1.4.1 API)-- AJAX----load(url, [data], [callback])
- learning jQuery 学习笔记十六(+jQuery 1.4.1 API)-- AJAX----$.get() & $.post()
- learning jQuery 学习笔记十七(+jQuery 1.4.1 API)-- 表格操作----三色交替
- learning jQuery 学习笔记九(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----操作属性
- learning jQuery 学习笔记十(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----插入新元素
- learning jQuery 学习笔记十一(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----移动元素
- learning jQuery 学习笔记十二(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----包装元素
- learning jQuery 学习笔记十三(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----复制元素及其它
- jQuery 修改css效果
- jQuery学习(七)jQuery的CSS
- jQuery学习笔记三(jQuery效果)
- SQLServer连接字符串
- 使用Forms实现WebService身份验证
- 配置Oracle9i的归档模式
- SQL 2000升级到SQL 2005 再升级到2005 SP3的出错的问题分析
- 从客户端(?)中检测到有潜在危险的 Request.Path 值
- learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
- 饭了!
- java学习网站
- jQuery选择器完整介绍
- learning jQuery 学习笔记八(+jQuery 1.4.1 API)-- 效果-基本的隐藏、显示和效果
- e文骚句,想到,见到即更!
- 类似这种电容怎么识别3A472J,2E223J,4n7J,10nJ?
- 2011年10大新兴技术
- 一个演示多线程操作及同步的C#程序