jQuery中的類名選擇器（.class）用法簡(jiǎn)單示例

更新時(shí)間：2018年05月14日 10:09:12 作者：chengqiuming

這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡(jiǎn)單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery中的類名選擇器（.class）用法。分享給大家供大家參考，具體如下：

一、介紹

類名選擇器是通過(guò)元素?fù)碛械腃SS類的名稱查找匹配的DOM元素。

在一個(gè)頁(yè)面中，一個(gè)元素可以有多個(gè)CSS類，一個(gè)CSS類又可以匹配多個(gè)元素，如果有元素中有一個(gè)匹配的類的名稱就可以被類名選擇器選取到。

類名選擇器很好理解，在大學(xué)的時(shí)候大部分人一定都選過(guò)課，可以把CSS類名理解為課程名稱，元素理解成學(xué)生，學(xué)生可以選擇多門(mén)課程，而一門(mén)課程又可以被多名學(xué)生所選擇。

CSS類與元素的關(guān)系既可以是多對(duì)多的關(guān)系，也可以是一對(duì)多或多對(duì)一的關(guān)系。簡(jiǎn)單地說(shuō)類名選擇器就是以元素具有的CSS類名稱查找匹配的元素。

類名選擇器的使用方法如下：

$(".class");

其中，class為要查詢?cè)厮玫腃SS類名。

例如，要查詢使用CSS類名為word_orange的元素，可以使用下面的jQuery代碼：

$("word_orange");

二、應(yīng)用

在頁(yè)面中，首先添加兩個(gè)<div>標(biāo)記，并為其中的一個(gè)設(shè)置CSS類，然后通過(guò)jQuery的類名選擇器選取設(shè)置了CSS類的<div>標(biāo)記，并設(shè)置其CSS樣式。

三、代碼

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div class="myClass">注意觀察我的樣式</div>
<div>我的樣式是默認(rèn)的</div>
<script type="text/javascript">
$(document).ready(
function()
{
  var myClass = $(".myClass");   //選取DOM元素
  myClass.css("background-color","#C50210");  //為選取的DOM元素設(shè)置背景顏色
  myClass.css("color","#FFF");  //為選取的DOM元素設(shè)置文字顏色
});
</script>

四、運(yùn)行效果