Pull to refresh

jQuery in Action. Глава 1. Введение в jQuery.

jQuery
Как я уже писал, я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе :-)

Глава 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 я далеко не эксперт, разбираться начал вместе с вами с прочтения этой книги. Надеюсь, что все у нас получится! При этом если я допустил какие-то неточности, что-то не так понял — прошу прощения, я с радостью все исправлю.

Параллельно выкладываю статьи в своем блоге, там же можно и подфидиться;-)
Tags:jqueryперевод
Hubs: jQuery
Total votes 98: ↑77.5 and ↓20.5 +57
Views19.3K

Popular right now

Основы вёрстки сайтов
June 28, 202120,000 ₽Loftschool
Веб-дизайнер
June 28, 202183,000 ₽GeekBrains
Node.js: серверный JavaScript
June 28, 202127,000 ₽Loftschool
SMM-менеджер
June 28, 202196,900 ₽Нетология
Backend разработчик
June 28, 202137,000 ₽Loftschool

Top of the last 24 hours