Основы jQuery | EasyWebScripts.net

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 взаимодействия с сервером, весомый набор визуальных эффектов и многое другое. Все это я постараюсь осветить в последующих публикациях.

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

Виталик 11.01.10 17:57

Я перечитываю, но не могу понять откуда взялось:
$(this).parent().prev().prev().empty();

Что такое $(this), и как так происходит что при нажатии, удаляется именно вторая ячейка?
Объясните пожалуйста...

L 09.02.10 07:18

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

Артем 17.02.10 00:16

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

GROOM 04.04.10 18:48

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

infiz 28.07.10 22:41

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

Олег 29.09.10 08:15

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

Дмитрий 29.10.10 09:39

Отличная статья!!

от_меня 07.03.11 23:27

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

Егор 23.04.11 13:46

Автор - красавец!

максим 08.08.11 18:40

Хорошая статья,спасибо:)

qwe 25.10.11 16:27

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

Жаслан 24.02.12 16:27

Вот приведённый выше пример со всем кодом. Библиотека 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">
<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>

Если вам помогла или просто понравилась эта статья вы можете отблагодарить автора кликнув по рекламе. Спасибо!

комментировать:

прежде чем писать комментарий убедитесь, пожалуйста, что он не попадает в нижеследующие категории:

не стоит писать "я чайник, помогите ..." или "я начинающий, объясните ..." - уважайте себя! может вы и новичок, но ведь не тупой же! сами вполне способны во всем разобраться, тем более, что материал здесь изложен весьма доступно
не пишите вопросы типа "как мне сделать такую же менюху как наверху?", "куда вставлять этот код?", "как устроен интернет?" и т.д. - уважайте время автора!
комментарии вида "все, что здесь написано - бред" будут оставлены только если будут подписаны "я такой-то, разработчик сайта такого-то с посещаемостью 1000 хостов в день" и т.п. Если вы не согласны с чем-то - обоснуйте, напишите как правильно, а писать простые ругательства не надо, это не забор

прямые оскорбления кого бы то ни было будут удалятся!
здоровая критика приветствуется!

от кого:

jQuery основы

Комментарии: