Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Запутался с выборкой класса (https://javascript.ru/forum/jquery/9217-zaputalsya-s-vyborkojj-klassa.html)

DorianLeroy 05.05.2010 12:58

Запутался с выборкой класса
 
Занимаюсь по книжке. Есть примерчик , где объявляются переменные с селекторами:
var target = '.bigLink';
var hoverClass = 'hoverBigLink';
Классы объявлены как обычно.
Не понятно почему target идёт с точкой перед селктором, а hoverClass без...

subzey 05.05.2010 13:06

<telepate_mode>
target — слектор css, а hoverClass — кусок свойства .className
</telepate_mode>

DorianLeroy 05.05.2010 13:34

Всё равно не понял.

Вот функция

$(target).each(function(){
$(this).hover(
function() { $(this).addClass(hoverClass);
status = $(this).find('a').attr('href');},
function() { $(this).removeClass(hoverClass);
status = ' ';
а вот стили:
.bigLink {
background: #F5F5D3;}

.hoverBigLink {
background: url(../images/flames.png) no-repeat right top;
}
Что значит кусок свойства?

subzey 05.05.2010 14:15

Пожалуйста, форматируйте свой код! (http://javascript.ru/formatting)

У элемента может быть установлен аттрибут class, который (ввиду зарезервированности слова) преобразуется в свойство .className.

В этом аттрибуте может содержаться любой текст — значение свойства.

Далее выборка производится по селектору, по синтаксису напоминающему на css-ный.
$(".my-class-name")

Если в тексте, содержащемся в аттрибуте class, будучи разделенным по проблельным символам, встречается "my-class-name", то элемент соответствует выборке.

При этом точка — это конструкция селектора. Функционально вышеприведенный код такой же, как и эти два:
$("*.my-class-name");
$("*[class~=my-class-name]")


Например,
<div class="foo bar my-class-name baz"></div> <!-- будет выбран -->
<div class="foo bar baz"></div> <!-- не будет выбран -->


Таким образом, у каждого элемента могут быть своего рода «метки», не зависящие друг от друга, но от которых сильно зависит поведение элемента. Было бы удобно менять их независимо, а не работать со значением аттрибута как со строкой. Для этого и используются методы addClass и removeClass.

Например,
$(…).attr("class", "foo bar"); // теперь у элемента два «класса», foo и bar;
$(…).addClass("baz"); // а теперь — три: foo, bar и baz;
$(".foo.bar.baz"); // но выборка производится все равно, с точкой, потому что это конструкция языка в селекторе


Часовой пояс GMT +3, время: 10:51.