Поиск DOM элементов с помощью jQuery

В этом уроке мы разберем, как искать елементы с помощью jQuery.

У нас есть html файл с подключенным скриптом code, где мы будем писать наш javascript. Давайте подключим скрипт jQuery до нашего скрипта. Таким образом библиотека будет нам доступна, когда мы будем писать наш код

<body>
  <script src='jquery.js'></script>
  <script src='code.js'></script>
</body>

Как же нам использовать jQuery? Когда мы установили библиотеку jQuery у нас в window появилась две переменных jQuery и $. Это то, как мы можем обращатся к нашей библиотеке, чтобы ее использовать. Обычно все использую знак доллар, так как он короче и код получается лаконичнее.

Главный смысл jQuery заключается в том, что как аргумент функции $ мы можем передать строку либо DOM елемент. Тогда jQuery попробует найти его в DOM и вернет не сам DOM елемент, а специальный jQuery обьект на который можно вызывать другие jQuery методы.

Давайте добавим див с классом app

<div class='app'>App</div>

Давайте попробуем найти этот елемент. Я предпочитаю переменные, в которые записаны jQuery елемент начинать с знака $. Это позволяет сразу понимать что внутри.

var $app = $('.app')
console.log($app)

Как мы видим в консоли, мы получили массив, в котором первый елемент является нашим DOM елементом.

Теперь мы можем вызывать jQuery методы прямо на нашу переменную $app, так как это у нас jQuery елемент.

Например давайте поменяем цвет елемента.

var $app = $('.app')
$app.css('color', 'red')

То есть мы вызвали метод jQuery .css, который принимает стиль и значение. Как вы видите, этот код намного лаконичнее, чем мы писали на чистом javascript и мы всегда можем быть уверенны в том, что он работает кроссбраузерно.

Еще jQuery замечателен тем, что после каждом операции мы получаем обратно jQuery елемент. Это значит, что мы можем писать цепочки вызовов.

Например:

var $app = $('.app')

$app.css('color', 'red')
  .css('font-size', '24px')
  .css('border', '1px solid red')

Поиск елементов может так же осуществлятся по тегу, классу, id. Давайте попробуем.

Добавим добавим id к нашему елементу.

<div class='app' id='app'>App</div>

Теперь мы можем искать елемент по id вот так.

var $app = $('#app')

Либо по тегу.

var $app = $('div')

Еще один плюс, если вы заметили, это то, что мы всегда работаем с массивом и применяем стили на все елементы. В данном случае $app массив.

Давайте попробуем создать несколько div елементов с одинаковым классом и поменять их стили.

<div class='app'>App 1</div>
<div class='app'>App 2</div>
<div class='app'>App 3</div>

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

Если у вас что-то не получается, либо возникли вопросы и комментарии, пишите их прямо под этим видео и я обязательно на них отвечу.

#1 Поиск DOM элементов с помощью jQuery