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实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 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 Memcache 中实现消息队列
2009/11/24 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
Bootstrap输入框组件使用详解
2017/06/09 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
github配置使用指南
2014/11/18 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
解决Mac下使用python的坑
2019/08/13 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
python中append函数用法讲解
2020/12/11 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
销售工作岗位职责
2013/12/24 职场文书
青年文明号事迹材料
2014/01/18 职场文书
小学教师评语大全
2014/04/23 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
高一军训感想
2015/08/07 职场文书
PHP实现两种排课方式
2021/06/26 PHP