Знакомство с 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, советую лучше всего её изучать сразу на практике.

 
Поделиться в facebook
Facebook
Поделиться в twitter
Twitter
Поделиться в vk
VK
Поделиться в google
Google+
Поделиться в email
Email

Один ответ к “Знакомство с jQuery”

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

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

Группа в VK

Помощь проекту

Обнаружили опечатку?

Сообщите нам об этом, выделите текст с ошибкой и нажмите Ctrl+Enter, будем очень признательны!

Свежие статьи

Похожие статьи

Фреймворк Vue.js

Фреймворк Vue.js

Vue (произносится как view – вью) – это прогрессивный фреймворк для создания пользовательских интерфейсов. Vue позволяет строить приложения с применением архитектурного паттерна MVVM (Model-View-ViewModel). Особенность

 
Фреймворки и библиотеки в JavaScript

Фреймворки и библиотеки в JavaScript

JavaScript — это мультипарадигмальный язык программирования, который поддерживает типы программирования, управляемые событиями, функциональные и обязательные (в том числе объектно-ориентированные и основанные на прототипах). Фреймворки JavaScript

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

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

AJAX расшифровывается как «Асинхронный JavaScript и XML». Под AJAX понимается не одна технология, и она не является новой. На самом деле это группа технологий (HTML,

 
Cookies в JavaScript.

Cookies в JavaScript.

Cookies – это небольшие фрагменты именованных данных, сохраняемые web-браузером и связанные с определенными web-страницами или web-сайтами. Cookies первоначально предназначались для разработки серверных сценариев и на

 

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

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