jQuery中的类名选择器(.class)用法简单示例


Posted in jQuery onMay 14, 2018

本文实例讲述了jQuery中的类名选择器(.class)用法。分享给大家供大家参考,具体如下:

一、介绍

类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。

在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。

类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择。

CSS类与元素的关系既可以是多对多的关系,也可以是一对多或多对一的关系。简单地说类名选择器就是以元素具有的CSS类名称查找匹配的元素。

类名选择器的使用方法如下:

$(".class");

其中,class为要查询元素所用的CSS类名。

例如,要查询使用CSS类名为word_orange的元素,可以使用下面的jQuery代码:

$("word_orange");

二、应用

在页面中,首先添加两个<div>标记,并为其中的一个设置CSS类,然后通过jQuery的类名选择器选取设置了CSS类的<div>标记,并设置其CSS样式。

三、代码

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //选取DOM元素
  myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色
  myClass.css("color","#FFF");  //为选取的DOM元素设置文字颜色
});
</script>

四、运行效果

jQuery中的类名选择器(.class)用法简单示例

五、运行说明

在上面的代码中,只为其中的一个<div>标记设置了CSS类名称,但是由于程序中并没有名称为myClass的CSS类,所以这个类是没有任何属性的。

类名选择器将返回一个名为myClass的jQuery包装集,利用css()方法可以为对应的div元素设定CSS属性值,这里将元素的背景颜色设置为深红色,文字颜色设置为白色。

类名选择器也可能会获取一组jQuery包装集,因为多个元素可以拥有同一个CSS样式。

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

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
jQuery实现模糊查询的方法分析
May 10 #jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 #jQuery
Vue引入jquery实现平滑滚动到指定位置
May 09 #jQuery
JS文件中加载jquery.js的实例代码
May 05 #jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 #jQuery
基于jQuery.i18n实现web前端的国际化
May 04 #jQuery
You might like
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
smarty缓存用法分析
2014/12/16 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
JavaScript 基础问答三
2008/12/03 Javascript
jquery.validate使用攻略 第一部
2010/07/01 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
wxPython中文教程入门实例
2014/06/09 Python
用python 制作图片转pdf工具
2015/01/30 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python爬取指定微信公众号文章
2018/12/20 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Windows和Linux动态库应用异同
2016/07/28 面试题
五年级英语教学反思
2014/01/31 职场文书
天鹅的故事教学反思
2014/02/04 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android