JQuery / JQuery UI(User Interface)

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

_____________________________________________________________________________________

Подключение jQuery с помощью google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

_____________________________________________________________________________________

Функция, вызываемая при готовности страницы

$('document').ready( "Now we are anonymous!");

//by the way, you've seen $('document').ready(...)

//before. It is very common in jQuery - the function

//that is passed to `ready` is run when the HTML document

//is ready for javascript to start happening

Методу .ready можно придавать и значение любой функции JS.

_____________________________________________________________________________________

.proxy

jQuery.proxy( function, context )

function The function whose context will be changed.

Context The object to which the context (this) of the function should be set.

jQuery.proxy( context, name )

context The object to which the context of the function should be set.

Name The name of the function whose context will be changed (should be a property of the context object).

This method is most useful for attaching event handlers to an element where the context is pointing back to a different object. Additionally, jQuery makes sure that even if you bind the function returned from jQuery.proxy() it will still unbind the correct function if passed the original.

_____________________________________________________________________________________

Jquery() или $()

The function jQuery() is the most important one in the jQuery library. You will almost always use it through the shortcut, $()

This function has many uses, all of which return a jQuery object.

The most simple use is to turn a regular javascript HTML element into a jQuery one.

var element = document.getElementById('myElement');

//element is now a plain old javascript DOM element

//make element a jQuery object

$element = element;

_____________________________________________________________________________________

Селекторы

The most simple selector selects by tag name. So $('span') would select every span element on the page.

//select all the divs on the page

$allOfTheDivs = $('div');

//select all the links on the page

$allOfTheLinks = $('a');

Passing a tag name as a string to $() will return a jQuery object containing every element that is that type of element.

_____________________________________________________________________________________

Селекторы по id

$element = $('#elementId')

Пример:

//assign $contentDiv to the jQuery object

//containing the div with id contentDiv

$contentDiv = $('#contentDiv');

//assign $entryBox to the jQuery object

//containing the textbox with id entryBox

$entryBox = $('#entryBox');

_____________________________________________________________________________________

Селектор классов

$('.my-class')

//select elements of the class 'important'

$importantElements = $('.important');

//select elements of the class 'active'

$activeElements = $('.active');

_____________________________________________________________________________________

Все селекторы

• Селекторы

Селекторы jQuery | jQuery API

• Категории: Selectors › Basic

Селектор *

Соответствует любому элементу.

Возвращает: Массив элементов.

• Категории: Selectors › Basic Filter

Селектор :animated

Выбирает соответствующие элементы, задействованные в анимации в данный момент.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор префикс E[A|=V]

Выбирает элементы E с атрибутом A, имеющим значение V, либо значение, начинающееся с V, после которого следует дефис (–).

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A*=V]

Выбирает элементы E с атрибутом A, значение которого содержит V.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A~=V]

Выбирает элементы E с атрибутом A, значение которого содержит V, разделенное пробелами.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A$=V]

Выбирает элементы E с атрибутом A, значение которого заканчивается на V.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A=V]

Выбирает элементы E с атрибутом A, имеющим значение V.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A!=V]

Выбирает элементы E, не имеющие атрибута A, либо с атрибутом A, но не имеющим значение V.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A^=V]

Выбирает элементы E с атрибутом A, имеющим значение, начинающееся с V.

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :button

Выбирает любые элементы-кнопки (<button>, <input type=button>, <input type=submit>, <input type=reset>).

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :checkbox

Выбирает все элементы-флажки (<input type=checkbox>).

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :checked

Выбирает все отмеченные элементы-флажки или переключатели (<input type=checkbox>, <input type=radio>).

Возвращает: Массив элементов.

• Категории: Selectors › Hierarchy

Селектор E>F

Выбирает все элементы F, являющиеся прямыми потомками элементов E.

Возвращает: Массив элементов.

• Категории: Selectors › Basic

Селектор E.C

Выбирает все элементы E с именем класса C.

Возвращает: Массив элементов.

• Категории: Selectors › Content Filter

Селектор :contains()

Выбирает элементы, содержащие заданный текст.

Возвращает: Массив элементов.

• Категории: Selectors › Hierarchy

Селектор E F

Выбирает все элементы F, являющиеся потомками элементов-предков E.

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :disabled

Выбирает все элементы форм, которые находятся в неактивном состоянии (disabled - отключены).

Возвращает: Массив элементов.

• Категории: Selectors › Basics

Селектор E

Выбирает все элементы с именем тега E.

Возвращает: Массив элементов.

• Категории: Selectors › Content Filter

Селектор :empty

Выбирает все элементы, которые не имеют ни дочерних элементов, ни текстовых узлов.

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :enabled

Выбирает элементы форм, которые находятся в активном состоянии (не disabled - не отключены).

Возвращает: Массив элементов.

• Категории: Selectors › Basic Filter

Селектор :eq()

Выбирает элемент с указанным порядковым номером (отсчет начинается с 0).

Возвращает: Элемент.

• Категории: Selectors › Basic Filter

Селектор :even

Выбирает все четные элементы и элемент с 0 (нулевым) индексом (т.к. отсчет начинается с 0, то вопреки интуитивному пониманию выбираются первый, третий, пятый и т.д.).

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :file

Выбирает все элементы типа file (<input type=file>).

Возвращает: Массив элементов.

• Категории: Selectors › Child Filter

Селектор :first-child

Селектор :first-child выбирает все только первые дочерние элементы соответствующих родителей.

Возвращает: Массив элементов.

• Категории: Selectors › Basics Filter

Селектор :first

Выбирает первый соответствующий элемент на странице.

Возвращает: Элемент.

• Категории: Selectors › Basic Filter

Селектор :gt()

Выбирает все соответствующие элементы, расположенные на странице после элемента с заданным индексом.

Возвращает: Массив элементов.

• Категории: Selectors › Attribute

Селектор E[A]

Выбирает элементы E с атрибутом A, имеющим любое значение.

Возвращает: Массив элементов.

• Категории: Selectors › Content Filter

Селектор :has()

Выбирает элементы, которые имеют хотя бы одного потомка, соответствующего заданному селектору.

Возвращает: Массив элементов.

• Категории: Selectors › Basic Filter

Селектор :header

Выбирает только элементы - заголовки HTML (<h1>, <h2>, <h3>, ... , <h6>).

Возвращает: Массив элементов.

• Категории: Selectors › Visibility Filter

Селектор :hidden

Выбирает скрытые элементы (не видимые на странице).

Возвращает: Массив элементов.

• Категории: Selectors › Basic

Селектор #id

Выбирает элемент с указанным идентификатором (атрибутом id).

Возвращает: Элемент.

• Категории: Selectors › Form

Селектор :image

Dыбирает элементы форм типа image (<input type=image>).

Возвращает: Массив элементов.

• Категории: Selectors › Form

Селектор :input

Выбирает все элементы форм input, textarea, select и button.

_____________________________________________________________________________________

• Descendent Selector

$("div .thingy")

will select all elements that have the class 'thingy' that are a descendent of a div element

• Child Selector

$(".thingy > a")

will select all links that are the child of an element with the class 'thingy'

• Pseudo-Classes

$("li:first-child")

will select all list-elements that are the first child of their parent.

//select the 'lorem ipsum' paragraph

$loremIpsumP = $("#info>p");

//select all list items that are in the 'info' div

$infoListItems = $('#info li');

_____________________________________________________________________________________

.add()

Метод .add() находит элементы, заданные с помощью входного параметра, или создает их на лету. А затем добавляет найденные (или созданные) элементы к исходному набору jQuery и возвращает модифицированный (объединенный) набор jQuery.

$h1elements = $("h1");

//use add to add the h2 elements to $h1elements

$h1andH2elements = $h1elements.add("h2");

1. Примечание:

С помощью метода .add() можно объединять селекторы по условию ИЛИ. Например,  $('div').add('p')  идентично  $('div, p').

2. Примечание:

При использовании метода .add() в jQuery 1.4 с двумя параметрами (когда вторым аргументом передается context), необходимо помнить, что в данном случае первый аргумент должен быть только селектором jQuery.

 // Сначала установим желтый цвет фона для всех элементов

// <div> в документе, а затем установим красную границу

// вокруг всех элементов <div> и <p>.

$('div').css('background', 'yellow').add('p').css('border',

'2px solid red');

  

// Сначала создаем набор jQuery всех элементов <div>

// на странице, затем создаем новый элемент <p>, добавляем

// его в набор jQuery (но не в DOM-дерево!), а потом добавляем

// ко всем элементам набора сласс с именем blue.

$('div').add('<p>Новый абзац</p>').addClass('blue');

_____________________________________________________________________________________

.last() и .first()

$lastDiv = $('div').last();

Given a jQuery object that represents a set of DOM elements, the .last() method constructs a new jQuery object from the last matching element.

Consider a page with a simple list on it:

<ul>

<li>list item 1</li>

<li>list item 2</li>

<li>list item 3</li>

<li>list item 4</li>

<li>list item 5</li>

</ul>

We can apply this method to the set of list items:

$('li').last().css('background-color', 'red');

The result of this call is a red background for the final item.

_____________________________________________________________________________________

.eq()

//select the third from last div

$thirdFromLastDiv = $('div').eq(-3);

If the integer is positive, it returns the element at that index of the selection (starting at 0).

If the integer is negative, it returns the element that many away from the end (-1 will give the very last element).

For example, to get the 2nd p element, you would use $('p').eq(1); (Since Javascript objects begin indexing at 0)

_____________________________________________________________________________________

.filter()

To filter for li elements in a jQuery selection $listOfElements, you would use $listOfElements.filter("li");

Этот метод принимает в качестве параметра любой допустимый в функции jQuery селектор, но применяется лишь к поднабору элементов, содержащемуся в объекте jQuery. Например, чтобы выбрать все абзацы, а затем оставить в наборе лишь те из них, которые имеют класс . foo, выполните следующую команду: $("p").filter(".foo");

_____________________________________________________________________________________

Not()

Selects all elements that do not match the given selector.

.not(selector)

Исключает из набора те элементы, которые соответствуют селектору selector.

$allTheDivs = $('div');

//select the third div

$thirdDiv = $('div').eq(2);

//use .not() to get all of the divs except the third one

$allButTheThird = $allTheDivs.not($thirdDiv);

_____________________________________________________________________________________

.children()

Метод .children() возвращает новый набор jQuery, состоящий из всех прямых потомков (не текстовых узлов) каждого элемента исходного набора jQuery. Для дополнительной фильтрации найденных дочерних элементов используется селектор, переданный во входном параметре expression.

.children( [expression] )

expression – (строка ) Необязательный параметр - селектор jQuery, с помощью которого производится дополнительная фильтрация соответствующих элементов. Для включения в новый набор элементы должны соответствовать указанному селектору. Если данный параметр опущен, то выбираются все допустимые элементы.

1. Примечание:

Функция .children() возвращает новый набор jQuery, не изменяя первоначальный набор.

2. Примечание:

Функция .children() в отличие от .find(), фильтрует не сами элементы, а их детей и только на первом уровне вложенности.

function getChildren($that) {

var $s = $that.children();

return $s;

}

_____________________________________________________________________________________

.find()