您好,登錄后才能下訂單哦!
本文實例講述了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選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。