jQuery

от Уикипедия, свободната енциклопедия
Направо към: навигация, търсене
jQuery
Информация
Автор Джон Резиг
Разработчик jQuery Team
Последна версия 1.10.2/2.0.3
Програмен език JavaScript
Размер 32 KB zip-архивирано / 92 KB (production mode) / 252 KB (development mode)
Статус активен
Вид софтуер JavaScript библиотека
Лиценз Двоен лиценз:
GPL или MIT
Уебсайт jquery.com
JQuery в Общомедия

jQuery е JavaScript библиотека, публикувана в началото на 2006 от Джон Резик. В основата си jQuery опростява достъпа до всеки елемент на дадена уеб-страница, като по този начин позволява лесно изграждане на динамична функционалност в страниците.

jQuery е безплатен и open source софтуер, лицензиран под MIT лиценз или GNU GPL. jQuery се използва в 55% от 10000-те най-посещавани сайтове, което я прави най-популярната JavaScript библиотека днес.[1][2].

Функционалност[редактиране | edit source]

  • DOM селекция, базирана на синтаксиса на CSS селектори + разширена функционалност.
  • DOM манипулация (с поддръжка за CSS 1-3), позволяваща създаване, манипулиране и премахване на елементи от уеб страницата.
  • Събития (events)
  • Ефекти и анимация
  • Ajax
  • Съвместимост с широк набор браузъри, в т.ч. стари версии

jQuery плъгини[редактиране | edit source]

jQuery архитектурата позволява на разработчиците да създават плъгин кодове, като по този начин разширяват нейната функционалност. В момента има на разположение в интернет над 16 хиляди jQuery плъгина, които обхващат широк спектър от функционалности, като помощни приложения тип Ajax, уеб услуги, мрежови масиви от данни, динамични списъци, XML и XSLT инструменти, drag and drop приложения, събития, управление на бисквитки, модални прозорци и дори jQuery базиран Commodore 64 емулатор. Важен източник на jQuery плъгини е поддомейнът с плъгини, който е разположен на сайта на jQuery. Въпреки това, при опита през декември 2011 година да се разчисти сайта от спама, плъгини в този поддомейн са били случайно изтрити. Новият сайт ще включва GitHub-хранилище-домакин, което ще изисква разработчиците да представят повторно плъгини в съответствие с новите изисквания за представяне. Има алтернативни търсачки за плъгини, като jquer.in например, които използват по-специализирани подходи за търсене на плъгини, като например по регистрационен код и разглеждат само такива плъгини, които отговарят на определени критерии (например тези, които имат публичен регистрационен код).

Селектори[редактиране | edit source]

jQuery предлага мощен инструментариум за селектиране на елементи в документ.

Ето и селекторите, които могат да се ползват:

Селектор Пример Описание
All Selector (“*”) $("*") Селектира всички елементи. Тествай!
:animated Selector $(":animated") Селектира всички елементи, които в момента са в процес на анимация. Тествай!
Attribute Contains Prefix Selector [nameǀ="value"] $("[hreflang]ǀ='en']") Селектира елементи с посочения атрибут равен на зададената стойност или започващ с нея и допълнен с (-). В конкретния пример ще върне всички елементи с атрибут href започващ с "en". Тествай!
Attribute Contains Selector [name*="value"] $("[name*='hello']") Селектира елементи с посочен атрибут съдържащ зададената стойност. Тествай!
Attribute Contains Word Selector [name~="value"] $("[name~='hello']") Селектира елементи с посочен атрибут съдържащ като дума (обградена с интервали) зададената стойност. Тествай!
Attribute Ends With Selector [name$="value"] $("[href$='.jpg']") Селектира елементи с посочен атрибут съдържащ низ завършващ на посочената стойност. Чувствителен е към главни и малки букви. Тествай!
Attribute Equals Selector [name="value"] $("[href='default.htm']") Селектира елементи с посочен атрибут равен на посочената стойност. Тествай!
http://api.jquery.com/attribute-not-equal-selector/ $("[href!='default.htm']") Селектира елементи несъдържащи посочения атрибут, или съдържат посочения атрибут но в него не се среща посочената стойност. Тествай!
Attribute Starts With Selector [name^="value"] $("[name^='hello']") Селектира елементи с посочен атрибут започващ със зададената стойност. Тествай!
:button Selector $(":button") Селектира button елементи и елементи от тип button. Тествай!
:checkbox Selector $(":checkbox") Селектира всички елементи от тип checkbox. Тествай!
:checked Selector $(":checked") Селектира всички елементи от тип checkbox или radio бутон. Тествай!
Child Selector (“parent > child”) $("div > p") Селектира всички посочени наследствени елементи на конкретизирания родителски елемент. В конкретния пример избира всички параграфи на
секцията. Тествай!
Class Selector (“.class”) $(".intro") Селектира всички елементи от посочения клас. Тествай!
:contains() Selector $(":contains('Hello')") Селектира всички елементи съдържащи посочения текст. Тествай!
Descendant Selector (“родител наследник”) $("div p") Селектира всички елементи — наследници на посочения родител. Тествай!
:disabled Selector $(":disabled") Селектира всички неактивни елементи. Тествай!
Element Selector (“element”) $("p") Селектира всички посочени елементи. Тествай!
:empty Selector $(":empty") Селектира всички празни елементи. Тествай!
:enabled Selector $(":enabled")р Селектира всички позволени за работа елементи. Тествай!
:eq() Selector $("ul li:eq(3)") Селектира n-тия елемент от посочената група. В конкретния случай, 4-тия елемент от листа (с нулева индексация). Тествай!
:even Selector $("tr:even") Селектира всички четни елементи. В примера — всички четни редове от таблица. Тествай!
:file Selector $(":file") Селектира всички елементи от тип файл. Тествай!
:first-child Selector $("p:first-child") Селектира всички първи дъщерни елементи. Тествай!
:first-of-type Selector $("p:first-of-type") Селектира всички първи елементи от посочен тип. В примера — всички първи елементи, които са параграфи. Тествай!
:first Selector $("p:first") Селектира първия срещнат посочен елемент. В примера — първия параграф. Тествай!
:focus Selector $(":focus") Селектира елемента, който в момента е на фокус. Тествай!
:gt() Selector $("ul li:gt(3)") Селектира елементите, чийто индекс е по-голям от посочения. В примера — всички елементи от лист, чийто индекс е по-голям от 3 (С нулева индексация). Тествай!
Has Attribute Selector [name] $("[href]") Селектира елементи съдържащи посочения атрибут с произволна стойност. В примера — всички елементи с href атрибут. Тествай!
:has() Selector $("div:has(p)") Селектира всички елементи съдържащи поне един от посочените. В примера — всички
съдържащи поне един параграф. Тествай!
:header Selector $(":header") Селектира всички заглавни елементи h1, h2... Тествай!
:hidden Selector $("p:hidden") Селектира всички скрити елементи. Тествай!
ID Selector (“#id”) $("#lastname") Селектира елемента с посочено ID. Тествай!
:image Selector $(":image") Селектира всички елементи от тип image. Тествай!
:input Selector $(":input") Селектира всички елементи за въвеждане, текстови полета и button елементи. Тествай!
:lang() Selector $("p:lang(de)") Селектира всички елементи с посочения език. В примера — всички параграфи с атрибут lang равен на "de". Тествай!
:last-child Selector $("p:last-child") Селектира всички последни дъщерни елементи. В примера — всички последни параграфи в родителската секция. Тествай!
:last-of-type Selector $("p:last-of-type") Селектира всички последни дъщерни елементи от посочения тип. В примера — всички последни параграфи в родителския елемент измежду типа си. Тествай!
:last Selector $("p:last") Селектира последния посочен елемент. В примера — последния параграф. Тествай!
:lt() Selector $("ul li:lt(3)") Селектира елементите, чийто индекс е по-малък от посочения в конкретизираната структура. В примера — всички елементи от лист, чийто индекс е по-малък от 3 (нулева индексация). Тествай!
Multiple Attribute Selector [name="value"][name2="value2"] $("[name$="man"][name1$="woman"]") Селектира елементите отговарящи на всички посочени филтри.
Multiple Selector (“selector1, selector2, selectorN”) $("div,span,p.myClass") Селектира елементите отговарящи на поне един от посочените филтри.
Next Siblings Selector (“prev ~ siblings”) $("div ~ p") Селектира всички равностойни siblings елементи принадлежащи на prev. Тествай!
:not() Selector $("input:not(:empty)") Селектира всички елементи неотговарящи на посочената стойност. В примера — всички елементи за въвеждане, които не са празни. Тествай!
:nth-child() Selector $("div p:nth-child(2)") Селектира всички дъщерни елементи от посочен ред. В примера — всички 2-ри параграфи от
:nth-last-child() Selector $("p:nth-last-child(2)") Селектира всички дъщерни елементи от посочен ред, започвайки броенето отзад напред. В примера — всички 2-ри параграфи считано отзад напред. Тествай!
:nth-last-of-type() Selector $("p:nth-last-of-type(2)") Селектира всички дъщерни елементи от посочен ред, започвайки броенето отзад напред за съответния тип. В примера — всички 2-ри параграфи считано отзад напред за съответния тип. Тествай!
:nth-of-type() Selector $("p:nth-of-type(2)") Селектира всички дъщерни елементи от посочен ред за съответния тип. В примера — всички 2-ри параграфи за съответния тип. Тествай!
:odd Selector $("tr:odd") Селектира всички нечетни елементи от посочената структура. (Индексация от 0). В примера — всички нечетни редове от таблица. Тествай!
:only-child Selector $("p:only-child") Селектира всички елементи, които са единствени дъщерни за съответната родителска структура. Тествай!
:only-of-type Selector $("p:only-of-type") Селектира всички елементи, които са единствени дъщерни за съответната родителска структура от типа си. Тествай!
:parent Selector $(":parent") Селектира всички елементи, които се явяват родителски за поне един дъщерен. Тествай!
:password Selector $(":password") Селектира всички елементи от тип password. Тествай!
:radio Selector $(":radio") Селектира всички елементи от тип radio. Тествай!
:reset Selector $(":reset") Селектира всички елементи от тип reset. Тествай!
:root Selector $(":root") Селектира елемента, който се явява root за документа. Тествай!
:selected Selector $(":selected") Селектира всички елементи, които са избрани. Тествай!
:submit Selector $(":submit") Селектира всички елементи от тип submit. Тествай!
:text Selector $(":text") Селектира всички елементи от тип text. Тествай!
:visible Selector $("table:visible") Селектира всички видими елементи. Тествай!

DOM Манипулации[редактиране | edit source]

Категория:Class Attribute[редактиране | edit source]

Тези методи работят с CSS класовете на елементите.

Метод Описание Пример
.addClass() Добавя специфичен клас/класове към всеки от елемент отговарящ на даден критерий. На последният срещнат в HTML страницата елемент p се добавя клас selected
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
.hasClass() Проверява дали някой от избраните елементи има даден клас. Нека в HTML страницата имаме елемент:
<div id="mydiv" class="foo bar"></div>

HTML елементите могат да имат няколко класа.
Изпълнението на

<script>
  $('#mydiv').hasClass('foo')
  $('#mydiv').hasClass('bar')
  $('#mydiv').hasClass('quux')
</script>

за първите две команди ще даде стойност true защото елементът съдържа и двата класа, а последната команда ще даде false

.removeClass(className) Премахва даден клас или класове от елемент на HTML документа.
$('p').removeClass('myClass yourClass')

Премахва класовете myClass и yourClass от всички p елементи на страницата.

.toggleClass() Добавя или премахва един или повече класове от всеки избран елемент в зависимост от това дали съществуват. За елемента
<div class="tumble">Some text.</div>
Изпълняваме
$('div.tumble').toggleClass('bounce')
, и получаваме:
<div class="tumble bounce">Some text.</div>
Изпълняваме отново
$('div.tumble').toggleClass('bounce')
, резултатът е:
<div class="tumble">Some text.</div>

Категория:Копиране[редактиране | edit source]

Метод Описание Пример
.clone() Прави пълно копиране на даден елемент/елементи За следния HTML код :
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
Изпълняваме
$( ".hello" ).clone().appendTo( ".goodbye" );
Резултат:
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>

Категория:DOM Insertion, Around[редактиране | edit source]

Тези методи позволяват вмъкване/премахване на съдържание около вече съществуващо такова.

Метод Описание Пример
.unwrap() Премахва родителския елемент на избрания елемент/елементи от DOM, като оставя избраните на тяхно място. Ако за HTML кода
<p>Hello</p>
<p>World</p>

изпълним

 $("p").wrap("<div></div>");

Получаване:

<div><p>Hello</p></div>
<div><p>World</p></div>

Съответно, изпълнението на

 $("p").wrap();

дава първоначалния код.

.wrap() Позволява вмъкване на HTMLструктура около избрания елемент/елементи.
Ако за кода
 <div class="inner">Goodbye</div>
Изпълним
$('.inner').wrap('<div class="new" />');
Резултатът ще е:
  <div class="new"> <div class="inner">Hello</div>  </div>
.wrapAll() Създава HTML структура около всички елементи заедно За кода:
<div class="inner">Hello</div><div class="inner">Goodbye</div>

Изпълняваме:

$('.inner').wrapAll('<div class="new" />');

Резултат:

<div class="new">
    <div class="inner">Hello</div><div class="inner">Goodbye</div>
</div>
.wrapInner() Създава HTML структура около съдържанието на даден DOM елемент За кода:
<div class="inner">Hello</div>

Изпълняваме:

$('.inner').wrapInner('<div class="new" />');

Резултат:

 <div class="inner">
    <div class="new">Hello</div>
 </div>

Категория:DOM Вмъкване, Вътрешно[редактиране | edit source]

Тези методи позволяват да се вмъкне ново съдържание във вече съществуващ елемент.
Метод Описание Пример
.append() Вмъква съдържание в края на всеки избран елемент.
За елемента
<div class="inner">Hello</div>
Изпълняваме:
$(".inner" ).append( "<p>Test</p>" );
Резултат:
<div class="inner"> Hello <p>Test</p> </div>
.appendTo() Вмъква всеки избран елемент в края целта.
За елемента
 <div class="inner">Hello</div>
Изпълняваме:
$( "<p>Test</p>" ).appendTo( ".inner" );
Резултат:
<div class="inner">  Hello <p>Test</p> </div>
.html() Вмъква всеки избран елемент в края целта.
За елемента
 <div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
  </div>
Изпълняваме:
 $('div.demo-container').html();
Резултат:
<div class="demo-box">Demonstration Box</div>
.prepend() Вмъква съдържание към началото на всеки избран елемент.
За елемента
<div class="inner">Hello</div>
Изпълняваме:
$('.inner').prepend('<p>Test</p>');
Резултат:
 <div class="inner"> <p>Test</p> Hello </div>
.prependТо() Вмъква всеки елемент от избраните към началото на целта.
За елемента
<div class="inner">Hello</div>
Изпълняваме:
$('<p>Test</p>').prependTo('.inner');
Резултат:
 <div class="inner"> <p>Test</p> Hello</div>
.text() Взема смесеното съдържание на даден елемент — текст и код.
За елемента
div class="demo-box">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>
Изпълняваме:
$('div.demo-container').text()
Резултат:
Demonstration Box list item 1 list item 2

Категория:DOM Вмъкване, Външно[редактиране | edit source]

Тези методи позволяват да се вмъква съдържание отвън на съществуващ елемент

Метод Описание Пример
after() Вмъква съдържание след всеки избран елемент
За елемента :
<div class="inner">Hello</div>
Изпълняваме:
$( ".inner" ).after( "<p>Test</p>" );
Резултат:
<div class="inner">Hello</div>
 <p>Test</p>
before() Вмъква съдържание преди всеки избран елемент
За елемента :
<div class="inner">Hello</div>
Изпълняваме:
$( ".inner" ).before( "<p>Test</p>" );
Резултат:
<p>Test</p>
<div class="inner">Hello</div>
insertAfter() Вмъква всеки избран елемент след целта.
За елемента :
<div class="inner">Hello</div>
Изпълняваме:
$('<p>Test</p>').insertAfter('.inner');
Резултат:
<div class="inner">Hello</div>
<p>Test</p>
insertBefore() Вмъква всеки избран елемент преди целта.
За елемента :
<div class="inner">Hello</div>
Изпълняваме:
$('<p>Test</p>').insertBefore('.inner');
Резултат:
<p>Test</p>
<div class="inner">Hello</div>

Категория:DOM Премахване[редактиране | edit source]

Тези методи ни позволяват да изтриваме елементи от DOM

Метод Описание Пример
.detach() Премахва набор от избрани елементи от DOM
 $( "p" ).detach(); - премахва всички елементи p от DOM
.empty() Премахва всички child nodes от набора избрани елементи от DOM
За елемента:
 <div class="hello">Hello</div>
Изпълняваме:
$('.hello').empty();
Резултат:
<div class="hello"></div>
.remove() Премахва набор избрани елементи от DOM
За елемента:
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
Изпълняваме:
$('.hello').remove();
Резултат:
<div class="goodbye">Goodbye</div>
.remove() Премахва родителските елементи на избраните елементи от DOM
За елемента:
<div class="hello">
   <p>Hello</p>
   <p>World</p>
</div>
Изпълняваме:
   $('p').unwrap();
Резултат:
   <p>Hello</p>
   <p>World</p>

Категория:DOM Замяна[редактиране | edit source]

Тези методи се използват да се премахне дадено съдържание от DOM и да се замести с друго.

Метод Описание Пример
[.replaceAll()] Замества всеки избран елемент с друг.
//Първоначален код:
<div class="inner first">Hello</div>
<div class="inner second">And</div>
//Команда:
$('<h2>New heading</h2>').replaceAll('.inner');
//Резултат:
<h2>New heading</h2>
<h2>New heading</h2>
[.replaceWith()] Замества всеки избран елемент с друг, като връща премахнатия аргумент
//Първоначален код:
<div class="inner first">Hello</div>
<div class="inner second">And</div>
//Команда:
$('<h2>New heading</h2>').replaceAll('.inner');
//Резултат:
<h2>New heading</h2>
<h2>New heading</h2>

Категория:Общи Атрибути[редактиране | edit source]

Тези методи вземат или установяват DOM атрибутите на елементите

Метод Описание Пример
.attr() Взема стойността на атрибута на първия елемент от избраните елементи или установява атрибут за един или повече от избраните елементи.
За кода <input type="checkbox" checked="checked" />
Изпълнението на: $( elem ).attr( "checked")
Ще даде: "checked"
.prop() Взема стойността на свойството на първия елемент от избраните елементи или установява такова за един или повече от избраните елементи.
За кода: <input type="checkbox" checked="checked" />
Изпълнението на $(elem).prop("checked") ще даде true
.removeAttr() Премахва атрибут от всеки избран елемент.
//За кода:
<input type="text" title="hello there" />
//Изпълнението на:
$(input).removeAttr("title")
//ще даде:
<input type="text" >
.removeProp() Премахва свойство от всеки избран елемент.
//За кода:
<p></p>
//Изпълнението на :
$("p").prop("Ivan","Petrov");
//Ще създаде свойство на елемента p — Ivan със стойност Petrov
//еквивалентно на <p Ivan="Petrov"></p>
$("p").removeProp("Ivan");
//ще го премахне
//Забележка: Така създаденото свойство не се вижда в HTML кода на страницата
.val() Взема текущата стойност на първия от избраните елементи или установява стойност на избраните елементи.
//За кода:
<input type = "button" name="check" id="check" value="Test button">
//Изпълнението на :
alert($('#check').val());
//Ще създаде изведе съобщение : "Test button"
//А изпълнението на
$('#check').val("Submit")
//ще е има за резултат:
 <input type = "button" name="check" id="check" value="Submit">

Категория:Style Properties[редактиране | edit source]

Тези методи вземат или установяват CSS базираните свойства.

Метод Описание Пример
.css() Взема стойността на style за първия елемент от избраните елементи или установява едно или повече [CSS] свойства на всеки избран елемент.
//Ако за елемента:
 <div style="background-color:blue;"></div>
//Изпълним:
alert($('div').css("background-color"));
//Резултатът ще е :

съобщение : RGB(0,0,255)

.height() Връща стойността на височината на първия елемент от избраните елементи или установява височината на всеки избран елемент.
$(window).height();   // Връща височината на прозореца на браузъра
$(document).height(); // Връща височината на HTML документа
.innerHeight() Връща стойността на височината на първия елемент от избраните елементи или установява височината на всеки избран елемент.Включва вътрешното отместване (padding) но не и рамката.
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight()+",height:"+p.height() );
</script>
//Връща примерни резултати: innerHeight:30, height:20
.innerWidth() Връща стойността на изчислената широчина на първия елемент от избраните елементи или установява широчината на всеки избран елемент.Включва вътрешното отместване (padding) но не и рамката.
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );
</script>
//Връща примерни резултати: innerWidth:1280
.width() Връща стойността на изчислената широчина на първия елемент от избраните елементи или установява широчината на всеки избран елемент.
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
$("p:last").text( "Width:" + p.width() );
</script>
//Връща примерни резултати: Width:1230  -
//зависи от разделителната способност на екрана ви
.offset() Връща текущите координати на първия елемент от избраните елементи или установява координати на всеки избран елемент.
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );</script>
</script>
//Връща примерни резултати: left: 18, top: 10
.outerHeight() Връща стойността на височината на първия елемент от избраните елементи или установява височината на всеки избран елемент. Включва вътрешното отместване (padding), рамката и по желание — външното отместване (margin).
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
var offset = p.offset();
$("p:last").text( "outerHeight:" + p.outerHeight() + "
, outerHeight(true):" + p.outerHeight(true) );
</script>
//Връща примерни резултати: outerHeight:33 , outerHeight(true):53
//-true е за да включи и външния отстъп(margin)
.outerWidth() Връща стойността на ширината на първия елемент от избраните елементи или установява ширината на всеки избран елемент. Включва вътрешното отместване (padding), рамката и по желание — външното отместване/отстъп (margin).
<p>Hello</p>
<p></p>
<script>
var p = $("p:first");
var offset = p.offset();
$("p:last").text( "outerWidth:" + p.outerWidth() + "
, outerWidth(true):" + p.outerWidth(true) );
</script>
//Връща примерни резултати: outerWidth:788 , outerWidth(true):808
//-true е за да включи и външния отстъп(margin)
.position() Връща текущите координати на първия елемент от избраните елементи или установява координати на всеки избран елемент относно родителския елемент.
<div>  <p>Hello</p> </div>
<p></p>
<script>
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
</script>
//Връща примерни резултати: left: 15, top: 15
.scrollLeft() Връща текущата хоризонтална позиция на първия елемент от избраните елементи.
<div> <p>Hello</p> </div>
<p></p>
<script>
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
</script>
//Връща примерни резултати: scrollLeft:0
.scrollTop() Връща текущата вертикална позиция на първия елемент от избраните елементи.
<div> <p>Hello</p> </div>
<p></p>
<script>
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
</script>
//Връща примерни резултати: scrollTop:0

Категория:Разни[редактиране | edit source]

Метод Описание Пример
.data() Запазва произволни данни свързани с избрани елементи или връща стойността на хранилището за първия елемент.
<div>
  The values stored were
  <span></span>
  and
  <span></span>
</div>
<script>
$( "div" ).data( "test", { first: 16, last: "pizza!" } );
$( "span:first" ).text( $( "div" ).data( "test" ).first );
$( "span:last" ).text( $( "div" ).data( "test" ).last );
</script>
//Резултат: The values stored were 16 and pizza!
.each() Минава през всеки JQuery обект, изпълнявайки функция, за всеки избран обект.
//За дадения списък :
<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
//Можем да минем през всички <li> елементи и да добавим индекс:
$( "li" ).each(function( index ) {
  console.log( index + ": " + $(this).text() );
});
//Резултат:
0: foo
1: bar
.get() Взема [DOM] елементите на избран JQuery обект.
//За дадения списък :
<ul>
    <li>foo</li>
    <li>bar</li>
</ul>
//Вземаме първия елемент <li> :
console.log( $( "li" ).get( 0 ) );
//Резултат:
<li id="foo">
.index() Търси даден елемент и връща индекса му.
//За дадения списък :
<ul>
  <li id="foo">foo</li>
  <li id="bar">bar</li>
  <li id="baz">baz</li>
</ul>
//Търсим елемента с id="bar" :
var listItem = $('#bar');
alert('Index: ' + $('li').index(listItem));
//Резултат:
Index: 1
.jQuery.noConflict() Когато заедно с JQuery се използва друга JS библиотека, която прехваща контрола над символа $ за използване на променливи, за да не се получи конфликт се изпълнява: $.noConflict();
 $.noConflict();
// Следва кодът, който използва друга библиотека
.....
.jQuery.param() Създава сериализирано представяне на масив или обект, подходящ за използване като URL или AJAX заявка.
  <div id="results"></div> // В този <div> се показва резултата
<script>
    var params = { width:1680, height:1050 };
    var str = jQuery.param(params);
    $("#results").text(str);
</script>
//Резултат:
width=1680&height=1050
.removeData() Премахва предварително запазени данни.
 <div>value1 before creation: <span></span></div>
<script>
 $("div").data("test1", "VALUE-1");
 $("div").removeData("test1");
<script>
//Резултат след изпълнение на .data():
value1 after creation: VALUE-1
//Резултат след изпълнение на .removeData():
value1 after removal: undefined
.size() Връща броя на елементите в JQuery обект.
//За HTML кода:
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<script>
alert( "Size: " + $("li").size() );
<script>
//Резултат след изпълнението:
Size: 2
.toArray() Връща избраните DOM обекти като масив
//За HTML кода:
<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
<script>
alert($('li').toArray());
<script>
//Резултат след изпълнението:
[<li id="foo">, <li id="bar">]

Събития[редактиране | edit source]

Тези методи се използват за регистриране на поведение и се изпълняват, когато потребителят взаимодейства с браузър. Използват се още за манипулиране на вече създадени поведения.

Ето и събитията, които могат да се ползват:

Събитие Пример Описание
.bind()
$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});
Закача ивент хендлър (event handler) за елементите.
.blur()
$( "#other" ).click(function() {
  $( "#target" ).blur();
});
Закача event handler за "blur" JavaScript събитие или предизвиква това събитие върху даден елемент.
.change()
$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});
Закача event handler за "change" JavaScript събитие или предизвиква това събитие върху даден елемент.
.click()
$( "#target" ).click(function() {
  alert( "Handler for .click() called." );
});
Закача event handler за "click" JavaScript събитие или предизвиква това събитие върху даден елемент.
.dblclick()
$( "#target" ).dblclick(function() {
  alert( "Handler for .dblclick() called." );
});
Закача event handler за "dblclick" JavaScript събитие или предизвиква това събитие върху даден елемент.
.delegate()
$( "table" ).delegate( "td", "click", function() {
  $( this ).toggleClass( "chosen" );
});
Закача handler за едно или повече събития за всички елементи, които съвпадат със селектора, в момента или след време, на базата на определен набор от основни елементи.
.die()
$( "p" ).die();
Премахва event handler-и, които вече са били закачени чрез .live(), от елементите.
.error()
$("img")
  .error(function(){
    $(this).hide();
  })
  .attr("src", "missing.png");
Закача event handler за "error" JavaScript събитие.
event.currentTarget
$("p").click(function(event) {
  alert( event.currentTarget === this ); // true
});
Текущият DOM елемент в event bubbling phase.
event.data Пример An optional object of data passed to an event method when the current executing handler is bound.
event.delegateTarget
$(".box").on("click", "button", function(event) {
  $(event.delegateTarget).css("background-color", "red");
});
Елементът, за който е бил закачен извиканият (в момента) jQuery event handler.
event.isDefaultPrevented()
$("a").click(function(event){
  alert( event.isDefaultPrevented() ); // false
  event.preventDefault();
  alert( event.isDefaultPrevented() ); // true
});
Показва (връща true/false) дали event.preventDefault() е бил извикан някога за текущото обектно събитие.
event.isImmediatePropagationStopped() Пример Показва (връща true/false) дали event.stopImmediatePropagation() е бил извикан някога за текущото обектно събитие.
event.isPropagationStopped() Пример Показва (връща true/false) дали event.stopPropagation() е бил извикан някога за текущото обектно събитие.
event.metaKey
$('#checkMetaKey').click(function(e){
  $('#display').text(e.metaKey);
});
Показва дали е бил натиснат МЕТА ключ (META key), когато е било предизвикано събитието.
event.namespace
$("p").on("test.something", function(event) {
  alert( event.namespace );
});
Определеният namespace, когато е било предизвикано събитието.
event.pageX
$(document).on('mousemove',function(e){
      $("#log").text("e.pageX: " + e.pageX + ");
});
Позицията на курсора на мишката спрямо лявата страна на документа.
event.pageY
$(document).on('mousemove',function(e){
  $("#log").text(", e.pageY: " + e.pageY);
});
Позицията на курсора на мишката спрямо горната страна на документа.
event.preventDefault()
$("a").click(function(event) {
  event.preventDefault();
  $('<div/>')
    .append('default ' + event.type + ' prevented')
    .appendTo('#log');
});
Ако се извика този метод, действието (по подразбиране) на събитието няма да се изпълни.
event.relatedTarget
$("a").mouseout(function(event) {
  alert(event.relatedTarget.nodeName); // "DIV"
});
Другият (ако съществува) DOM елемент, който участва в събитието.
event.result
$("button").click(function(event) {
  return "hey";
});
$("button").click(function(event) {
  $("p").html( event.result );
});
Последната върната стойност (ако има такава) от event handler-а, който е бил предизвикан от текущото събитие.
event.stopImmediatePropagation()
$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // Тази функция няма да се изпълни
  $(this).css("background-color", "#f00");
});
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
event.stopPropagation()
$("p").click(function(event){
  event.stopPropagation();
  // Действие
});
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
event.target
$("body").click(function(event) {
  $("#log").html("clicked: " + event.target.nodeName);
});
DOM елементът, който инициализира събитието.
event.timeStamp
var last, diff;
$('div').click(function(event) {
  if ( last ) {
    diff = event.timeStamp — last
    $('div').append('time since last event: ' +
                      diff + '<br/>');
  } else {
    $('div').append('Click again.<br/>');
  }
  last = event.timeStamp;
});
Времевата разлика (в милисекунди) от 1 Януари 1970 до времето, когато браузърът е създал събитието.
event.type
$("a").click(function(event) {
  alert(event.type); // "click"
});
Описва характера на събитието.
event.which
<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').on('keydown',function(e){
  $('#log').html(e.type + ': ' +  e.which );
});  </script>
Това свойство показва (за key или mouse събития) кой бутон (на клавиатурата или мишката) е бил натиснат.
.focus()
$('#target').focus(function() {
  alert('Handler for .focus() called.');
});
Закача event handler за "focus" JavaScript събитие или предизвиква това събитие върху даден елемент.
.focusin()
$("p").focusin(function() {
  $(this).find("span").css(
    'display','inline').fadeOut(1000);
});
Закача event handler за "focusin" JavaScript събитие.
.focusout() Пример Закача event handler за "focusout" JavaScript събитие.
.hover()
$(selector).hover(handlerIn, handlerOut)
Закача един или два handler-а за съвпадащите елементи. Тези handler-и се изпълняват когато курсорът на мишката мине върху елемента и след това го напусне.
jQuery.proxy() Пример Приема функция и връща нова, която винаги има конкретен контекст.
.keydown()
$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});
Закача event handler за "keydown" JavaScript събитие или предизвиква това събитие върху даден елемент.
.keypress()
$("#target").keypress(function() {
  console.log("Handler for .keypress() called.");
});
Закача event handler за "keypress" JavaScript събитие или предизвиква това събитие върху даден елемент.
.keyup()
$('#target').keyup(function() {
  alert('Handler for .keyup() called.');
});
Закача event handler за "keyup" JavaScript събитие или предизвиква това събитие върху даден елемент.
.live()
$("a").live("click", function(event){
  event.preventDefault();
});
Закача event handler за всички елементи, които съвпадат с текущия селектор (в момента и след време).
.load()
$('#book').load(function() {
  // Handler for .load() called.
});
Закача event handler за "load" JavaScript събитие.
.mousedown()
$('#target').mousedown(function() {
  alert('Handler for .mousedown() called.');
});
Закача event handler за "mousedown" JavaScript събитие или предизвиква това събитие върху даден елемент.
.mouseenter()
$('#outer').mouseenter(function() {
  $('#log').append('<div>Handler for' +
                   ' .mouseenter() called.</div>');
});
Задейства event handler, когато курсора на мишката е върху елемента или предизвиква този handler върху даден елемент.
.mouseleave()
$('#outer').mouseleave(function() {
  $('#log').append('<div>Handler for' +
                   ' .mouseleave() called.</div>');
});
Задейства event handler, когато курсора на мишката напуска елемента или предизвиква този handler върху даден елемент.
.mousemove()
$("#other").click(function() {
  $("#target").mousemove();
});
Закача event handler за "mousemove" JavaScript събитие или предизвиква това събитие върху даден елемент.
.mouseout()
$('#other').click(function() {
  $('#outer').mouseout();
});
Закача event handler за "mouseout" JavaScript събитие или предизвиква това събитие върху даден елемент.
.mouseover()
$('#other').click(function() {
    $('#outer').mouseover();
});
Закача event handler за "mouseover" JavaScript събитие или предизвиква това събитие върху даден елемент.
.mouseup()
$('#other').click(function() {
  $('#target').mouseup();
});
Закача event handler за "mouseup" JavaScript събитие или предизвиква това събитие върху даден елемент.
.off() Пример Премахва event handler.
.on()
$("#dataTable tbody tr").on("click", function(event){
  alert($(this).text());
});
Закача event handler функция за едно или повече събития на избраните елементи.
.one()
$("#foo").one("click", function() {
  alert("This will be displayed only once.");
});
Закача handler за събитие на елементите. Handler-ът се стартира най-много по един път за елемент.
.ready()
$(document).ready(function() {
  // Handler for .ready() called.
});
Посочената функция се изпълнява, когато DOM е заредила.
.resize()
$(window).resize(function() {
  $('#log').append('<div>Handler for' +
                   ' .resize() called.</div>');
});
Закача event handler за "resize" JavaScript събитие или предизвиква това събитие върху даден елемент.
.scroll()
$('#target').scroll(function() {
  $('#log').append('<div>Handler for' +
                   ' .scroll() called.</div>');
});
Закача event handler за "scroll" JavaScript събитие или предизвиква това събитие върху даден елемент.
.select()
$('#target').select(function() {
  alert('Handler for .select() called.');
});
Закача event handler за "select" JavaScript събитие или предизвиква това събитие върху даден елемент.
.submit()
$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});
Закача event handler за "submit" JavaScript събитие или предизвиква това събитие върху даден елемент.
.toggle()
$('#target').toggle(function() {
  alert('First handler for .toggle() called.');
}, function() {
  alert('Second handler for .toggle() called.');
});
Bind two or more handlers to the matched elements, to be executed on alternate clicks.
.trigger()
$('#foo').on('click', function() {
      alert($(this).text());
});
$('#foo').trigger('click');
Стартира всички handler-и и поведения, закачени за съвпадащите елементи (за дадения тип на събитието).
.triggerHandler() Пример Стартира всички handler-и, закачени за елемент на събитие.
.unbind()
$('#foo').unbind();
Премахва предишно закачен event handler от елементите.
.undelegate() Пример Премахва handler от събитието за всички елементи, които съвпадат със селектора, на базата на определен набор от основни елементи.
.unload()
$(window).unload(function() {
  alert('Handler for .unload() called.');
});
Закача event handler за "unload" JavaScript събитие.

Плъгини[редактиране | edit source]

Други проекти на jQuery Foundation[редактиране | edit source]

  • jQuery UI - набор от ефекти, приспособления и теми базирани на jQuery JavaScript Library.
  • jQuery Mobile - универсален, HTML5-базиран потребителски интерфейс за всички популярни мобилни платформи.
  • QUnit - използва се от jQuery, jQuery UI and jQuery Mobile за тестване на JavaScript код.
  • Sizzle - JavaScript CSS selector-ен енджин

Версии[редактиране | edit source]

Работи се едновременно по две версии:

  • jQuery 1.x
  • jQuery 2.x - включва същото API като jQuery 1.x, но не поддържа Internet Explorer 6, 7, или 8

Външни препратки[редактиране | edit source]

  1. jQuery Usage Statistics. // Посетен на 2012-04-02.
  2. Usage of JavaScript libraries for websites. // W3Techs. Посетен на 2010-07-08.