phpjsJqueryhtmlcssblog

jQuery click function event Клик метод примеры

jQuery метод .click() настало время разобраться в клике в jQuery, рассмотреть все способы сделать клик в jQuery! Отследить и получить нажатие по кнопке в jquery!

Все способы jQuery .click() с примерами

1. Что такое jQuery метод .click()
2. Click в jQuery с использованием идентификатора -> id
3. Click в jQuery с использованием класса -> class
4. Click в jQuery с использованием -> тега

Скопировать ссылку



Что такое jQuery метод .click()

jQuery метод .click() - это тоже самое, что onclick на чистом js! jQuery .click() - это метод с помощью которого можно совершить клик по элементу.


Синтаксис jQuery .click()

Синтаксис метода click в jQuery очень простой! Пишем знак доллара $, далее открываются скобки и внутри ставится селектор ( selector ) - это id либо class. Далее присоединяем клик - это точка со словом .click со скобками и внутри располагаем действие ( script )

$( selector ).click( script )
Скопировать ссылку



Click в jQuery с использованием id

Для иллюстрации работы click в jQuery с использованием id - нам понадобится какая-то кнопка button, или div, или {а}(можно использовать все существующие теги..) внутри кнопки id с каким то значением:

<button id="THE_id">click в jQuery с использованием id</button>

Далее нам понадобится script, который обработает наше нажатие на выше приведенную кнопку. Внутри первых скобок помещаем наш id со знаком решетки THE_id:

$( "#THE_id" ).click(function() {
script...
});

Внутри пишем любой скрипт. который вам требуется... мы получим текст кнопки... что-то же мы должны были сделать...

alert( $("#THE_id").html() );

Соберем весь код вместе:

<button id="THE_id">click в jQuery с использованием id</button>

<script>

$( "#THE_id" ).click(function() {

alert( $("#THE_id").html() );

});

</script>

Пример click в jQuery с использованием id

Для того, чтобы увидеть действие клика в реальности нажмите на кнопку:

click в jQuery с использованием id
Скопировать ссылку



Click в jQuery с использованием -> классаclass

Как использовать click в jQuery если у элемента есть класс!?


Нам опять понадобится какая-то кнопка с классом(пусть будет THEclass), чтобы увидеть реальное действие click в jQuery.

<button class="THEclass">Кнопка button с классом THEclass</button>

Скрипт клика абсолютно аналогичный, что бы приведен выше! Но только внутри первых скобок помести класс и вместо решетки ставим точку - она, как вы знаете обозначает класс в css

И внутри помещаем тот же скрипт script, который выполнит ту же работу!

Соберем весь код клика по кнопке с классом в jQuery:

<button class="THEclass">Кнопка button с классом THEclass</button>

<script>

$( ".THEclass" ).click(function() {

alert( $(".THEclass").html() );

});

</script>

Пример Click в jQuery с использованием -> классаclass

Чтобы увидеть реальный клик по элементу в jQuery нажмите кнопку ниже:

Кнопка button с классом THEclass
Скопировать ссылку



Click в jQuery с использованием -> тега

Предположим что у нас есть уникальный тег на странице и нужно сделать клик по нему!

Нам нужно создать уникальный тег, который на странице больше не повторяется, путь это будет тег rim в честь моего отца:

<rim>Текст в теге rim</rim>

Для того, чтобы скрипт понимал, что это тег, нужно лишь вставить название тега в скрипт!

Как вы уже наверное догадались, что скрипт клика по тегу отличается только содержанием внутри первых скобок!

Далее соберем весь код клика по кнопке вместе:

<rim>Текст в теге rim</rim>

<script>

$( "rim" ).click(function() {

alert($("rim").html());

});

</script>

Пример Click в jQuery с использованием -> тега

Здесь текст с тегом, чтобы увидеть Click в jQuery с использованием -> тега нажмите ниже идущую текст:
Текст в теге rim

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---