视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
怎样使用jQuery内类名选择器
2020-11-27 19:44:08 责编:小采
文档
 这次给大家带来怎样使用jQuery内类名选择器,使用jQuery内类名选择器的注意事项有哪些,下面就是实战案例,一起来看一下。

一、介绍

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

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

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

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

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

$(".class");

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

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

$("word_orange");

二、应用

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

三、代码

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

四、运行效果

五、运行说明

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

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

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

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS里常见内置函数使用详解

如何使用js封装ajax功能函数与用法

下载本文
显示全文
专题