2021-12-15 14:01:07 FAQ - аккордеон, реализованный на html + scss + js. Если не знаешь, как создать такой аккордеон - сохраняй себе и используй.

#webdev_полезное
#webdev_codepen Открыть/Комментировать

2021-12-13 14:00:43 Что такое DOM? Значение объектной модели документа в JavaScript. Часть 4.

querySelectorAll()

Этот метод находит все элементы, соответствующие селектору CSS, и возвращает список всех этих узлов.

Вспомним пример из предыдущей части:

Города России

    
• Москва

    
• Казань

    
• Самара

    
• Омск

Если бы мы хотели найти все элементы

в нашем примере, мы могли бы использовать имя тега, чтобы найти все дочерние элементы

.

let items = document.querySelectorAll(“li”)

Если мы хотим вывести в консоль все элементы
• , мы можем использовать цикл forEach():
  
  items .forEach((item) => {
      console.log(item);
  })
  
   Этот код выведет нам такой список:
  
  
• Москва


• Казань


• Самара


• Омск


В следующей статье мы рассмотрим, как добавить новый элемент в html. Поставь “огонь”, чтобы она вышла быстрее.
Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи
190 views11:00
Открыть/Комментировать

2021-12-11 14:01:00 Vertical menu - вертикальное боковое меню с интересным эффектом при наведении. Реализовано на html + scss + js.

#webdev_полезное
#webdev_codepen Открыть/Комментировать

2021-12-09 14:00:59 Что такое DOM? Значение объектной модели документа в JavaScript. Часть 3.

querySelector()

Вы можете использовать этот метод для поиска элементов с любым селектором CSS.

Давайте создадим такой пример DOM:

Города России

    
• Москва

    
• Казань

    
• Самара

    
• Омск

Если бы мы хотели получить элемент h1, мы могли бы использовать имя тега внутри querySelector():

document.querySelector(“h1”)

Если бы мы хотели получить класс “list”, мы бы использовали “.list” внутри querySelector():

document.querySelector(“.list”)

Точка перед “list” говорит компьютеру, что перед ним название класса. Если бы вы хотели получить элемент по его id, вы бы использовали # перед именем:

document.querySelector(“#cities”)

В следующей статье мы рассмотрим еще один метод. Поставь “огонь”, чтобы она вышла быстрее.

Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи Открыть/Комментировать

2021-12-07 14:00:17 Checkbox group - чекбоксы, стилизованные под плитку. Реализовано на html + scss, никакого js. Можете вставить свои картинки и кастомизировать под себя.

#webdev_полезное
#webdev_codepen Открыть/Комментировать

2021-12-05 14:00:34 Slick slider - один из самых популярных слайдеров на jQuery. Его функционал позволяет реализовать зацикливание, автопроигрывание, эффекты перехода и многое другое. Сохраняй ссылку и используй, когда захочешь установить слайдер на свой сайт.

#webdev_полезное
#webdev_библиотеки Открыть/Комментировать

2021-12-03 14:00:30 Что такое DOM? Значение объектной модели документа в JavaScript. Часть 2.

Как выбрать элементы в документе

Существует несколько различных методов выбора элемента в HTML-документе.

В этой серии мы сосредоточимся на трех методах, первый из них getElementById()

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

Это неверно:

Это первый элемент ‘p’

Это второй элемент ‘p’

Вы должны убедиться, что id уникальны:

Это первый элемент ‘p’

Это второй элемент ‘p’

В JS мы можем получить элемент, сославшись на его id.

document.getElementById("para1")

Этот код получает элемент с id “para1”.

В следующей статье мы поговорим о другом методе. Поставь “огонь”, чтобы она вышла быстрее.

Предыдущие части читай по тегу
 
#webdev_dom
#webdev_статьи Открыть/Комментировать

2021-12-01 14:00:49 Simple CSS Waves - оживи свой сайт спокойными залипательными волнами. Реализовано без каких-либо библиотек. Несколько svg в твоем html коде и анимация на css. 

#webdev_примеры
#webdev_codepen Открыть/Комментировать

2021-11-29 12:31:01 Что такое DOM? Значение объектной модели документа в JavaScript. Часть 1.

Если вы только начали изучать JS, возможно, вы слышали о DOM. Но что это такое на самом деле?

Что такое DOM?

DOM расшифровывается как Объектная модель документа. Звучит сложно, но на самом деле все гораздо проще. DOM рассматривает HTML-документ как дерево узлов. Каждый узел - это HTML-элемент.

Наш документ называется корневым узлом и содержит один дочерний узел -  элемент . Элемент содержит два дочерних элемента - и .

Как у , так и у есть собственные дочерние элементы. На картинке вы видите как раз такое дерево.

Мы можем получить доступ к этим элементам документа и внести в них изменения с помощью JS.

Про то, как работать с DOM с помощью JS читай в следующей части. Поставь “огонь”, чтобы она вышла быстрее.
 
#webdev_dom
#webdev_статьи Открыть/Комментировать

2021-11-27 18:00:23 Переживаешь, что пользователь уйдет с сайта, не дождавшись полной загрузки? Посмотри на коллекцию прелоадеров Collection of CSS3 Animated Pre-loaders и установи один из них на свой сайт. Они такие залипательные, что пользователь и не подумает уйти со страницы. Все реализовано на html + css, jQuery на примере используется только для слайдера.

#webdev_примеры
#webdev_codepen Открыть/Комментировать