Това е втора част на статията "jQuery - полезни съвети". Ако случайно сте пропуснали първата, може да я намерите тук. Сега следват още пет нови съвета, които се надявам да ви бъдат полезни. Наслаждавайте се!
6. Проблем с "fadeIn" и "fadeOut" ефекти в Internet Explorer
Ако сте използвали "fadeIn" или "fadeOut" ефект в IE, най-вероятно сте забелязали колко грозно изглежда. Текстът не се изобразява както трябва. За да разрешите този проблем, трябва да премахнете атрибута филтър, а това ства по следния начин.
// Това е елементът, на който прилагаме "fadeIn" ефект
$("#myelement").fadeIn();
// Това е начинът за премахване на атрибута "filter" от елемента "#myelement"
$("#myelement").removeAttr("filter");
7. Отваряне на външни линкове в нов прозорец
Разбира се, има много решения на този проблем, но ето на вашето внимание едно от тях:
$("a:not([href*='your_domain_name.com'])").click(function(){
window.open(this.href);
return false;
});
8. Как да проверим дали jQuery библиотеката е заредена
Тази проверка е много полезна, когато искаме да използваме скрипт само при условие, че jQuery библиотеката е заредена.
/* Начин 1 */
if (jQuery) {
//jQuery е заредена
} else {
//jQuery не е заредена
}
/* Начин 2 */
if (typeof jQuery == 'undefined') {
//jQuery не е заредена
} else {
//jQuery е заредена
}
9. Използвайте класове, както маркери
Можете да използвате маркер, за да следите дали дадено събитие се е случило или не. С методът addClass можете лесно да добавяте "class" към елемент. Можете да проверите по-късно наличието на този клас (по този начин вие маркирате елемента), с hasClass функция. Ще ви дам прост пример:
$('a').click( function() {
//Добавяме клас на елемента
$(this).addClass('active');
});
/* Правим проверка за клас с име 'active' */
if ( $('a').hasClass('active')
{
//Вашият код
}
10. Оптимизирайте селекторите си по модела Sizzle
Може би това ще е интересен факт за вас. От версия 1.3, jQuery използва Sizzle Javascript Selector Library, която работи малко по-различно от използвания досега selector engine. Към този момент всичко се случваше отляво надясно, което означава, че при избора на един низ като $("div.class a.class2 span.class3") започва търсене от (div.class) след намирането му в него търсим (a.class2), след което в него търсим (span.class3). Сами разбирате, че при един по-голям низ от селектори ще отнеме известно време selector engine-а да обработи тази информация. С използването на Sizzle метода нещата стоят по друг начин. Ако имаме низ, като $("div.class a.class2 span.class3"), прочитайки го отдясно наляво Sizzle selector engine-а ще намери елемента (span.class3) след което ще провери дали има други елементи (span.class3) и ако няма ще ни върне като резултат точно елемента от който се нуждаем.
Уверете се, че най-десният селектор е много специфично подбран. Например:
//Грешно
$('div.class a.class2 .class3')
//Грешно
$('div.class .class2 .class3')
//Правилно
$('div.class а.class2 span.class3')
Разбира се най-доброто решение е когато използвате id, за да обвържете даден елемент, като например:
HTML
<ul id="items"> <li class="item">item 1</li> <li class="item">item 2</li> <li class="item">item 3</li> </ul>
JavaScript
//Грешно
$('#items .item');
//Правилно
$('ul#items li.item');
С това "jQuery - полезни съвети (част 2)" приключва. Надявам се да сте намерили нещо полезно, което е било ново за вас. И запомнете мотото на jQuery, което гласи "Write Less, Do More"!
