Главная jQuery Синтаксис jQuery

Синтаксис jQuery

С помощью jQuery мы выбираем (запрашиваем) элементы HTML и выполняем над ними "действия".

Для работы с библиотекой jQuery используется специальный синтаксис для выборки HTML элементов и выполнения некоего действия с ними.

Основной синтаксис:
$(селектор).действие()

  • Знак $ указывает на доступ к jQuery
  • (селектор) для запроса (или поиска) HTML-элементов
  • Метод jQuery дйствие() выполняет заданное действие с найденным элементом

Примеры:
  • $("h3") - получить все <h3> элементы.
  • $("#header") - получение элемента с id="header".
  • $("div#content.photo") - получить все элементы с классом ="photo" которые находятся в элементе div с id="content".
  • $("ul li") - получить все <li> элементы из списка <ul>.
  • $("ul li:first") - получить только первый элемент <li> из списка <ul>.

  • $(this).hide() - скрывает текущий элемент.
  • $("p").hide() - скрывает все элементы <p>.
  • $(".test").hide()- скрывает все элементы с class="test".
  • $("#test").hide() - скрывает элемент с id="test".

Для выполнения действия используется синтаксис:
$(document).ready(function(){ 
   //методы jQuery пишем сюда...
});

или короткая форма 
$(function(){
  //методы jQuery пишем сюда...
});

<button id="mybut" class="red">Нажми</button>
<button id="mybut2" class="red">Нажми 2 раза</button>
<button  onclick="my1_Top()" class="red">быстро Вверх</button>
<button  onclick="my2_Top()" class="red">плавно Вверх</button>

<script>
    $(mybut).click(function() {
      alert("Привет, Мир!");
    });

    $(mybut2).dblclick(function() {
      alert("Двойной клик!");
    });

    function my1_Top() {
      $("html, body").scrollTop(0);
    }

    или вариант без jQuery:        
    function my1_Top() {
      window.scrollTo(0,0);
    }

    function my2_Top () {
      $("html, body").animate({scrollTop:0}, 600); //за 600 мил.сек
    }

    или вариант без jQuery:
    function my2_Top() {    
      window.scroll({
      top: 0, behavior:'smooth' //Плавная прокрутка
      });
    }
</script>