Как создать свой сайт → Уроки jQuery → Урок 6. Методы для работы с атрибутами и фильтрами

jQuery - Урок 6. Методы для работы с атрибутами и фильтрами

Этот урок начнем, как и было обещано, с рисования шахматной доски. Например вот такой:





Html-код простой:
<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <input type="button" value="Нарисовать доску" onclick="addBoard();"><br><br> <div id="board"></div> </body> </html>
Фукция будет выглядеть так:
function addBoard(){ for (var i = 0; i < 8; i++) { for (var j = 0; j < 8; j++) { if ((i%2==0 && j%2==0)|| (i%2!=0 && j%2!=0)){ $("#board").append('<div class="s_kl"></div>'); } else $("#board").append('<div class="t_kl"></div>'); } } }
В папку images надо положить две картинки с нашими клетками, а страница style.css будет выглядеть так:
#board{ width:400px; } .s_kl, .t_kl{ width:50px; height:50px; float:left; padding:0px; margin:0px; } .s_kl{ background:url('images/sv_kletka.gif'); } .t_kl{ background:url('images/tem_kletka.gif'); }
Это всего лишь пример, возможно, вы это сделали по-другому, тогда посмотрите, чей вариант более оптимальный.

Ну, а сейчас перейдем к теме сегодняшнего урока - методам для работы с атрибутами и фильтрами. Сначала перечислим сами методы, а потом посмотрим примеры:
  • attr(name) - обеспечивает доступ к значению указанного атрибута первого элемента в наборе.
    Пример:
    var a=$("i").attr("title"); $("div").text(a);
    Данная инструкция найдет первый элемент в тегах i, найдет атрибут title этого элемента и добавит его значение в div.


  • attr(properties) - установит атрибуты во всех отобранных элементах.
    Пример:
    $("img").attr({src:"images/pict.gif", alt:"рисунок"});
    Данная инструкция найдет все картинки и установит им соответствующие атрибуты.


  • attr(key,value) - установит значение (value) атрибута (key) для всех отобранных элементов.
    Пример:
    $("button").attr("disabled", "disabled");
    Данная инструкция установит для всех кнопок значение "disabled" атрибута "disabled".


  • removeAttr(name) - удалит указанный атрибут в всех элементов.
    Пример:
    $("img").removeAttr("alt");
    Данная инструкция удалит атрибут "alt" у всех картинок.


  • hasClass(class) - возвращает истину (true), если указанный класс присутствует хотя бы в одном из элементов.
    Пример:
    if ($("p:last").hasClass("selected")) $(this).css("background","blue");
    Данная инструкция сделает цвет фона последнего абзаца синим, если у него класс "selected".


  • filter(expr) - ограничивает элементы, к которым следует что-либо применить.
    Пример:
    $("p").filter(".blue").css("background","blue");
    Данная инструкция сделает цвет фона синим, только у тех абзацев, которые имеют класс "blue".


  • not(expr) - обозначает элементы, к которым не следует что-либо применить.
    Пример:
    $("p").not(".blue").css("background","blue");
    Данная инструкция сделает цвет фона синим у всех параграфов кроме тех, что имеют класс "blue".


  • is(expr) - возвращает истину (true), если хотя бы один из элементов соответствует выражению.
    Пример:
    if ($(this).is(":last-child")) $("p").text("последний");
    Данная инструкция добавит в параграф текст "последний", только если проверяемый элемент последний.


  • slice(start, end) - отбирает поднабор из набора элементов.
    Пример:
    $("p").slice(1,4).css("background","blue");
    Данная инструкция сделает цвет фона синим у всех параграфов с 1 по 4.


Давайте для примера, нарисуем на нашей доске шашки, например, вот так:




Html-код:
<html> <head> <title>jQuery html</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <input type="button" value="Нарисовать доску" onclick="addBoard();"> <input type="button" value="Расставить шашки" onclick="addDraughts();"><br><br> <div id="board"></div> </body> </html>
Фукция addBoard() нам уже знакома, а код функции addDraughts() будет выглядеть так:
function addDraughts(){ $("div").filter(".t_kl").slice(0,12).append('<img src="images/tem_shashka.gif">'); $("div").filter(".t_kl").slice(20,32).append('<img src="images/sv_shashka.gif">'); }
В папку images предварительно надо положить две картинки с нашими шашками (tem_shashka.gif и sv_shashka.gif).

Обратите внимание, здесь мы снова используем цепочку вызовов: сначала отбираем все темные клетки (filter()), а затем уже из них отбираем необходимые (slice()) и в них вставляем картинки с шашками (append()).

Согласитесь, что код компактный и понятный. Ну разве ли jQuery не прелесть?



Предыдущий урок Вернуться в раздел Следующий урок 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.