Цвет

jQuery с нуля

89₽ 109₽

Категории:

htmljqueryjavascriptjs

В этом скрипте мы рассмотрим самые полезные функции jQuery и рассмотрим для чего он нужен.

jQuery - это библиотека JavaScript для упрощения пользования JS.

Для начала необходимо подключить jquery в хэдере нашей страницы.

<head>
     <script src="jquery-3.7.1.js"></script>
</head>

Давайте теперь ознакомимся с основными принципами jQuery

В jQuery есть селектор и методы для выделенного элемента/группы элементов. Вот простой пример:

$(".myClass").css("margin", "10px 0 0 10px");

В данном примере мы выбрали все элементы с классом .myClass и предали им стиль margin = "10px 0 0 10px"

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

$( )

Обращу ваше внимание, что в таких скобочках без кавычек можно отметить window и document. Всё остальное в кавычках.

$(window)
$(document)
$(document.body)
$("body")

В кавычках пишут id, class, element, element + name.

$("#myId")
$(".myClass")
$("div")
$("div[name='myDivName']")
$("div[name^='my']") див с именем начинающимся с 'my'
$("div[name$='Name']") див с именем, кончающимся на 'Name'
$("div[name*='Div']") див с именем, в котором должно быть Div

Как я уже сказал ранее, jQuery библиотека методов. Например, метод ready(), аргументом которого будет функция.

$(window).ready(function(){

});

Почему же именно функция является аргументом метода ready()?

Да всё очень просто, метод ready() заменяет

window.addEventListener("load", ()=>{

});

Другими словами, любой event listener(addEventListener) должен содержать в себе функцию. Любой метод jQuery, заменяющий это, должен так же содержать функцию.

Есть так же методы, где аргументов вообще нет. Например

$("#btn").click(function(){
$("#myDiv").hide();
});

Методы show() и hide() показывают и скрывают выделенный элемент. Без аргументов.

Один из самых полезных методов, это конечно метод attr(), этот метод заменяет любой указанных атрибут элемента. Пример:

    $("img[name*='avatar']").attr('src', 'images/pfp.png');

Здесь мы устанавливаем путь для картинки src на "images/pfp.png"

Кстати, для jquery не важно какие кавычки вы используете, одинарные или двойные. Но в случае с селектором по имени используйте разные кавычки

$("div[name='block']")
$('div[name="block"]')

Метод each() - тоже один из самых полезнейших. Им можно пройтись по группе элементов, например по классу.

$("ul.contacts>li").each(function(){
    $(this).css("padding", "5px");
});

Тут мы выделили все элементы li в ul с классом contacts. Мы предали ему стиль padding = "5px"

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

.resize() // когда объект изменяется в размерах, часто применяется с $(window)
.addClass("className") // добавить класс элементу
.removeClass("className") // удалить класс элемента
Можно так:
$("#elem").addClass("First").removeClass("Second");
dbclick() // двойное нажатие
mouseenter() // курсор попал на элемент
mouseleave() // курсор ушел с элемента
mousedown() // когда 1,2 или 3 кнопка мыши зажата
mouseup() // кнопка отжата hover(func1(), func2()) // 2 функции: 1)для mouseneter 2) для mouseleave
blur() // для блюра элемента

Больше методов и их аргументы вы найдёте здесь