9189

jQuery - библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML

Практическая работа

Информатика, кибернетика и программирование

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

Русский

2013-02-25

34.95 KB

8 чел.

JQuery

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');

_____________________________________________________________________________________

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

Borrowing from CSS 1–3, and then adding its own, jQuery offers a powerful set of tools for matching a set of elements in a document.

If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \\. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

  1. All Selector (“*”)

Basic

Selects all elements.

  1. :animated Selector

Basic Filter, jQuery Extensions

Select all elements that are in the progress of an animation at the time the selector is run.

  1.  Attribute Contains Prefix Selector [name|="value"]

Attribute

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

  1.  Attribute Contains Selector [name*="value"]

Attribute

Selects elements that have the specified attribute with a value containing the a given substring.

  1.  Attribute Contains Word Selector [name~="value"]

Attribute

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.

  1.  Attribute Ends With Selector [name$="value"]

Attribute

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.

  1.  Attribute Equals Selector [name="value"]

Attribute

Selects elements that have the specified attribute with a value exactly equal to a certain value.

  1.  Attribute Not Equal Selector [name!="value"]

Attribute, jQuery Extensions

Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value.

  1.  Attribute Starts With Selector [name^="value"]

Attribute

Selects elements that have the specified attribute with a value beginning exactly with a given string.

  1. :button Selector

Deprecated, Form, jQuery Extensions

Selects all button elements and elements of type button.

  1. :checkbox Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type checkbox.

  1. :checked Selector

Form

Matches all elements that are checked.

  1. Child Selector (“parent > child”)

Hierarchy

Selects all direct child elements specified by "child" of elements specified by "parent".

  1. Class Selector (“.class”)

Basic

Selects all elements with the given class.

  1. :contains() Selector

Content Filter

Select all elements that contain the specified text.

  1. Descendant Selector (“ancestor descendant”)

Hierarchy

Selects all elements that are descendants of a given ancestor.

  1. :disabled Selector

Form

Selects all elements that are disabled.

  1. Element Selector (“element”)

Basic

Selects all elements with the given tag name.

  1. :empty Selector

Content Filter

Select all elements that have no children (including text nodes).

  1. :enabled Selector

Form

Selects all elements that are enabled.

  1. :eq() Selector

Basic Filter, jQuery Extensions

Select the element at index n within the matched set.

  1. :even Selector

Basic Filter, jQuery Extensions

Selects even elements, zero-indexed. See also odd.

  1. :file Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type file.

  1. :first-child Selector

Child Filter

Selects all elements that are the first child of their parent.

  1. :first Selector

Basic Filter, jQuery Extensions

Selects the first matched element.

  1. :focus selector

Basic Filter, Form

Selects element if it is currently focused.

  1. :gt() Selector

Basic Filter, jQuery Extensions

Select all elements at an index greater than index within the matched set.

  1. Has Attribute Selector [name]

Attribute

Selects elements that have the specified attribute, with any value.

  1. :has() Selector

Content Filter, jQuery Extensions

Selects elements which contain at least one element that matches the specified selector.

  1. :header Selector

Basic Filter, jQuery Extensions

Selects all elements that are headers, like h1, h2, h3 and so on.

  1. :hidden Selector

jQuery Extensions, Visibility Filter

Selects all elements that are hidden.

  1. ID Selector (“#id”)

Basic

Selects a single element with the given id attribute.

  1. :image Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type image.

  1. :input Selector

Deprecated, Form, jQuery Extensions

Selects all input, textarea, select and button elements.

  1. :last-child Selector

Child Filter

Selects all elements that are the last child of their parent.

  1. :last Selector

Basic Filter, jQuery Extensions

Selects the last matched element.

  1. :lt() Selector

Basic Filter, jQuery Extensions

Select all elements at an index less than index within the matched set.

  1.  Multiple Attribute Selector [name="value"][name2="value2"]

Attribute

Matches elements that match all of the specified attribute filters.

  1.  Multiple Selector (“selector1, selector2, selectorN”)

Basic

Selects the combined results of all the specified selectors.

  1.  Next Adjacent Selector (“prev + next”)

Hierarchy

Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

  1.  Next Siblings Selector (“prev ~ siblings”)

Hierarchy

Selects all sibling elements that follow after the "prev" element, have the same parent, and match the filtering "siblings" selector.

  1. :not() Selector

Basic Filter

Selects all elements that do not match the given selector.

  1. :nth-child() Selector

Child Filter

Selects all elements that are the nth-child of their parent.

  1. :odd Selector

Basic Filter, jQuery Extensions

Selects odd elements, zero-indexed. See also even.

  1. :only-child Selector

Child Filter

Selects all elements that are the only child of their parent.

  1. :parent Selector

Content Filter, jQuery Extensions

Select all elements that are the parent of another element, including text nodes.

  1. :password Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type password.

  1. :radio Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type radio.

  1. :reset Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type reset.

  1. :selected Selector

Form, jQuery Extensions

Selects all elements that are selected.

  1. :submit Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type submit.

  1. :text Selector

Deprecated, Form, jQuery Extensions

Selects all elements of type text.

  1. :visible Selector

jQuery Extensions, Visibility Filter

Selects all elements that are visible.

_____________________________________________________________________________________

  1.  Descendent Selector

$("div .thingy")

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

  1.  Child Selector

$(".thingy > a")

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

  1.  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').

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

При использовании метода .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);


 

А также другие работы, которые могут Вас заинтересовать

36258. Интеллектуальные службы администрирования. Современные программные продукты крупных компьютерных сетей (Cfengine) 104 KB
  Знания о предметной области необходимые для работы ЭС определенным образом формализованы и представлены в памяти ЭВМ в виде базы знаний которая может изменяться и дополняться в процессе развития системы. Главным достоинством ЭС является возможность накопления знаний и сохранение их длительное время. При решении задач требующих обработки большого объема знаний возможность возникновения ошибки при переборе очень мала. Также возможно возникновение трудностей чисто психологического порядка: при создании базы знаний системы эксперт может...
36259. Обеспечение информационной безопасности. Система обнаружения атак RealSecure: назначение, компоненты, возможности 83.5 KB
  Система обнаружения атак RelSecure: назначение компоненты возможности. Система RelSecure Система обнаружения атак RelSecure разработана американской компанией Internet Security Systems Inc. Система RelSecure это интеллектуальный анализатор пакетов с расширенной базой сигнатур атак который позволяет обнаруживать враждебную деятельность и распознавать атаки на узлы Вашей корпоративной сети. Система RelSecure построена по технологии анализа сетевых пакетов в реальном масштабе времени reltime pcket nlysis относится к...
36260. Аппаратно-программные платформы администрирования. Административная консоль Exchange. Средства мониторинга серверов и трассировки сообщений 92.5 KB
  Средства мониторинга серверов и трассировки сообщений. Внешний вид административной консоли сервера Exchnge Из утилиты администрирования возможно выполнение таких функций как: создание модификация и удаление объектов каталога; создание настройка и удаление коннекторов; настройка синхронизации каталогов и репликации общих папок; контроль за состоянием серверов путем создания и запуска мониторов; установка степени подробности диагностических сообщений; трассировка сообщений; экспорт и импорт объектов...
36261. Службы Windows. Назначение и управление службами. Журнал событий. Планировщик заданий 130 KB
  Отключено Авто или Вручную У службы есть три возможности запуска: Отключено Эта служба никогда не стартует. Вручную Эта служба не будет запущена автоматически но возможен её запуск через другую службу или программу. Оставьте тип запуска Вручную если Вы не подключены к локальной сети.Оставьте его запускаемым Вручную.
36262. Технологии сбора информации 250.5 KB
  Технологии сбора информации. Информационные процессы сбор обработка и передача информации всегда играли важную роль в науке технике и жизни общества. Сбор информации это деятельность субъекта в ходе которой он получает сведения об интересующем его объекте. Обмен информацией это процесс в ходе которого источник информации ее передает а получатель принимает.
36263. Хранение информации. Структура базовой информационной технологии 130 KB
  Хранение информации данных не является самостоятельной фазой в информационном процессе а входит в состав фазы обработки. Различают структурированные данные в которых отражаются отдельные факты предметной области это основная форма представления данных в СУБД и неструктурированные произвольные по форме включающие и тексты и графику и прочие данные. Эта форма представления данных широко используется например в Интернеттехнологиях а сами данные предоставляются пользователю в виде отклика поисковыми системами. Организация того или...
36264. Информационные технологии поиска информации 274.5 KB
  Информационные технологии поиска информации Поиск информации: основные понятия виды и формы организации Поиск информации или информационный поиск представляет один из основных информационных процессов. Цели возможности и характер поиска всегда зависели от наличия информации её важности и доступности а также средств организации поиска. Цель любого поиска заключается в потребности необходимости или желании находить различные виды информации способствующие получению лицом осуществляющим поиск нужных ему сведений знаний и т. Это...
36265. Интерфейсы ИПС. Особенности ИПС глобальных сетей. Поиск в Internet 142.5 KB
  Глобальные поисковые системы в отличие от локальных стремятся объять необъятное по возможности наиболее полно описать ресурсы всего информационного пространства сети Интернет. Следует отметить что поисковые системы WWW весьма оперативно индексируют группы новостей и содержат информацию о статьях реально существующих в сети. Локальные и глобальные сети Internet В зависимости от удаленности компьютеров сети условно разделяют на локальные и глобальные. Произвольная глобальная сеть может включать другие глобальные сети локальные сети а также...
36266. Технологии обработки информации. Распределенная обработка информации. Системы централизованной обработки информации 43 KB
  Технологии обработки информации. Системы централизованной обработки информации. Информационная технология обработки данных предназначена для решения хорошо структурированных задач по которым имеются необходимые входные данные и известны алгоритмы и другие стандартные процедуры их обработки. Режим реализации технологии зависит от объемновременных особенностей решаемых задач: периодичности и срочности требований к быстроте обработки сообщений а также от режимных возможностей технических средств и в первую очередь ЭВМ.