Рационално използване на jQuery

Как да използвам правилно jQuery

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

1. Най-добрият и бърз начин за търсене на елемент е чрез неговия атрибут id, тъй като се използва DOM методът getElementById. Ако елемент няма идентификатор, тогава трябва да се посочи най-близкият до него елемент с идентификатор:

2. Използвайте името на маркера преди името на класа:

В този случай се използва DOM методът getElementsByTagName и сред избраните елементи се търси този, който има клас 'on'. Най-популярният избор на елементи по име на клас е един от най-бавните в jQuery.

3. Никога не поставяйте името на маркера пред идентификатора:

В този случай първо ще бъдат избрани всички елементи с таг 'div' и едва тогава сред тях ще бъде намерен елемент с необходимия идентификатор.

4. Кеширане на jQuery обекти. Например използвате обект повече от веднъж, вместо да търсите елемент няколко пъти:

запазете го в локална променлива:

Забележка: най-често '$' се използва пред името на променлива, за да покаже, че в нея се съхранява обект jQuery.

5. Изграждане на вериги. Повечето jQuery методи връщат jQuery обект след изпълнение, това ще спести размера на кода:

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

7. Минимизирайте работата си с DOM дървото. Всяка манипулация (изтриване, преместване и вмъкване на нови елементи) с DOM е доста бавна, така че вместо да вмъквате всеки елемент в DOM:

8. $ (прозорец) .load. Най-често изпълнението на скриптове е обвързано със събитието $ (document) .ready (). Събитието се случва, докато обектите все още се зареждат. Понякога можете да забележите, че страницата замръзва по време на зареждане. Причината за това може да са точно функциите, които са прикачени към $ (document) .ready (). За да избегнете това, можете да свържете някои от функциите със събитието $ (window) .load (), което се случва след като цялото съдържание на страницата (включително съдържанието на iframe) вече е заредено.

9. Обвързвайте само скриптове, свързани със страницата. Обикновено всичко се събира в един голям скрипт, който се вмъква във всички страници на сайта и се изпълнява в събитието $ (document) .ready (). Но дори ако функцията не работи на тази конкретна страница, тя пак ще губи време в търсене на елементите, към които е прикрепена тази функция. Сценарият може да бъде разделен на няколко части или направен по следния начин:

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