jQuery е Javascript библиотека, също така помислете за добавяне на маркер на Javascript. jQuery е популярна JavaScript библиотека, която улеснява преминаването на обектния модел на документа (DOM), обработката на събития, анимацията и взаимодействията AJAX, намалявайки до минимум разликите между браузърите. Въпрос с етикет jquery трябва да бъде свързан с jquery, така че jquery трябва да се използва в въпросния код и въпросът трябва да съдържа поне елементи, свързани с използването на jquery.

за

jQuery (Core) е библиотека с JavaScript, създадена от John Resig, която осигурява абстракции за общи задачи на клиента, като например прескачане на DOM, манипулиране на DOM, обработка на събития, анимация и AJAX .

jQuery улеснява обхождането и обработката на HTML документи, обработка на събития, анимация и AJAX заради API, който работи в множество браузъри.

jQuery осигурява платформа за създаване на плъгини, които разширяват възможностите, в допълнение към вече предоставените от библиотеката. Разработването на jQuery и свързаните с него проекти се координира от JQuery Foundation .

Специални функции

jQuery включва следните функции:

  • Избирането на елементи на DOM чрез Sizzle мулти-сървърния механизъм за избор на отворен код, подчертавайки проекта jQuery
  • Заобикаляйте и модифицирайте DOM (включително поддръжка за CSS 1-3)
  • DOM манипулация на базата на CSS селектори, които използват имена и атрибути на възела (например ID и class ) като критерии за създаване на селектори
  • мерки
  • Ефекти и анимации
  • AJAX
  • Анализ на JSON (за по-стари браузъри)
  • Разширяемост чрез приставки
  • Помощни програми, като информация за потребителски агент, откриване на функции
  • Методи за съвместимост, които първоначално са достъпни в съвременните браузъри, но се нуждаят от резервно копие inArray() за по-старите - например, inArray() и each()
  • Мулти-браузър (да не се бърка с кръстосан браузър)

Поддръжка на браузър

jQuery поддържа текущата стабилна версия и предишната версия или "текущата версия 1" на Chrome, Edge, Firefox и Safari. Той също така поддържа текущата стабилна версия на Opera.

В допълнение, jQuery 1.x поддържа Internet Explorer версия 6 или по-висока. Подкрепата за IE 6-8 обаче е забранена за jQuery 2.x и jQuery 3.x , които поддържат само IE 9 или по-висока.

И накрая, jQuery поддържа мобилния браузър на Android 4.0 и по-нова версия и Safari на iOS 7 и по-нова версия.

JQuery версии

jQuery се актуализира често, така че библиотеката трябва да се използва внимателно. Някои функции остаряват с по-новите версии на jQuery. Гледайте за бележките за пускане , за да следите функциите.

JQuery CDN предоставя връзки за изтегляне за всички версии на jQuery , включително най- новите стабилни версии на всеки клон .

Когато задавате въпроси, свързани с jQuery, трябва:

  1. Прочетете внимателно документацията на jQuery API и изпробвайте Stack Overflow за дубликати.
  2. Изолирайте проблема и го възпроизведете в онлайн среда като JSFiddle , JSBin или CodePen . Можете също да използвате LiveWeave за Live Connect. Въпреки това, не забравяйте да включите проблема във вашия въпрос - не само като връзка към онлайн средата. Можете също да използвате фрагменти на стека, за да включите изпълним код в самия въпрос.
  3. Отбележете съответно въпроса; винаги включвайте и използвайте други маркери за уеб разработки ( , , ), ако е приложимо. Най-популярните плъгини на jQuery също имат свои собствени тагове, като , и ; За всеки друг плъгин има маркер .
  4. Посочете версията на използваната библиотека jQuery, така че всички отговори да могат да предоставят решения, подходящи за версията.
  5. Посочете в кой браузър се появява кода и кои съобщения за грешки, ако има такива, са били хвърлени от браузъра. Ако проблемите са последователни в крос-браузъра, това също е ценна информация.

Често задавани въпроси

Здравей, свят

Тя показва "Здравей, свят!". В прозореца за предупреждение за всяка връзка кликнете след като DOM ( JSFiddle ) е готов :

 // callback for document load $(function () { // select anchors and set click handler $("a").click(function (event) { // prevent link default action (redirecting to another page) event.preventDefault(); // show the message alert("Hello world!"); }); }); 

ресурси

Видеоурок

Популярни приставки

Други проекти на JQuery Foundation

Най-добри практики и често правени грешки

Свързан въпрос: jQuery капани за избягване

Не забравяйте да използвате готов манипулатор.

Ако вашият код по някакъв начин управлява DOM, трябва да се уверите, че той се изпълнява след като изтеглянето на DOM приключи.

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

 $(function () {  }); // Or $(document).ready(function () {  }); 

или с посочена функция:

 $(functionName); // Or $(document).ready(functionName); 

Това са алтернативи за поставяне на JavaScript код или маркер на скрипт в HTML точно преди затварянето на </body> .

В jQuery 3.x, препоръчителният начин за добавяне на готов манипулатор е $(function() {}) , докато други форми, като $(document).ready(function() {}) , са отхвърлени. В допълнение, jQuery 3.x премахва възможността за използване на .on("ready", function() {}) за изпълнение на функция в "готово" събитие.

Избягвайте конфликти с noConflict() и друг псевдоним за jQuery

Ако вашият jQuery код е в конфликт с друга библиотека, която също използва знака $ като псевдоним, използвайте метода noConflict() :

 jQuery.noConflict(); 

След това можете спокойно да използвате $ като псевдоним за друга библиотека, като използвате jQuery име за jQuery функции.

Можете също да се обадите

 $jq = jQuery.noConflict(); 

и използвайте $jq като псевдоним за jQuery. Например:

 $jq(function () { $jq("a").click(function (event) { event.preventDefault(); alert("Hello world!"); }); }); 

Можете също да присвоите jQuery на $ в определена област:

 jQuery(function ($) { // In here, the dollar sign is an alias for jQuery only. }); // Out here, other libraries can use the dollar sign as an alias. 

След това можете да използвате $ като псевдоним за jQuery вътре в този функционален блок, без да се притеснявате за конфликти с други библиотеки.

Където е възможно, кеш jQuery обекти и верига

Извикването на функцията jQuery $() е скъпо. Многократното обжалване пред него е изключително неефективно . Избягвайте това:

 $('.test').addClass('hello'); $('.test').css('color', 'orange'); $('.test').prop('title', 'Hello world'); 

Вместо това, кеширайте вашия jQuery обект в променлива:

 var $test = $('.test'); $test.addClass('hello'); $test.css('color', 'orange'); $test.prop('title', 'Hello world'); 

Или още по-добре, използвайте верига, за да намалите повторението:

 $('.test').addClass('hello').css('color', 'orange').prop('title', 'Hello world'); 

Също така не забравяйте, че много функции могат да извършват множество промени в едно повикване, като групират всички стойности в обект. Вместо:

 $('.test').css('color', 'orange').css('background-color', 'blue'); 

използвате:

 $('.test').css({ 'color': 'orange', 'background-color': 'blue' }); 

Правила за именуване на променливи

Изброените jQuery променливи обикновено се наричат ​​започвайки с $ за да ги разграничат от стандартни JavaScript обекти.

 var $this = $(this); 

Знайте вашите DOM свойства и функции

Въпреки че една от целите на jQuery е да се абстрахира DOM, познаването на DOM свойствата може да бъде изключително полезно. Една от най-често срещаните грешки, направени от тези, които изучават jQuery без да научат DOM, е да използват jQuery за достъп до свойствата на даден елемент:

 $('img').click(function () { $(this).attr('src'); // Bad! }); 

В горния код this отнася за елемента, от който е стартиран манипулаторът на събития при натискане. Горният код е бавен и подробен; Кодът по-долу работи по същия начин и е много по-кратък, по-бърз и по-разбираем.

 $('img').click(function () { this.src; // Much, much better }); 

Идиоматичен синтаксис за създаване на елементи

Въпреки че следните два примера изглеждат функционално еквивалентни и синтактично правилни, първият пример е предпочитан:

 $('<p>', { text: 'This is a ' + variable, "class": 'blue slider', title: variable, id: variable + i }).appendTo(obj); 

За сравнение подходът на конкатенацията на низовете е много по-малко четлив и много по-крехък:

 $('<p class="blue slider" id="' + variable + i + '" title="' + variable + '">This is a ' + variable + '</p>').appendTo(obj); 

Докато първият пример ще бъде по-бавен от втория, предимствата на по-голяма яснота вероятно ще надхвърлят номиналните разлики във всички приложения, освен чувствителните към производителността.

Освен това, идиоматичният синтаксис е устойчив на инжектирането на специални символи. Например във втория пример символът на котировката в variable преждевременно затворени атрибути. Извършването на правилно кодиране остава възможно, дори ако не е препоръчително, защото е склонна към грешки.

Разговори

Чат за jQuery с други потребители:

Алтернативи / Състезатели

Други известни библиотеки на JavaScript:

Публични хранилища:

  • cdnjs е общностен проект, ориентиран към облачната инфраструктура, който в момента използва ~ 1,143,000 уебсайта по целия свят.
  • jsdelivr - еднакво свободен и с отворен код CDN за cdnjs.

Свързани маркери