jQuery-селекторы

Список CSS-селекторов

Простые селекторы

• * — все элементы
• #element — получить элемент по id
• .element — получить элемент по названию класса
• [attr="value"] — получить элемент по значению любого аттрибута

Сложные селекторы

• xy — получить элемент который находится и по селектору x и по селектору y: a.btn, input[name="age"].
• x y — получить элемент по селектору y внутри элемента с селектором x: ul li a, .my-form input[name="age"], .container .header.
• x > y — получить элемент по селектору y, непосредственный родитель которого x: ul > li — не найдёт элементы вложенных списков, form > input — найдёт только инпуты которые лежат в самой форме

Спецификация W3C

jQuery поиск элемента

$el.find(selector)

$('.js-class').find('input');

$el.find(selector) — позволяет найти элемент внутри уже найденного элемента. Это сильно экономит время в случаях, когда нам нужно найти несколько элементов внутри одного родителя.

$el.find(selector)

Хорошо проиллюстрировать это может пример с формой — у формы много различных контроллов, но родитель один:

var $form = $('.js-form');
var $name = $form.find('input[name="name"]');
var $surname = $form.find('input[name="surname"]');
var $age = $form.find('input[name="age"]');

Такие селекторы будут работать быстрее так как браузеру не придётся перебирать всё HTML-дерево для поиска каждого элемента формы.

Методы-фильтры

• $el.first() — найти первый элемент
• $el.eq(index) — найти элемент по позиции
• $el.last() — найти последний элемент

Подробнее — jQuery Filtering

Упражнения

Ajax

Ajax

Asynchronous Javascript and XML

Подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

JSON

Не смотря на название, AJAX обычно использует JSON как формат общения между клиентом и сервером. Так работают Twitter, Facebook, VK, и огромное множество других сайтов.

Получение данных

var url = "https://rawgit.com/shuvalov-anton/ff556601eff32e4947a9/raw/a719b16d192b52c41c845e508da1f00ad15461e9/data.json";
$.get(url, function(data) {
  console.log(data)
});

Документация

Отправка данных

var url = "http://my-server.com/posts";
var data = {};

$.post(url, data, function(data) {
  console.log(data)
});

Документация

Замыкания

Область видимости

var x = 5;
function update() {
  x = 6;
}
update();
x; // 6;

var x = 5
function update() {
  var x = 6;
  x; // 6
}
x; // 5

Область видимости

var x = 5
function update() {
  var x = 6;
  var y = 7;
  x; // 6
  y; // 7
}
x; // 5
y; // undefined

Значение constant нельзя случайно/специально перезаписать. Его можно только получить с помощью функции secret.get()

function secret(x) {
  var constant = 42;
  return {
    get: function() {
      return constnant;
    }
  }
}

Замыкание очень полезно для разграничения приватных и публичных частей javascript-кода. Это основополагающая идея паттерна «Модуль».

function module(options) {

  var state = 42;
  var other = 14;

  function privateMethod() {
    // do something
  }

  // public interface
  return {
    publicMethod: function() {
      // works in private context
    }
  }
}