Введение в jQuery (часть 2) Методы и функции

Это часть продолжающегося введения новичков в серию веб-программирования jQuery. Часть 1 посвящена основам jQuery. Учебное пособие по jQuery - Начало работы: основы и селекторы Учебное пособие по jQuery - Начало работы: основы и селекторы На прошлой неделе я рассказал о том, насколько важен jQuery для любого современного веб-разработчика и почему он потрясающий. На этой неделе я думаю, что пришло время запачкать руки кодом и узнать, как ... как включить его в ваш проект и селекторы. Во второй части мы продолжим базовое использование, а также рассмотрим некоторые методы, которые можно выполнять с этими элементами DOM, и некоторые другие основные языковые основы..

$ (Селектор) .method ();

Если вы помните из урока 1, это базовая структура манипуляции DOM в jQuery. Конечно, манипуляции с DOM - это не единственное, что вы можете сделать с помощью jQuery, но это самое простое и наиболее распространенное место, поэтому мы выбрали его..

Чтобы быстро повторить, часть выбора этого оператора позволяет вам использовать CSS-подобные имена элементов, классы или идентификаторы для определения местоположения частей DOM. Например, чтобы захватить все с именем класса .скрытый, мы бы использовали:

$ ( 'Div.hidden')

Вторая часть этого уравнения - это метод для выполнения этих DIV, как только мы их найдем (если они существуют вообще или они могут быть только одним “согласование” вещь). Помните, jQuery будет когда-либо возвращать только один элемент для выбора идентификаторов, поскольку идентификаторы должны ссылаться на уникальные элементы. Если вы собираетесь иметь более одного объекта, его нужно определить как класс в CSS..

Затем к методам; что вы можете сделать с элементами DOM в любом случае?

Прежде всего, я познакомил вас с .CSS метод в прошлый раз, чтобы вы могли использовать его для тестирования. Формат прост:

.CSS ( 'свойство', 'значение');

Поэтому все, что можно определить с помощью CSS, можно настроить с помощью jQuery - цвета, прозрачность, местоположение, размер - и это лишь некоторые из них. Изменение является немедленным.

Если вы предпочитаете анимировать изменения CSS, у меня есть для вас отличные новости; есть также метод, называемый .анимации (). Это немного сложнее, хотя:

.анимации ( 'свойство': 'значение', скорость);

В качестве примера:

.анимации ( 'непрозрачность': '0.25', 'высота': '100px', 'быстрый');

В этот момент вам может быть интересно, для чего нужны фигурные скобки; они называются “объектный литерал”, и обычно используются для создания списка стоимость имущества пары, вроде как индексированный массив если вы пришли с других языков. Вы будете часто их использовать в jQuery, поэтому я повторю это еще раз - привыкните к проверке правильности закрытых скобок и скобок!

Посетите эту страницу, чтобы увидеть множество примеров использования метода animate..

Помимо манипулирования свойствами CSS чего-либо, вы можете настроить его содержимое с помощью .Методы text (), .html () и .val () (val для содержимого элементов формы). Эти методы действуют как задаватьи получитьОслабляет; если вы не укажете значение, они получат текущее значение. Если вы укажете значение, оно заменит текущее значение.

Вот несколько быстрых примеров:

Получить текущее значение поля имени в форме комментария и присвоить его переменной comment_name:

var commenter_name = $ (# comment-form # name) .val ();

Установите значение в значение, полученное из COMMENTER_NAME:

. $ ( 'Span.name') текст (COMMENTER_NAME);

Затем у нас есть широкий выбор методов для клонирования, перемещения, вставки или удаления частей DOM. Ваше воображение это предел, на самом деле.

Допустим, вы хотели динамически вставлять блок рекламного изображения после каждого третьего абзаца в столбце контента, но вы делаете это в Javascript, чтобы сохранить начальную загрузку страницы. Звучит довольно сложно, правда? Едва…

$ ('div # content p: nth-child (3n)'). after ('
Кроме того, имейте в виду, что может быть несколько способов сделать что-то. Если, например, вы не можете сузить правильный объект до InsertAfter (), возможно подумайте о поиске следующий ребенок вниз и с помощью InsertBefore () вместо.
Метод цепочки
И наконец, сегодня давайте кратко расскажем о цепочке методов, в основном просто потому, что это круто. Сначала рассмотрим следующие строки кода:
$ ( '# Нав меню') FadeIn ( 'быстрый'). $ ( '# Нав меню') addClass ( 'beingShown'). $ ( '# Нав меню') CSS ( 'Правое поле', '10px').
Это звучит достаточно разумно, верно? Но вы можете сделать то же самое в одной строке:
$ ( '# Нав меню') FadeIn ( 'быстрый') addClass ( 'beingShown') CSS ( 'Правое поле', '10px')...;
Это делает то же самое, и называется метод цепочки. Поскольку почти все методы jQuery сами возвращают объект jQuery, каждый из них может использовать следующий. Это означает меньше кода - что всегда хорошо - но на самом деле он также работает быстрее.
Зачем? Ну, каждый раз, когда вы вызываете базовый JQuery $ Команда и селектор, вы просите его искать в дереве DOM в поисках подходящего элемента. Когда вы объединяете методы в цепочку, вам не нужно постоянно возвращаться к DOM, потому что он знает, где они сейчас, и может мгновенно выполнить метод.
Вот и все на сегодня, и я думаю, что мы, вероятно, уже достаточно много рассказали. Теперь вы должны быть вооружены способностью выполнять довольно тяжелые манипуляции с DOM, так что попробуйте, объедините ваши методы и создайте настоящий беспорядок на странице. На данный момент вы захотите поместить свои скрипты в нижний колонтитул, чтобы дать остальной части страницы время для загрузки. На следующей неделе мы рассмотрим вопрос о том, как заставить jQuery делать что-то, только когда все правильно загружено событиями, и любопытный случай анонимных функций..
Если вы только что наткнулись на этот пост, вы, вероятно, какой-то веб-разработчик и, возможно, захотите проверить все наши статьи о WordPress и блогах или даже нашу страницу «Лучшие плагины для WordPress»..