5 вещей, которые вы могли не знать о jQuery

[Volshebnyi]

Спасибо, статья очень понравилась, несмотря на то, что уже все это знал. Многие не знают про такую конструкцию:

$('pre').css({backgroundColor:«gray», «boder-radius»:«3px», color: «black»})
В итоге часто вижу
$('pre').css('background-color', 'gray');
$('pre').css('boder-radius', '3px');
$('pre').css('color', 'black');
А это мало того, что некрасиво, так еще и создает объект три раза.

Самый полезный из перечисленных — третий метод. Если добавите туда же пару строчек про $.live(), будет просто отлично.

[agul]

*border-radius, наверное?

[RayMan]

$.live() уже не модно. $.delegate() наше все.

[denver]

Подскажите, чем отличается поведение?

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

$("table td").live("hover", function(){
	$(this).toggleClass("hover");
});

[vovchisko]

Тут кажется что-то было.

[orloffkirill]

Контекст .live() идет от начала DOM-дерева, а .delegate() — от выбранного селектора

[azproduction]

Небольшая статья и 5 минут видео. После просмотра все станет ясно net.tutsplus.com/tutorials/javascript-ajax/quick-tip-the-difference-between-live-and-delegate/

[AntonShevchuk]

Для понимания данного различия необходимо понимать как работает live — его работа основывается на том, что все события всплывают, т.е. кликнув на любом элементе HTML странички событие всплывает вверх по дом-дереву пока не будет перехвачено каким-либо обработчиком. Таким образом когда вы пишите $(«table td»).live(«hover», function(){… }); на document (на самый верх дерева) вешается обработчик, внутри он проверяет eventTarget, если это наш «table td» то запустится ваша функция. Функция delegate позволяет вешать подобный обработчик не на document, а на элемент который находится «ближе» в дереве к необходимому элементу.

Метод delegate стоит так же использовать в том случае, если у нас слишком много однотипных объектов с кучей обработчиков, т.е. как пример — необходимо в таблице сделать ячейки кликабельными (или повесить hover как в примере) то вешать обычные обработчик на каждую ячейку слишком накладно, лучше на всё таблицу один.

[orloffkirill]

+1
После Быстрых селекторов / Контекст тоже перешел на .delegate()

[uj2]

> Вы не должны использовать $(document).ready()

<grammar-nazi>
Здесь «вы не должны» воспринимается как необходимость того, чтобы вы не использовали $(document).ready(). Этот оборот больше похож на английское «You mustn't». «You don't have to» лучше перевести как «вы не обязаны».
</grammar-nazi>

[arnold-sakhnov]

А ещё лучше — «Не обязательно использовать …» / «Нет нужды использовать …»

[JokerOfGod]

Спасибо за статью, хотелось бы увидеть в дальнейшем статьи на эту тему.

[AntonShevchuk]

Извините за самопиар — но вот bit.ly/jquery-for-beginners

[xostik]

В первом примере, насколько я понимаю, вместо атрибута «css» нужно изменять «style».

[korvin0]

отлично! Пишите еще!

[TEHEK]

Лучше писать

jQuery(function ($) {

});

вместо

$(function () {
});

[TEHEK]

Если используются другие библиотеки, претендующие на заветный бакс ($), jQuery умеет уступать.

[azproduction]

Ещё лучше вот так:

(function (window, document, $) {
    var App = {
        init: function () {...}
        ...
    };
    $($.proxy(App.init, App));
}(this, this.document, this.jQuery));

Без заморочек со сторонними библиотекам, поюс ко всему zero-globals!

[TheShock]

а можно вообще подключить серверный MooTools и писать красивый код, наслаждаясь при этом работой с ДОМ в ДжиКвери =)

[aspect]

пятый пункт использовал совместно с jquery.malsup.com/block/

[taliban]

В опере примеры не работают. Использовать нельзя.

[RAMe0]

Уточните пожалуйста, что именно не работает в опере? Хочу заюзать эту библиотечку…
У меня все прекрасно в Опере заработало.

[taliban]

Ну может я что-то не так делаю, но судя по всему на странице есть кнопки — демонстрация, ни одна из них не работает, хотя если эти кнопки для красоты то да, все работает :)

[taliban]

Там JS ошибки идут одна за другой когда пытаешься демонстрацияю посмотреть, возможно просто сделали так демонстрация а сама библиотека вполне хорошо работает, я не знаю.

[RAMe0]

Хмм… у меня на демо странице ни каких ошибок.
А какая версия оперы?
У меня 11.00 (сборка 1156)
Пробовал все демки, командная строка молчит, ни одной ошибки…

[taliban]

Хм =) Проблема отпала сама собой, ошибки исчезли и все заработало… А вообще такие вещи слишком просто делать чтоб использовать библиотеку =) Это же один див по сути с Вашим html внутри.

[RAMe0]

Согласен, но зачем изобретать велосипед, если его кто то уже изобрел?
Это же придется отрабатывать анимацию, писать стили и прочее… А тут все готово, бери и юзай :)
В таких случаях, я обычно качаю подходящую библиотечку, удаляю лишнее, добавляю то что нужно и использую.

[dVaffection]

Эти 2 события “ajaxStart” и “ajaxStop” могут быть привязаны к любому элементу страницы. jQuery вызывает их глобально.

Однажды я столкнулся с проблемой. На сайте было много вызова ajax-методов и для них всех отображалась иконка лоудера — все работало великолепно пока… Однажды решили прикрутить чат, кот использует ajax запросы на сервер для проверки статуса нов сообщений и прочей мета инфы. И стал этот лоудер как новогодняя елка, да на каждй странице. Пришлось переписать c использованием jQuery.ajax: beforeSend и complete

[merkuriy]

Автора оригинальной статьи поправили по поводу второго пункта. Он внёс исправления и извинился за путание читателей. azproduction внесите исправления, пожалуйста, что б новички не пугались, что у них что-то не работает.

[azproduction]

Fixed