.className1.0
Соответствует всем элементам страницы с классом className. Селектор по классу является одним из наиболее востребуемых средств jQuery.
Примеры использования:
| $('.someBlock')
| вернет все элементы с классом someBlock.
|
| $('div.someBlock')
| вернет все div-элементы с классом someBlock.
|
| $('div.someBlock:odd')
| вернет все нечетные div-элементы с классом someBlock.
|
| $('#content2 div.someBlock')
| вернет div-элементы с классом someBlock, которые находятся внутри элемента с идентификатором content2.
|
Для поиска элементов по классу, библиотека jQuery использует нативную javascript-функцию getElementsByClassName() (если ее поддерживает браузер).
Примеры
Один элемент страницы может обладать несколькими классами одновременно. Найти такой элемент можно по любому из классов:
~lt~div class="leftBox"~gt~1~lt~/div~gt~
~lt~div class="leftBox commentBox"~gt~2~lt~/div~gt~
~lt~div class="rightBox commentBox"~gt~3~lt~/div~gt~
~lt~script~gt~
var leftBoxElements = $('.leftBox'); // найдет первый и второй элементы
var commentBoxElements = $('.commentBox'); // найдет второй и третий элементы
~lt~/script~gt~
Чтобы найти элемент, который обладает двумя (или более) классами одновременно, нужно перечислить их без пробела:
~lt~div class="leftBox"~gt~1~lt~/div~gt~
~lt~div class="leftBox commentBox"~gt~2~lt~/div~gt~
~lt~div class="rightBox commentBox"~gt~3~lt~/div~gt~
~lt~script~gt~
var leftBoxElements = $('.leftBox.commentBox'); // найдет только второй элемент
~lt~/script~gt~
В действии
Выделим div-элементы с классом someBlock бледно-зеленым цветом фона, а все четные (т.е. с четным индексом) из них, обведем красной рамкой:
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
div, span {
display: block;
width: 50px;
height: 50px;
float: left;
padding: 15px;
margin: 5px;
background-color: #eee;
font-size: 20pt;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="someBlock"~gt~ А ~lt~/div~gt~
~lt~div class="otherBlock"~gt~ Б ~lt~/div~gt~
~lt~div~gt~ В ~lt~/div~gt~
~lt~span class="someBlock"~gt~ Г ~lt~/span~gt~
~lt~div class="someBlock"~gt~ Д ~lt~/div~gt~
~lt~div class="someBlock"~gt~ Е ~lt~/div~gt~
~lt~script~gt~
$( 'div.someBlock' )
.css( 'background-color', '#e0f0e0' )
.filter( ':even' )
.css( 'border', '3px solid red' );
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
См. также
Ссылки
