jQuery - гэта бібліятэка Javascript, падумайце таксама аб даданні тэга Javascript. jQuery - гэта папулярная крос-браузерная бібліятэка JavaScript, якая палягчае праходжанне Document Object Model (DOM), апрацоўку падзей, анімацыю і ўзаемадзеяння AJAX, зводзячы да мінімуму разыходжанні паміж браўзэрамі. Пытанне з тэгам jquery павінен быць звязаны з jquery, таму jquery павінен выкарыстоўвацца ў разгляданым кодзе, і ў пытанні павінны быць хаця б элементы, звязаныя з выкарыстаннем jquery.

каля

jQuery (Core) - гэта крос-браузерная бібліятэка JavaScript (створаная Джонам Ресигом ), якая забяспечвае абстракцыі для звычайных кліенцкіх задач, такіх як абыход 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. Уважліва прачытайце дакументацыю API jQuery і паспрабуйце апрабаваць Stack Overflow для дублікатаў.
  2. Ізалюе праблемны код і прайграйце яго ў онлайн-асяроддзі, такі як JSFiddle , JSBin або CodePen . Для Live Connect вы таксама можаце выкарыстоўваць LiveWeave . Аднак абавязкова уключыце праблемны код у свой пытанне - не проста спасылку на онлайн-асяроддзе. Вы таксама можаце выкарыстоўваць фрагменты стэка, каб уключыць выкананы код у самым пытанні.
  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. only 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.

звязаныя тэгі