Содержание

Ключевое слово «this» в деталях

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/object-methods.

  1. Режим конструктора
  2. Метод объекта
    1. Пример
  3. Apply/Call
  4. Простейший вызов
  5. Шпаргалка
    1. 4 варианта вызова

Ключевое слово this в javascript работает своеобразно, не так, как в других языках.

В отличие от PHP, Java, C++ и т.п, значение this в javascript не привязывается статически ни к какому объекту, а зависит от контекста вызова.

Разберем все 4 возможных случая.

Если функция вызывается через new как конструктор объекта, то this ставится на создаваемый объект:

function Animal(name) {
	this. name = name
}

В результате получается объект, инициализированный конструктором, с заполненным свойством name.

Если функция запущена как свойство объекта, то в this будет ссылка на этот объект.

obj.func(параметры)
// или
obj['func'](параметры)

При этом совершенно неважно, откуда эта функция взялась. Важно лишь, какой перед func стоит объект.

Создадим два любых объекта:

vasya = { 
	name: "Василий"
}
dima = { 
	name: "Дмитрий"
}

Определим никак не связанную с ними функцию say:

say = function() { 
	alert("Привет, я "+this.name)
}

Присвоим функцию свойству sayHi для обоих объектов:

vasya.sayHi = say
dima.sayHi = say

И теперь тестовый запуск:

vasya.sayHi()    // =>  "Привет, я Василий"
dima.sayHi()    // => "Привет, я Дмитрий"
// или так
dima['sayHi']()

В обоих случаях запускается одна и та же функция say, которая получает в this объект до точки.

Функцию можно вызвать, используя методы call и apply.

func.apply(obj, [параметры])
func.call(obj, параметр)

При таком вызове this будет установлен в

obj.

Оба метода работают одинаково, но для call аргументы подставляются в вызов, а для apply — передается массив.

function sum(a,b) {
	this.c = a + b
}
var obj = {}
sum.call(obj, 1,2)
// или
sum.apply(obj, [1,2])
alert(obj.c)   // => 3

Вызов через apply удобен тем, что можно самостоятельно сформировать массив аргументов или модифицировать существующий.

say()

При таком вызове this ставится равным глобальному объекту (в браузере это window). Обычно, если функция использует this, то она не подразумевает запуск в таком виде, так что в 90% случаев такое значение

this — результат ошибки в программе, глюк.

Если кратко срезюмировать все вышесказанное, то получится такая вот шпаргалка:

Базовый jQuery для разработчиков WordPress — WordPress Form Builder

Вы не можете долго работать с WordPress, не услышав «просто используйте для этого немного jQuery» в качестве ответа на вопрос о том, как настроить свой сайт WordPress. jQuery — отличная библиотека JavaScript, которую довольно просто использовать для всего: от динамической настройки внешнего вида сайта до более сложного кодирования. В этой статье я расскажу о некоторых основах jQuery, например о том, как нацеливать элементы на странице, изменять их внешний вид и достигать таких событий, как клики.

Если вы не читали мою статью о том, как включить пользовательский JavaScript на свой сайт WordPress, я рекомендую вам прочитать ее, чтобы понять, как загрузить код, использующий jQuery. Но вам, конечно, понадобится файл JavaScript для вашего собственного кода.

Загрузка jQuery в WordPress

Как я уже сказал, WordPress поставляется с копией jQuery, которую предполагают другие плагины и темы. Это также означает, что вам не нужна собственная копия. Почти на каждом сайте уже загружен jQuery, но на всякий случай вы можете указать WordPress загрузить его, например:0003

Посмотреть код на Gist.

Вы можете указать это в файле functions. php вашей или дочерней темы.

Одна очень важная вещь, которую следует помнить о WordPress, заключается в том, что он загружает jQuery в так называемом «режиме отсутствия конфликтов», который не является поведением jQuery по умолчанию. Большинство примеров кода jQuery, которые вы увидите в Интернете, используют $ в качестве псевдонима для jQuery. Но это не работает в неконфликтном режиме, что раздражает, но есть веские причины, по которым WordPress это делает. В результате большую часть времени мы хотим обернуть наш код jQuery в обертку без конфликтов, например:0003

Посмотреть код на Gist.

Конструктор jQuery

Большую часть времени, когда мы используем jQuery, мы создаем объект jQuery с определенной коллекцией элементов HTML, а затем используем этот объект, чтобы воздействовать на них. Мы создаем эту коллекцию с помощью конструктора jQuery. Например, если мы хотим повлиять на все теги p на странице, мы должны начать с $( ‘p’ ) или, если нам нужны все элементы HTML с классом «entry-content», мы должны использовать $( ‘. entry-content ‘ ). Если вы знаете, как нацеливать HTML-элементы с помощью CSS, то это здорово, поскольку почти те же самые правила создания селекторов CSS применяются к нацеливанию элементов с помощью jQuery.

Конструктор jQuery не делает ничего, кроме создания объекта jQuery. Самое интересное начинается, когда мы используем метод jQuery для этого объекта. Например, метод css() применяет изменения CSS. Взгляните на этот пример:

Посмотрите код на Gist.

В этом примере у нас есть два конструктора jQuery. Поскольку они используют разные селекторы, они будут действовать на две разные коллекции. Первый нацелен на «.entry-content», поэтому он будет действовать на два элемента. Второй нацелен на «#post-2», поэтому он повлияет только на элемент с идентификатором «post-2».

Оба являются объектами jQuery и могут делать одно и то же, например использовать метод css() для добавления правил CSS, но они применяются к разным наборам элементов HTML. Это самые важные концепции, которые нужно понять при работе с jQuery — как настроить таргетинг на нужные элементы и понять, что каждый объект имеет одни и те же методы, но разные наборы HTML-элементов.

Я расскажу вам о других забавных методах, которые вы можете использовать, но сначала убедитесь, что вы усвоили эту концепцию. Тогда я рекомендую вам изучить, помимо css(), методы show(), hide() и toggle().

jQuery Events

Последний раздел был полезен для понимания концепции, но не практичен. Вы можете применять правила CSS без jQuery. Имеет смысл использовать jQuery только для динамических изменений контента. Например, если вы хотите показать некоторый контент при нажатии кнопки. В этом случае вы должны использовать свой обычный CSS, чтобы скрыть содержимое, а затем использовать jQuery, чтобы показать его при нажатии кнопки. Или что, если вы хотите скрыть сообщения из индекса сообщений вашего блога при нажатии на ссылку «скрыть»? Это хорошее применение для jQuery.

В последнем абзаце я говорил о том, что нужно что-то делать, когда происходит что-то еще. Более техническим способом сказать это будет «привязка функции к событию». JavaScript — это язык, управляемый событиями. Это позволяет нам реагировать на события в браузере, такие как клики, прокрутка, отправка формы и многое другое. jQuery упрощает «привязку» функций к этим событиям с помощью функции on(). Например, чтобы привязать функцию к щелчку по определенной ссылке, мы должны сделать следующее:

Посмотреть код в Gist.

В приведенном выше коде мы создаем объект jQuery для элемента с идентификатором «important-link», а затем используем метод on() для привязки к событию клика, а затем предоставляем встроенную функцию обратного вызова — функция jQuery будет вызов, когда эта ссылка нажимается. Там можно использовать и другие события — ознакомьтесь с документацией on() — но пока давайте остановимся на щелчке.

Важно отметить, что этот код, как написано выше, не предотвращает поведения ссылки по умолчанию — перехода куда-либо — от возникновения. Но посмотрите, как эта функция имеет аргумент, называемый событием? Это объект с методом preventDefault, который мы можем использовать для предотвращения поведения события по умолчанию, в данном случае навигации. Смотри: Сейчас

Посмотреть код на Gist.

Теперь давайте сделаем с этим что-нибудь практическое. Вот пример размещения кнопки скрытия для сообщения:

Посмотреть код на Gist.

Здесь используются два конструктора. Первый используется для привязки к событию клика по ссылке. Второй, который запускается только после того, как это событие произойдет, скроет элемент с идентификатором «post-7».

Это здорово, но если нам нужно сделать это для всех сообщений на странице, мы не хотим писать один и тот же код снова и снова для каждого сообщения. Вместо этого мы можем настроить таргетинг по классам. Итак, представьте себе этот цикл PHP для вывода сообщений:

Посмотреть код на Gist.

В каждом сообщении есть ссылка для скрытия, но этот элемент имеет класс вместо идентификатора, поэтому мы можем привязать одну функцию к кликам всех этих ссылок. Сложность в том, что мы не хотим скрывать все посты, только один. Эта проблема решаема, но нам нужно изучить два других важных понятия. Во-первых, внутри этих обратных вызовов мы можем получить объект jQuery для элемента, с которым произошло событие, с помощью $(this). Это здорово, потому что это даст нам только один элемент с классом «hide-post» вместо всех.

Еще одна важная вещь, которую следует усвоить, это то, что в jQuery есть методы для изменения текущего набора элементов. Например, в этом случае мы на самом деле хотим скрыть не кнопку ссылки, а окружающий ее div. Этот элемент является его непосредственным родителем, поэтому мы можем использовать parent() для переключения на этот элемент. Взгляните:

Посмотрите код на Gist.

В обратном вызове мы начинаем с $( this ), что повлияет на нажатую ссылку, но затем мы используем parent(), чтобы переключить коллекцию на контейнер, в котором находится ссылка, а затем мы вызываем hide(), чтобы скрыть ее. Проблема решена, и нет необходимости выбирать элементы по идентификатору, что было бы намного сложнее.

Кстати, если бы мы хотели пойти в направлении, противоположном направлению parent(), мы могли бы использовать children() для получения элемента, содержащегося в текущем выделении.

Начало работы с jQuery в WordPress

Caldera Forms использует массу подобного кода для всего: от условной логики до переключения страниц и даже отправки форм на основе AJAX. Это становится довольно сложным, но это основы для начала. Играйте с ними в своей теме или в другом месте и получайте удовольствие.

На следующей неделе я вернусь с еще несколькими практическими примерами использования jQuery для создания более динамичных и интересных сайтов WordPress.

Все изображения милых кошек взяты с Pixabay, лицензии Creative Commons и очаровательны.

40 Исключительные методы и учебные пособия по интерфейсу jQuery

С появлением библиотек и фреймворков JavaScript/веб-приложений создавать интерактивные компоненты для сайта стало намного проще. Для тех, кто не знаком с 9.0079 jQuery — это популярная, высокопроизводительная и компактная библиотека/фреймворк JavaScript. jQuery позволит вам сократить объем кода, который вам нужно написать для устранения особенностей браузера, утечек памяти и повторяющегося кода, предоставив вам набор полезных, высокооптимизированных и тщательно протестированных функций и методов.

В этой статье мы рассмотрим сильные стороны jQuery, позволяющие веб-разработчикам создавать впечатляющие клиентские компоненты пользовательского интерфейса . Ищете ли вы определенный шаблон интерфейса/взаимодействия, построенный на Query (например, вкладки модулей или модальные окна), или вы просто хотите изучить библиотеку, участвуя в пошаговых руководствах — вы сможете найти здесь что-то для ты.

Модальные окна

1. Как создать красивое плавное всплывающее окно с помощью jQuery

В этом учебном пособии по jQuery вы познакомитесь с техникой создания красивого модального окна, которое появляется, когда пользователь щелкает по элементу запуска (в этом случае форма отправляет ввод , но вы можете легко изменить его в другие элементы HTML, такие как ). Учебное пособие также покажет вам, как вы можете обрабатывать события нажатия клавиши , чтобы вы могли включать сочетания клавиш в свой интерфейс. Живая демонстрация

2. Учебное пособие по простому модальному окну jQuery

В этом учебном пособии по модальному окну используется атрибут rel , чтобы указать, открывает ли ссылка модальное окно с использованием встроенного содержимого. Вы увидите несколько популярных методов jQuery в действии, таких как методы .click() и .css() . Live Demo

3. Создание модальных панелей с помощью jQuery

В этом учебном пособии по jQuery обсуждается метод создания модального окна, в дизайне которого реализована плавная деградация для пользователей, у которых не включен JavaScript.

Подсказки

4. Создайте лучшую подсказку с помощью jQuery Awesomeness

В этом руководстве будет показан метод замены встроенных подсказок браузера, которые появляются на таких элементах, как изображения и ссылки с атрибутами заголовка . Live Demo

5. Умные всплывающие подсказки с jQuery

Этот метод всплывающих подсказок проверяет, имеет ли ссылка атрибут title или нет, и если нет, то пропускает его title . Живая демонстрация

6. Всплывающие пузыри Coda

В этом превосходном учебном пособии по jQuery показано, как создавать плавные всплывающие окна, которые появляются при наведении курсора на целевой объект. Демонстрация в реальном времени

Вкладки модулей

7. Создание окна с вкладками для слайдов с помощью jQuery

В этом простом учебном пособии показано, как создать набор интерфейсов вкладок модуля, который перемещает содержимое влево и вправо при нажатии на вкладки. Live Demo

8. Создание интерфейса с вкладками с помощью jQuery

В этом очень подробном пошаговом руководстве показано, как создать интерфейс с вкладками с помощью jQuery. Живая демонстрация

9. Интерфейс с вкладками jQuery

Это превосходное руководство является еще одним вариантом популярного интерфейса с вкладками. Live Demo

10. Вкладки jQuery

Это руководство представлено в формате скринкаста и предназначено для начинающих и дизайнеров. Демонстрация в реальном времени

Демонстрация изображений

11. Создание подписи к скользящему изображению с помощью jQuery

В этом учебном пособии по галерее изображений показан интересный метод взаимодействия, когда подписи скользят вверх, чтобы показать больше информации о конкретном изображении, когда пользователь наводит на него курсор.

12. Перекрестное затухание изображения

В этом руководстве показано, как добавить другое изображение, накладывая его на текущее изображение, когда пользователь наводит на него курсор. Это может быть отличным способом отображения дополнительной информации о конкретном изображении. Демонстрация в реальном времени

13. Простая галерея изображений — способ jQuery

Создайте простую галерею изображений, используя сильные стороны jQuery при перемещении по модели DOM и манипулировании ею. Live Demo

14. Отображение изображения с помощью jQuery

В этом быстром и простом учебном пособии вы узнаете, как скрывать и отображать элементы, отслеживая события окна (в данном случае — наведение курсора мыши).

15. Увеличение встроенного изображения с помощью jQuery

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

16. Галерея слайдеров

В этом учебном пособии по jQuery вы узнаете, как создать скользящую галерею, которая опирается на пользовательский интерфейс jQuery, чтобы упростить работу с темами веб-компонента. Живая демонстрация

17. Простое слайд-шоу изображений jQuery с полупрозрачной подписью

В этом руководстве вы узнаете о концепции настройки непрозрачности элементов, а также об использовании функции setInterval для задержки срабатывания другой функции. Демонстрация в реальном времени

18. BBC Radio 1 Вкладки масштабирования

В этом учебном видеоролике показано, как увеличивать и уменьшать масштаб изображения и открывать интерфейс вкладок модуля, когда пользователь наводит на него курсор. Учебник был вдохновлен сайтом BBC Radio 1, который демонстрирует аналогичный эффект. Живая демонстрация

19. Учебное пособие по слайдеру фотографий

В этом учебном пособии показано, как легко реализовать JS-библиотеку Photo Slider для создания потрясающей, но удобной скользящей фотогалереи. Демонстрация в реальном времени

Взаимодействие с контентом/отображение контента

20. Создание «фильтруемого» портфолио с помощью jQuery

В этом учебном пособии по jQuery вы откроете для себя метод создания галереи изображений, которые можно фильтровать по категориям. Live Demo

21. Как создать супер-пупер новостной скроллер

В этом учебном пособии в формате скринкаста показано, как создать скроллер новостей для отображения динамической ленты новостей, подключенной к RSS-ленте. В этом руководстве также используются PHP и SimplePie для взаимодействия с RSS-каналами.

22. Изменение размера текста с помощью jQuery

Изменение размера текста на веб-странице часто является полезной функцией сайта, помогающей настроить текст на веб-странице вместо использования функций браузера. В этом руководстве рассматривается метод изменения размера текста с помощью jQuery, который будет работать независимо от того, какие единицы размера шрифта вы используете (например, px, em, %).

Live Demo

23. Последовательный список jQuery

В этом руководстве используются манипуляции с DOM для создания сценария jQuery, который заменит ваши неупорядоченные (