收藏本站帮助飘仙建站网侵权投诉

切换到宽版

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › Jquery工作常用实例——CSS函数使用说明及实例讲解 ...

返回列表发新帖

查看: 3587|回复: 2

[分享] Jquery工作常用实例——CSS函数使用说明及实例讲解

发表于 2013-4-18 10:23:25 | 显示全部楼层 |阅读模式来自中国–北京–北京

jQuery 拥有五种用于 CSS 操作的重要函数：

$(selector).css(name,value) :为匹配元素设置样式属性的值
$(selector).css({properties}) :为匹配元素设置多个样式属性（这种最常用）
$(selector).css(name):获得第一个匹配元素的样式属性值
$(selector).height(value):设置匹配元素的高度
$(selector).width(value):设置匹配元素的宽度

实例：

01	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

[backcolor=rgb(248, 248, 248) !important]

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

<head>

[backcolor=rgb(248, 248, 248) !important]

04	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

05	<title>改变HTML元素的CSS属性</title>

[backcolor=rgb(248, 248, 248) !important]

06	<script type="text/javascript" src="jquery-1.6.1.js"></script>

07	<script type="text/javascript">

[backcolor=rgb(248, 248, 248) !important]

08	$(document).ready(function(){

09	$("#button").click(function(){

[backcolor=rgb(248, 248, 248) !important]

10	$("p").css({"background-color":"#F4FDA4","font-weight":"bold","padding":"5px","font-size":"14px"});

11

})

[backcolor=rgb(248, 248, 248) !important]

12

})

13

</script>

[backcolor=rgb(248, 248, 248) !important]

14

</head>

15

[backcolor=rgb(248, 248, 248) !important]

16

<body>

17	<p>This is a paragraph.</p>

[backcolor=rgb(248, 248, 248) !important]

18	<p>This is another paragraph.</p>

19	<input id="button" type="button" value="Click me" />

[backcolor=rgb(248, 248, 248) !important]

20

</body>

21

</html>

如上，当我们单击"Click me"时，所有的P段落标签内容的css将改变为预定值，执行前是这样的：

This is a paragraph.

This is another paragraph.

执行后将变成这样：

This is a paragraph.

This is another paragraph.

这就是Jquery CSS函数的使用方法，更多的还要多练尝试，不过这个都比较简单，用多了自然就顺手了。

使用说明, 属性值, 操作的, 第一个, 函数

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！

回复

使用道具举报

发表于 2013-4-18 11:06:46 | 显示全部楼层来自中国–河南–郑州

很不错，多谢分享！

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！

回复支持反对

使用道具举报

三部曲网络科技

发表于 2013-8-6 11:07:00 | 显示全部楼层来自中国–广东–深圳

感谢楼主分享哈

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！

回复支持反对

使用道具举报

返回列表发新帖

站长推荐 /1

|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-21 19:30 , Processed in 0.052816 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表