Это часть продолжающегося введения новичков в серию веб-программирования jQuery. Часть 1 посвящена основам о том, как включить его в ваш проект, и селекторы. Во второй части мы продолжим базовое использование, а также рассмотрим некоторые методы, которые вы можете выполнять с этими элементами DOM, и некоторые другие языковые основы.
$ ( селектор ). метод ();
Если вы помните из урока 1, это базовая структура манипуляции DOM в jQuery. Конечно, манипуляции с DOM — это не единственное, что вы можете сделать с помощью jQuery, но это самое простое и наиболее распространенное место, поэтому мы выбрали его.
Чтобы быстро повторить, часть выбора этого оператора позволяет вам использовать CSS-подобные имена элементов, классы или идентификаторы для определения местоположения частей DOM. Например, чтобы захватить все <div> с именем класса .hidden , мы бы использовали:
$('div.hidden') Вторая часть этого уравнения — метод выполнения этих DIV, как только мы их нашли (если они вообще существуют или они могут быть только одним «совпадающим» элементом). Помните, jQuery будет когда-либо возвращать только один элемент для выбора идентификаторов, поскольку идентификаторы должны ссылаться на уникальные элементы. Если вы собираетесь иметь более одного объекта, его нужно определить как класс в CSS.
Затем к методам; в любом случае, что вы можете сделать с элементами DOM?
Прежде всего, я познакомил вас с методом .css в прошлый раз, чтобы вы могли использовать его для тестирования. Формат прост:
.css('property','value');
Поэтому все, что можно определить с помощью CSS, можно настроить с помощью jQuery — цвета, прозрачность, местоположение, размер — и это лишь некоторые из них. Изменение является немедленным.
Если вы предпочитаете анимировать изменения CSS, у меня есть для вас отличные новости; есть также метод с именем .animate () . Это немного сложнее, хотя:
.animate({'property':'value'},speed);
В качестве примера:
.animate({'opacity':'0.25','height':'100px'},'fast');
В этот момент вам может быть интересно, для чего нужны фигурные скобки; они называются «литерал объекта» и, как правило, используются для создания списка свойств: пар значений , что-то вроде индексного массива, если вы пришли из других языков. Вы будете часто их использовать в jQuery, поэтому я повторю это еще раз — привыкните к проверке правильности закрытых скобок и скобок!
Проверьте эту страницу для множества рабочих примеров метода animate.
Помимо манипулирования свойствами CSS чего-либо, вы можете настроить его содержимое с помощью . Методы text (), .html () и .val () (val для содержимого элементов формы) . Эти методы действуют как установщики и получатели; если вы не укажете значение, они получат текущее значение. Если вы укажете значение, оно заменит текущее значение.
Вот несколько быстрых примеров:
Получить текущее значение поля имени в форме комментария и присвоить его переменной comment_name :
var commenter_name = $(#comment-form #name).val();
Установите значение <span class = ‘name’> равным значению, извлеченному из commenter_name :
$('span.name').text(commenter_name);
Затем у нас есть широкий выбор методов для клонирования, перемещения, вставки или удаления частей DOM. Ваше воображение — это предел, правда.
Допустим, вы хотели динамически вставлять блок рекламного изображения после каждого третьего абзаца в столбце контента, но вы делаете это в Javascript, чтобы сохранить начальную загрузку страницы. Звучит довольно сложно, правда? Едва…
$(' div#content p :nth-child(3n) '). after('<img src="ad.jpg"/>') ;
Разбивая это, мы попросили jQuery:
- Найдите div с идентификатором «content»
- Найти р содержится в этом div
- Отфильтруйте по каждому 3-му p, используя псевдо-селектор nth-child ( подробнее об этом здесь )
- Вставить произвольный img после каждого соответствующего элемента
Я не могу перечислить все методы здесь, и вы не хотели бы читать это. Дело в том, что есть метод, позволяющий делать практически все, что вы можете себе представить, когда дело доходит до манипуляций, поэтому проверьте API, какой вы можете использовать.
Кроме того, имейте в виду, что может быть несколько способов сделать что-то. Если, например, вы не можете сузить правильный объект до insertAfter (), возможно, подумайте о том, чтобы найти следующего дочернего элемента и использовать вместо него insertBefore () .
Метод цепочки
И наконец, сегодня давайте кратко расскажем о цепочке методов, в основном просто потому, что это круто. Сначала рассмотрим следующие строки кода:
$('nav#menu').fadeIn('fast'); $('nav#menu').addClass('beingShown'); $('nav#menu').css('margin-right','10px');
Это звучит достаточно разумно, верно? Но вы можете сделать то же самое в одной строке:
$('nav#menu').fadeIn('fast').addClass('beingShown').css('margin-right','10px');
Это делает то же самое, и называется цепочкой методов . Поскольку почти все методы jQuery сами возвращают объект jQuery, каждый из них может использовать следующий. Это означает меньше кода — что всегда хорошо, но на самом деле он также работает быстрее.
Почему? Что ж, каждый раз, когда вы вызываете базовую команду и селектор jQuery $ , вы просите его выполнить поиск по дереву DOM в поисках подходящего элемента. Когда вы объединяете методы в цепочку, вам не нужно постоянно возвращаться к DOM, потому что он знает, где они сейчас, и может мгновенно выполнить метод.
Вот и все на сегодня, и я думаю, что мы, вероятно, уже достаточно много рассказали. Теперь вы должны быть вооружены способностью выполнять довольно тяжелые манипуляции с DOM, так что попробуйте, объедините ваши методы и создайте настоящий беспорядок на странице. На данный момент вы захотите поместить свои скрипты в нижний колонтитул, чтобы дать остальной части страницы время для загрузки. На следующей неделе мы рассмотрим вопрос о том, как заставить jQuery делать что-то, только когда все правильно загружено событиями и любопытным случаем анонимных функций.
Если вы только что наткнулись на этот пост, вы, вероятно, какой-то веб-разработчик и, возможно, захотите проверить все наши статьи о WordPress и блогах или даже наши Лучшие плагины для странице.