Повернення false в обробниках подій
Як ми всі знаємо, основна мета jQuery - стандартизувати поведінка браузерів, використовуючи уніфікований набір методів. jQuery розширює можливості браузера де це можливо, інтегруючи можливості, які не підтримуються браузером "з коробки". На прикладі селектор, які ми можемо використовувати не замислюючись - багато хто з них не підтримуються старими браузерами на кшталт Internet Explorer 6 і 7 (наприклад. Not. Last-child і т.д.)
Іноді (хоча це досить рідкісні винятки) jQuery відхиляється від стандартного поведінки. Наприклад, повернути false в обробнику події jQuery - це те ж саме, що викликати.
На противагу цьому - повернення false стандартних обробників подій (на зразок addEventListener ()) еквівалентно написання:
У цьому переконатися можна, якщо поглянути на відповідну частину початкових кодів jQuery:
Псевдо-селектори роблять більше, ніж ви думаєте
У документації jQuery по псевдо-селекторам можна зустріти наступне зауваження (в даному випадку воно відноситься до псевдо-селектору: checkbox):
$ ( ": Checkbox") - це еквівалент $ ( "[type = checkbox]"). Як і для інших селекторів псевдо-класів (починаються в ":") рекомендується випереджати їх ім'ям тега або іншими селекторами, інакше буде використаний універсальний селектор ( "*"). Іншими словами - використання простого $ ( ': checkbox') еквівалентно $ ( "*: checkbox"), так що замість нього краще використовувати $ ( "input: checkbox").
Тепер давайте поглянемо безпосередньо на код jQuery:
Як видно з коду - документація не зовсім вірна. Селектор $ ( ': checkbox') насправді еквівалентний $ ( 'input [type = "checkbox"]'). якщо спиратися на те, що саме він шукає (зверніть увагу на name === "input"), але перевіряє при цьому всі елементи на сторінці незалежно від того, чи викликали ви його із зазначенням універсального селектора, або взагалі нічого не вказали.
Тепер знаючи це ви, можливо, захочете відмовитися від вказівки селектора елемента при використанні подібних фільтрів, і вирішите писати:
Але для поліпшення продуктивності все ж краще їх використовувати, щоб jQuery Не перевіряти всі елементи на сторінці. Так що вам все ж варто використовувати такий вираз:
jQuery.type ()
Навіть якщо ви і знали про нього, то, можливо, ви випустили з уваги, що цей метод сильно відрізняється від вбудованого оператора typeof. Насправді jQuery.type () повертає куди більш точний тип переданого значення. Давайте подивимося на пару прикладів:
Так що якщо ви розробляєте плагін для jQuery то, можливо, ви захочете використовувати jQuery.type () для більш точного визначення типу параметрів, з якими вам доводиться мати справу.
attr () може викликати removeAttr ()
Знаю, що заголовок цього розділу може звучати трохи дивно, але це дійсно правда. Для тих з вас, хто не знайомий з методом attr () - він отримує значення атрибута для першого елемента з відповідного під селектор набору, або ж встановлює значення одного або декількох атрибутів для кожного відповідного елемента.
На додаток до чисел і рядків метод attr () може приймати null другим аргументом. Коли таке відбувається - він веде себе як його протилежність: removeAttr (). Останній (як випливає з його назви) видаляє атрибут з кожного елемента.
Не вірите мені? Давайте подивимося на відповідну частину вихідного коду:
Як видно, метод перевіряє, якщо було передано певне значення (if (value! == undefined)), а далі перевіряє, якщо значення - null. Якщо це так - метод викликає removeAttr ().
Це буває корисно, якщо ви хочете встановити або видалити атрибут за умовою, і не хочете захаращувати ваш код. Наприклад, можна написати:
Використовувати вам цей трюк в коді чи ні? Рішення за вами, але на вашому місці я б його не використав, щоб код залишався більш зрозумілим.
Трансформація об'єктів-масивів в масиви
Ми б хотіли обійти цей список за допомогою методу forEach (). Якщо ми викличемо forEach () безпосередньо на змінної (list.forEach (.)) То отримаємо помилку "Uncaught TypeError: undefined is not a function". Щоб цього уникнути можна скористатися однією з дуже поширених технік - використовувати властивість prototype і метод call (). як показано нижче:
Інший вид запису:
Яке б рішення ви не використали - воно не дуже елегантно, як в написанні, так і в прочитанні. На щастя для нас, на допомогу нам приходить jQuery. Завдяки методу jQuery.makeArray () можна просто написати:
Набагато краще, чи не так?
висновок
Що можна дізнатися з цієї статті, крім перерахованих п'яти пунктів - що навіть такий чудовий і цілісний проект, як jQuery теж не є ідеальним. У нього теж є баги, і помилки в документації, і єдиним джерелом, який скаже нам правду є його вихідний код. Хоча, навіть код може брехати, що не відповідаючи намірам розробника - але це вже інша історія.
Остання пропозиція - якщо ви любите jQuery так само сильно, як і я - вносите свій вклад в проект. Навіть оповіщення про невеликому баге, або правка невеликий помилки в документації може сильно спростити життя мільйонам розробників.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
dimaloll
Напишіть статтю по jQuery Live (live each)
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!