Знакомство с jQuery.



jQuery — это библиотека JavaScript, в основу которой положено взаимодействие JavaScript и HTML. Она позволяет легко получить доступ к любому элементу DOM, с ее помощью обращаются к атрибутам и содержимому элементов DOM, а также производят различные манипуляции. Также, библиотека jQuery для работы с Ajax предоставляет удобный API.

Цель jQuery состоит в том, чтобы сделать намного легче использование JavaScript на web-сайте.

Установка jQuery

Есть две версии jQuery, доступные для загрузки. Обе версии могут быть загружены с официального сайта jQuery.com.

  1. Производственная версия — для Вашего рабочего веб-сайта, т.к. она минимизирована и сжата.
  2. Версия разработки — для тестирования и разработки (несжатый и читаемый код).

Подключить jQuery можно с помощью тега <script></script> в нужный HTML документ. Также заметьте что его обязательно нужно поместить в секцию <head>. И для удобства поместите загруженный файл в тот же самый каталог страницы, где Вы хотите использовать его.

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

Синтаксис

Синтаксис jQuery адаптирован для того, чтобы выбирать элементы HTML и выполнять с ними некоторые действия. Основной синтаксис:

$(селектор).действие()
  • $ — знак определения/обращения к jQuery.
  • (селектор) служит, чтобы «выбрать (или найти)» элементы HTML.
  • действие() jQuery — действие, которое надо выполнить с элементами.

Селекторы jQuery

Селекторы jQuery используются, чтобы «найти» (или выбрать) элементы HTML на основе их идентификаторов, классов, типов, атрибутов, значений атрибутов и других признаков. Они основаны на существующих CSS селекторах, а также существуют некоторые собственные селекторы. Все селекторы в jQuery начинаются со знака доллара и круглых скобок: $().

Селектор элемента

jQuery селектор элемента выбирает элементы на основании имени элемента. Можно выбрать все элементы тега <p> на странице следующим образом:

$("p")

#id Селектор

jQuery селектор #id использует атрибут идентификатора HTML-тэга, чтобы найти определенный элемент. Идентификатор должен быть уникальным в пределах страницы, таким образом, следует использовать #id селектор, когда нужно найти единственный, уникальный элемент. Например:

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide(); // #test - запись #id селектора
  });
});

Селектор .class

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

$(".test")

Вот еще примеры jQuery селекторов:

СинтаксисОписание
$(«*»)Выбрать все элементы
$(this)Выбрать текущий HTML элемент
$(«p.intro»)Выбрать все элементы <p> с классом «intro»
$(«p:first»)Выбрать первый элемент <p>
$(«ul li:first»)Выбрать первый элемент <li> первого списка <ul>
$(«ul li:first-child»)Выбрать первый элемент <li> каждого списка <ul>
$(«[href]»)Выбрать все элементы с атрибутом href
$(«a[target=’_blank’]»)Выбрать все элементы <a> со значением атрибута target равным «_blank»
$(«a[target!=’_blank’]»)Выбрать все элементы <a> со значением атрибута target НЕ равным «_blank»
$(«:button»)Выбрать все элементы <button> и <input> с типом type=»button»
$(«tr:even»)Выбрать все четные элементы <tr>
$(«tr:odd»)Выбрать все нечетные элементы <tr>


События jQuery

Все действия различных посетителей, на которые может ответить web-страница, называют событиями. Рассмотрим немного примеров методов событий jQuery.

$(document).ready()

Метод $(document).ready() позволяет выполнять функцию, когда документ полностью загружается.

click()

Функция выполняется, когда пользователь щелкает по элементу HTML. Пример:

$("p").click(function(){ // пользователь нажал на текст в теге <p>
  $(this).hide(); // текст скрылся
});

dblclick()

Функция выполняется, когда пользователь дважды щелкает по элементу HTML:

$("p").dblclick(function(){ // пользователь 2 раза нажал на текст в теге <p>
  $(this).hide(); // текст скрылся
});

mouseenter()

Функция выполняется, когда указатель мыши появляется над элементом HTML:

$("#p1").mouseenter(function(){
  alert("Указатель мыши над p1!");
});

mouseleave()

Функция выполняется когда, указатель мыши оставляет элемент HTML:

$("#p1").mouseleave(function(){
  alert("Пока! Теперь вы покинули p1!");
});

mousedown()

Функция выполняется, когда левая кнопка мыши зажимается, в то время как мышь находится над элементом HTML:

$("#p1").mousedown(function(){
  alert("Кнопка мыши зажата над p1!");
});

mouseup()

Функция выполняется, когда левая кнопка мыши отпускается, в то время как мышь находится над элементом HTML:

$("#p1").mouseup(function(){
  alert("Кнопка мыши отпущена над p1!");
});

hover()

Метод hover() принимает две функции и является комбинацией методов mouseenter() и mouseleave(). Первая функция выполняется, когда мышь входит в зону элемента HTML, и вторая функция выполняется когда мышь покидает элемент HTML:

$("#p1").hover(function(){
  alert("Вы над p1!");
  },
  function(){
  alert("Пока! Теперь Вы покинули p1!");
});

focus()

Функция выполняется, когда поле формы получает фокус:

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur()

Функция выполняется, когда поле формы теряет фокус:

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

На этом наше знакомство с jQuery закончено. Я рассказал все самое необходимое для дальнейшего изучения всех тонкостей библиотеки jQuery, советую лучше всего её изучать сразу на практике.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Chinese (Traditional)EnglishJapaneseRussianUkrainian

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: