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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jquery replace方法去空格
May 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
菊花转动的jquery加载动画效果
Aug 19 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
2014最热门的24个php类库汇总
2014/12/18 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
2016/12/16 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现队列的方法
2015/05/26 Python
python读写json文件的简单实现
2017/04/11 Python
Django 连接sql server数据库的方法
2018/06/30 Python
python取余运算符知识点详解
2019/06/27 Python
python版百度语音识别功能
2019/07/09 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
了解一下python内建模块collections
2020/09/07 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
2014的自我评价
2014/01/13 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
公司总经理岗位职责
2014/03/15 职场文书
关于护士节的演讲稿
2014/05/26 职场文书
先进个人自荐书
2015/03/06 职场文书
团拜会主持词
2015/07/04 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书