jQuery основы

Этой публикацией я решил открыть цикл статей для тех, кто хочет овладеть фреймворком jQuery. Как всегда я буду стараться быть кратким и приводить как можно больше примеров. Последующие статьи, в принципе, можно рассматривать как вольный перевод документации c http://docs.jquery.com.

Итак, вы решили освоить jQuery, с чего начать? С JavaScript вы, конечно же, уже знакомы, иначе не решили бы. Что еще полезно знать для лучшего понимания этого волшебного фреймворка:

  • CSS селекторы (посмотреть можно здесь)
  • XPath (посмотреть можно здесь)

На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов

CSS и XPath. Поэтому если эти понятия вам знакомы, то считайте, что вы уже на 50% знакомы с jQuery, а если нет — все в ваших руках.

Итак, для начала неплохо бы научиться получать любой нужный нам элемент на странице или группу элементов, отобранную по определенному признаку:

$("div") 					// все div'ы на странице
$("div:first")				// только первый div
$("div:last")				// только последний
$("div:even")				// все четные div'ы
$("div.myclass")			// div имеющий class="myclass"
$("#mydiv")					// элемент с id="mydiv", не обязательно div
$("input:text")				// все элементы input с type="text"
$("input:checkbox:checked")	// все чекбоксы с checked=true
$("div", "#myid") 			// все div'ы, находящиеся в контейнере с id="myid"
$("div.myclass img") 		// img, который находится в div'е с class="myclass"
$("div.myclass, div.my2")	// div'ы имеющие class="myclass" и class="my2"

Список можно продолжать долго, но для этого существует документация (благо у jQuery она превосходная, с примерами и бес лишней писанины), а мы сейчас пытаемся понять суть вопроса. Пытливый взор сразу обратил внимание на конструкцию $() в каждом примере. Что это? Это функция: имя — $ (разве запрещено?), а в круглых скобках — параметры. Теперь становится понятным, для чего нужны CSS и XPath — их конструкции и выступают в качестве параметров для выборки.

Функция $ — это фундамент jQuery, она так или иначе, вызывается всеми его методами. Если это функция, то она может что-то возвращать. А возвращает она как раз массив элементов, выбранных из документа на основе заданных параметров, т.о.

var tmp = $("div");			// можно присвоить значение
alert(tmp.length)			// и посмотреть количество элементов массива

Элементами данного массива можно манипулировать:

$("div").not('.red')		// все div'ы, кроме тех, у которых есть класс "red",
							// т.е. не только class="red", но и class="myclass red"
$("span.green").add("span.gray") 	// в данном случае
							// идентично $("span.green, span.gray"),
							// но бывает, что без add не обойтись
$("div").filter(".red, :first")		// выбирает все дивы, а потом выбирает
							// из них первый и с классом red

В данном примере кроме операций над выборкой элементов вы также познакомились с методами jQuery и способом их применения. Методы вызываются через точку и применяются к массиву, после которого они были вызваны. Методы возвращают новый или модифицированный массив. Количество вызовов методов не ограничено.

$("div") //вернул все div'ы
.not('.red') //отсек div'ы с классом red и вернул остальные
.add('span.green') //добавил к выборке span'ы c классом green
.addClass('myclass') //добавил класс myclass каждому элементу выборки
.removeAttr('title') //удалил атрибут title у каждого элемента выборки (если был)

Методы выполняются в порядке вызова (за исключением ajax методов, которые ожидают ответа сервера) слева направо. Это можно использовать для свободного перемещения по DOM дереву:

<table width="75%" border="1">
	<tr>
		<td>здесь текст</td>
		<td>этот текст будет удален</td>
		<td>а этот нет</td>
		<td><a id="myid">del</a></td>
	</tr>
</table>
$("#myid").click(function (){
	$(this).parent().prev().prev().empty();
});



Думаю, названия методов в предыдущем примере говорят сами за себя, подробнее они будут рассмотрены в соответствующей статье.

Ну вот, пожалуй, и все основы — выбрать нужный элемент (или группу) и произвести над ним нужные действия (читай применить нужный метод). Просто, как все гениальное! Основываясь на двух этих простых вещах jQuery имеет свой гибкий механизм обработки событий и ajax взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

19 Комментарии “jQuery основы

  1. Очень, очень, ОЧЕНЬ доступно объяснено. Спасибо!!!

  2. очень замечательная статья!!!Автору 5++++++

  3. прошелся по всем ссылкам…и еще пройдусь. Все на сайте как-то уютно и с хорошим отношением: текст, оформление, идеи. Сама идея такого обращения к пользователям с просьбой пройтись по ссылкам уже полезна. Спасибо в общем

  4. Я перечитываю, но не могу понять откуда взялось: $(this).parent().prev().prev().empty(); Что такое $(this), и как так происходит что при нажатии, удаляется именно вторая ячейка? Объясните пожалуйста…

  5. Виталик, если я правильно понял… this — объект вызвавший функцию parent — родитель — ссылка priv — ветвь дерева на уровень выше: <td>а этот нет</td> priv — и еще выше: <td>этот текст будет удален</td> empty() — очистили

  6. Классно пишет =) добавляю сайт в избранное 5+

  7. Спасибо автору за статью….и вобще спасибо за то что вы делаете!

  8. Спасибо, все понятно для новичка. Автор молодец. Думаю с помощью ваших статей jQuery дастся легче

  9. Кратко и понятно. Одно плохо — автор похоже забросил свой блог…

  10. Для начала не плохо было бы подключить библиотеку.

  11. Скопировала и вставила ваш пример с таблицей в свой шаблон задав ссылку для .js файла и подключив библиотеку.. но у меня ничего не работает. можно выставить пример который будет работать чтоб последующем я его могла изменить самостоятельно?

  12. Вот приведённый выше пример со всем кодом. Библиотека jQuery (здесь jquery-1.7.1.js) должна быть в папке js, которая, в свою очередь, расположена там же, где файл html. Библиотеку можно скачать тут http://docs.jquery.com/Downloading_jQuery <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> </head> <body> <table width="75%" border="1"> <tr> <td>здесь текст</td> <td>этот текст будет удалён</td> <td>а этот нет</td> <td><a href="#"id="myid">del</a></td> </tr> </table> <script type="text/javascript"> $("#myid").click(function (){ $(this).parent().prev().prev().empty(); }); </script> </body> </html>

  13. Это ОЧЕНЬ замечательная статья! Спасибо автору, все написано очень понятно 🙂

  14. БОЛЬШОЕ СПАСИБО за доступное изложение)) Статья очень хорошая!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *