jQuery HTML css()方法与css类实例详解


Posted in jQuery onMay 20, 2020

本文实例讲述了jQuery HTML css()方法与css类。分享给大家供大家参考,具体如下:

jQuery css() 方法

返回 CSS 属性

如需返回指定的 CSS 属性的值,请使用如下语法:

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值:

$("p").css("background-color");//只获取 了一个背景颜色
//获取多个
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回第一个 p 元素的 background-color </button>
</body>
$("button").click(function(){
  alert("p1背景颜色 = " + $("p:nth-child(2)").css("background-color"));
  alert("p2背景颜色 = " + $("p:nth-child(3)").css("background-color"));
  alert("p3背景颜色 = " + $("p:nth-child(4)").css("background-color"));
});

nth-child() 选择器默认以 body 作为父标签,所以 :nth-child(1) 是 <h2> </h2>。

当页面的元素特别多,父子关系特别繁杂的时候,不可能一个个去数要的元素是 body 的第几个元素。

另一方面,页面可以动态的,body 下的索引容易变化,用这个方法指定某个元素非常不靠谱。

要选取第几个 p 的方法,正确的应该是这样:

$("p").eq(N) // N 是索引号,从 0 开始

设置 CSS 属性

如需设置指定的 CSS 属性,请使用如下语法:

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值:

$("p").css("background-color","yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性,请使用如下语法:

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size:

$("p").css({"background-color":"yellow","font-size":"200%"});

获取并设置 CSS 类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

实例样式表

下面的样式表将用于本页的所有例子:

.important { font-weight:bold; font-size:xx-large; } 
.blue { color:blue; }

addClass() 方法

下面的例子展示如何向不同的元素添加 class 属性。当然,在添加类时,也可以选取多个元素:

$("button").click(function(){
 $("h1,h2,p").addClass("blue");
 $("div").addClass("important");
});

也可以在 addClass() 方法中规定多个类:

$("button").click(function(){
 $("body div:first").addClass("important blue");
});

removeClass() 方法

下面的例子演示如何在不同的元素中删除指定的 class 属性:

$("button").click(function(){
 $("h1,h2,p").removeClass("blue");
});

toggleClass() 方法

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

$("button").click(function(){
 $("h1,h2,p").toggleClass("blue");
});

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery实现图片平滑滚动详解
Mar 22 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 #jQuery
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
You might like
php计算一个文件大小的方法
2015/03/30 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JavaScript入门基础
2015/08/12 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
python处理按钮消息的实例详解
2017/07/11 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Django设置Postgresql的操作
2020/05/14 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
大学军训通讯稿
2014/01/13 职场文书
迟到检讨书5000字
2014/01/31 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
班组建设经验交流材料
2014/05/12 职场文书
医学生求职信
2014/07/01 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
先进教师事迹材料
2014/12/16 职场文书
西游记读书笔记
2015/06/25 职场文书
小学校园广播稿
2015/08/18 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python