jQuery中的類名選擇器（.class）用法簡單示例

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

我們提供的服務有：成都網站設計、成都網站建設、外貿網站建設、微信公眾號開發、網站優化、網站認證、湘橋ssl等。為上1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的湘橋網站制作公司

一、介紹

類名選擇器是通過元素擁有的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）用法簡單示例