Как силами jquery получить id элемента

В одном из моих проектов мне понадобилось получит id элемента веб страницы при клике на него. Так как к сайту была подключена библиотека jquery, то я и решил получить ид с её помощью. Об этом и пойдёт разговор в данной заметке.

По вопросу как силами получить ид элемента веб страницы я нашёл несколько вариантов реализации. Самые мне понравившиеся я опишу ниже. Для примеров работы кода я сделаю небольшой тестовый стенд. Это будет див c классом class="mytestbox1"(номер в конце будет меняться от номера варианта) и индентификатором с номером каждого варианта, например для первого варианта реализации получения ид через jq id="111". При клике по нашему диву будет выводиться через alert сообщение с номером id. И так приступим.

Вариант 1

Этот вариант на методе jquery attr(). Напомню что attr(), при его использование вернёт нам значение атрибута выбранного объекта вебстраницы.

                                     
$(document).ready(function(){
    $('.mytestbox1').click(function() {
        alert($(this).attr('id'));
    });
});

Вариант 2

Второй вариант основан на использовании селектора jquery this. В использовании this есть небольшой нюанс. Использую this с знаком $ мы получим элемент как бы обёрнутый в jquery, а в this без $ мы получим DOM элемента. Для нашей задачи нам понадобится DOM

                                     
$(document).ready(function(){
    $('.mytestbox2').click(function() {
            alert(this.id);
    });
});

Вариант 3

Третий вариант основан на использовании event. Eventэто объект события. Все события, которые произошли в браузере записываются в него. Это уже получается нативный js. Конструкция event.target возвращает нам элемент по которому произошол клик, а при добавлении к конструкции id мы получаем идентификатор нужного нам элемента.

                                     
$(document).ready(function(){
    $('.mytestbox3').click(function(event) {
        alert(event.target.id);
    });
});