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实现购物车结算功能
Aug 15 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JS 实现分页打印功能
2018/05/16 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
python爬虫中多线程的使用详解
2019/09/23 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
python如何爬取动态网站
2020/09/09 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
幼儿园园长自我鉴定
2013/10/22 职场文书
实习生岗位职责
2014/04/12 职场文书
开学典礼致辞
2015/07/29 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
React列表栏及购物车组件使用详解
2021/06/28 Javascript
公历12个月名称的由来
2022/04/12 杂记
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python