Глава 1. Введение в jQuery.
Для чего нужно (нужна, нужен) jQuery – чтобы облегчить работу веб-программиста. С помощью этой библиотеки нам (веб-программистам) проще повысить функциональность наших страниц с минимальным выполнением монотонной работы.
Основы jQuery
В своей основе jQuery ориентировано на работу с элементами HTML страниц.
Основные моменты.
1.1. Wrapper.
В CSS для выбора, например, всех ссылок
<a> внутри абзаца <p> мы писали:p aВ jQuery для этого используется следующее выражение:
$(selector)или
jQuery(selector)Здесь следует отметить, что
$() является алиасом к функцииjQuery(). Она возвращает специальный объект JavaScript, содержащий массив элементов DOM, соответствующий селектору.$(“p a”)Или такой пример: применим эффект fade out для всех элементов
<div> класса notLongForThisWorld. Код будет следующим:$(“div.notLongForThisWorld”).fadeOut();А если мы захотим в добавок к эффекту добавить к этим элементам класс
removed, то напишем так:$(“div.notLongForThisWorld”).fadeOut().addClass(“removed”);Такую цепочку можно продолжать бесконечно.
Но это только малая часть возможности jQuery по работе с селекторами. Еще пара:
$(“body > div”);Селектор выбирает элементы
<div>, дочерние к <body>$(“body > div: has(a)”);То же, но уже выбираем
<div>, содержащие в себе ссылки.$(“a[href$=pdf]”);Выбираем ссылки на PDF файлы.
Не пугайтесь, что вам что-то сейчас непонятно. Более подробно на селекторах мы остановимся в главе 2. Единственный на сейчас вывод, который нужно сделать – jQuery на самом деле мощная штука.
1.2. Функции.
По сути функции jQuery это методы функции jQuery. Но в книге мы их будем называть функцими. А не методами.
$.trim(someString);Здесь мы использовали функцию
trim(). Подробнее функции jQuery будут рассмотрены в 6-й главе.$ это пространство имен. 1.3.The document ready handler
(на английском-то понятно, а как это по-русски сказать… Суть ниже :-)).
Обычный код JavaScript при применении метода
onload начинает работать, когда страничка полностью загрузилась браузером пользователя. Вместе с картинками и прочим. Для работы jQuery достаточно загрузки DOM.1.4. Работа с DOM.
Создавать элементы DOM можно просто передавая функции
$(). Например:$(“<p>Привет!</p>”) ;Или такой пример:
$(“<p>Привет!</p>”).insertAfter(“#followMe”);Как вы догадались,
<p>Привет!</p> появится после элемента с id=”followMe”.1.5. Расширение jQuery.
В jQuery много полезных функций, но, конечно, она не может удовлетворить потребностям всех пользователей. В этом случае библиотеку всегда можно расширить своими собственными функциями.
Смотрим пример:
$.fn.disable = function() {
return this.each(function() {
if(typeof this.disabled != “undefined”) this.disabled = true;
});
}
$.fn.disabled означает, что мы расширяем враппер $ функцией disabled.Затем мы можем уже использовать свою новую функцию:
$(“form#myForm input.special”).disable().addClass(“moreSpecial”);Кроме своих функций к jQuery можно подключать плагины. О них еще будет упомянуто в главе 9.
1.6. Использование jQuery с другими библиотеками.
Использование префиксов
jQuery и, в частности, $, который используется так же библиотекой Prototype, может создать проблем, подумаете вы. Ну, если первый еще нет, то второй точно. Авторы jQuery предвидели такой момент и при совместном использовании нескольких библиотек рекомендуют использовать функцию
noConflict() сразу после подключения других библиотек:jQuery.noConflict();При этом значение
$ будет освобождено jQuery для другой библиотеки.Как вам в целом пост? Хотелось бы услышать ваше мнение, стоит ли продолжать, потому что это мой первый опыт в такого вида постах-переводах, да еще урезанного вида.
Еще хотелось отметить, что в jQuery я далеко не эксперт, разбираться начал вместе с вами с прочтения этой книги. Надеюсь, что все у нас получится! При этом если я допустил какие-то неточности, что-то не так понял — прошу прощения, я с радостью все исправлю.
Параллельно выкладываю статьи в своем блоге, там же можно и подфидиться;-)
Распечатать статью