本文实例讲述了 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>
四, 运行效果
五, 运行说明
在上面的代码中, 只为其中的一个 < div > 标记设置了 CSS 类名称, 但是由于程序中并没有名称为 myClass 的 CSS 类, 所以这个类是没有任何属性的.
类名选择器将返回一个名为 myClass 的 jQuery 包装集, 利用 css()方法可以为对应的 div 元素设定 CSS 属性值, 这里将元素的背景颜色设置为深红色, 文字颜色设置为白色.
类名选择器也可能会获取一组 jQuery 包装集, 因为多个元素可以拥有同一个 CSS 样式.
更多关于 jQuery 相关内容感兴趣的读者可查看本站专题:jQuery 页面元素操作技巧汇总,jQuery 常见事件用法与技巧总结,jQuery 常用插件及用法总结,jQuery 扩展技巧总结及jquery 选择器用法总结
来源: http://www.jb51.net/article/140050.htm