jQuery справочник, базовые примеры

Я работаю не так часто с jQuery как с PHP, поэтому постоянно забываю базовый синтаксис. Немного покопавшить в интернете, нашла хороший сервис со списком основных селекторов, событий и т.д.: http://jquery.page2page.ru/tags/ifr.html

Он конечно годится для тех, кто уже работал с jQuery: чтобы освежить память. Но не всегда достаточно вспомнить название, гораздо чаще нужны примеры кода. Поэтому я сделала подборку с наиболее частыми ситуациями:

Выборки

Найдем все элементы p, находящиеся непосредственно внутри всех элементов div на странице:

$("div > p"); 

Найдем все радиокнопки в первой форме на странице :

$("input:radio", document.forms[0]);

Для всех нечётных строк добавим класс odd

$("tr:nth-child(odd)").addClass("odd");

Найдем все нечетные элементы div, находящиеся внутри элементов div с классом news-item, который находится внутри элемента div с id="outer"

$("#outer > div.news-item > p:nth-child(odd)");

Узнать имя тега

if (jQuery('#test').get(0).tagName.toLowerCase()=='span'){...}

Работа с HTML-кодом

Исходный код:

<div id="my-div">
<a href="http://google.com/" id="my-link">Ссылка</a>
</div>

Примеры:

$("#my-div").html();
// Вернет
<a href="#" id="my-link">Ссылка</a>

$("#my-link").attr("href");
// Вернет 
http://google.com/

$("#my-div").append("<strong>Полужирный текст</strong>");

// Результат
<div id="my-div">
  <a href="http://google.com/" id="my-link">Ссылка</a>

  <strong>Полужирный текст</strong>
</div>
 

$("#my-div").empty();
// Результат
<div id="#my-div"></div>
 

$("#my-div").text("<a>Якорь</a>");
// Результат
<div id="#my-div">&lt;a&gt;Якорь&lt;/a&gt;</div>
 

Цепочки

Заполняем скрытый элемент

<div id="divEdit"></div>

текстом и показываем его (чтобы плагин поддерживал цепочку он должен возвращать "return false")

$("#divEdit").html(response)
             .show();

CSS

$("#my-div").css('backgroundColor', "#F00");

$("#my-div").css(

  {
    backgroundColor: "#F00",
    color: "#00F"
  }
);

Массивы, циклы

Возвращаемая функцией $() коллекция является «псевдо»-массивом DOM-элементов. Поэтому можно обратиться к индивидуальным элементам по их индексу

$("p")[0].className = "test";

Примеры цикла

$("p").each(function(){

    alert(this.innerHTML);
  }
);
 
<p>$.each([52, 97], function(index, value) {

  alert(index + ': ' + value);
});

 

(Примеры со статьи: http://www.rsdn.ru/?article/inet/jQuery.xml)

Во время работы у меня и так открыто куча окон и вкладок, поэтому я распечатала этот краткий справочник: с одной строны синтаксис, с другой примеры. Что и вам советую ))) Получилось очень удобно. Файл для распечатки прилагаю: Jquery — краткий справочник

Автор: Земцова Татьяна