How to become an author
Search
Write a publication
Pull to refresh

Comments 30

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

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

Самый полезный из перечисленных — третий метод. Если добавите туда же пару строчек про $.live(), будет просто отлично.
Total votes 6: ↑4 and ↓2+2
*border-radius, наверное?
Total votes 10: ↑4 and ↓6-2
$.live() уже не модно. $.delegate() наше все.
Total votes 5: ↑5 and ↓0+5
Подскажите, чем отличается поведение?

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

$("table td").live("hover", function(){
	$(this).toggleClass("hover");
});
Total votes 2: ↑1 and ↓10
Контекст .live() идет от начала DOM-дерева, а .delegate() — от выбранного селектора
Total votes 1: ↑1 and ↓0+1
Для понимания данного различия необходимо понимать как работает live — его работа основывается на том, что все события всплывают, т.е. кликнув на любом элементе HTML странички событие всплывает вверх по дом-дереву пока не будет перехвачено каким-либо обработчиком. Таким образом когда вы пишите $(«table td»).live(«hover», function(){… }); на document (на самый верх дерева) вешается обработчик, внутри он проверяет eventTarget, если это наш «table td» то запустится ваша функция. Функция delegate позволяет вешать подобный обработчик не на document, а на элемент который находится «ближе» в дереве к необходимому элементу.

Метод delegate стоит так же использовать в том случае, если у нас слишком много однотипных объектов с кучей обработчиков, т.е. как пример — необходимо в таблице сделать ячейки кликабельными (или повесить hover как в примере) то вешать обычные обработчик на каждую ячейку слишком накладно, лучше на всё таблицу один.
Total votes 16: ↑16 and ↓0+16
> Вы не должны использовать $(document).ready()

<grammar-nazi>
Здесь «вы не должны» воспринимается как необходимость того, чтобы вы не использовали $(document).ready(). Этот оборот больше похож на английское «You mustn't». «You don't have to» лучше перевести как «вы не обязаны».
</grammar-nazi>
Total votes 11: ↑9 and ↓2+7
А ещё лучше — «Не обязательно использовать …» / «Нет нужды использовать …»
This comment wasn’t rated yet0
Спасибо за статью, хотелось бы увидеть в дальнейшем статьи на эту тему.
Total votes 2: ↑1 and ↓10
В первом примере, насколько я понимаю, вместо атрибута «css» нужно изменять «style».
Total votes 2: ↑1 and ↓10
Лучше писать

jQuery(function ($) {

});


вместо
$(function () {
});
This comment wasn’t rated yet0
Если используются другие библиотеки, претендующие на заветный бакс ($), jQuery умеет уступать.
This comment wasn’t rated yet0
Ещё лучше вот так:
(function (window, document, $) {
    var App = {
        init: function () {...}
        ...
    };
    $($.proxy(App.init, App));
}(this, this.document, this.jQuery));
Без заморочек со сторонними библиотекам, поюс ко всему zero-globals!
Total votes 2: ↑2 and ↓0+2
а можно вообще подключить серверный MooTools и писать красивый код, наслаждаясь при этом работой с ДОМ в ДжиКвери =)
This comment wasn’t rated yet0
В опере примеры не работают. Использовать нельзя.
This comment wasn’t rated yet0
Уточните пожалуйста, что именно не работает в опере? Хочу заюзать эту библиотечку…
У меня все прекрасно в Опере заработало.
This comment wasn’t rated yet0
Ну может я что-то не так делаю, но судя по всему на странице есть кнопки — демонстрация, ни одна из них не работает, хотя если эти кнопки для красоты то да, все работает :)
This comment wasn’t rated yet0
Там JS ошибки идут одна за другой когда пытаешься демонстрацияю посмотреть, возможно просто сделали так демонстрация а сама библиотека вполне хорошо работает, я не знаю.
This comment wasn’t rated yet0
Хмм… у меня на демо странице ни каких ошибок.
А какая версия оперы?
У меня 11.00 (сборка 1156)
Пробовал все демки, командная строка молчит, ни одной ошибки…
This comment wasn’t rated yet0
Хм =) Проблема отпала сама собой, ошибки исчезли и все заработало… А вообще такие вещи слишком просто делать чтоб использовать библиотеку =) Это же один див по сути с Вашим html внутри.
This comment wasn’t rated yet0
Согласен, но зачем изобретать велосипед, если его кто то уже изобрел?
Это же придется отрабатывать анимацию, писать стили и прочее… А тут все готово, бери и юзай :)
В таких случаях, я обычно качаю подходящую библиотечку, удаляю лишнее, добавляю то что нужно и использую.
This comment wasn’t rated yet0
Эти 2 события “ajaxStart” и “ajaxStop” могут быть привязаны к любому элементу страницы. jQuery вызывает их глобально.

Однажды я столкнулся с проблемой. На сайте было много вызова ajax-методов и для них всех отображалась иконка лоудера — все работало великолепно пока… Однажды решили прикрутить чат, кот использует ajax запросы на сервер для проверки статуса нов сообщений и прочей мета инфы. И стал этот лоудер как новогодняя елка, да на каждй странице. Пришлось переписать c использованием jQuery.ajax: beforeSend и complete
This comment wasn’t rated yet0
Автора оригинальной статьи поправили по поводу второго пункта. Он внёс исправления и извинился за путание читателей. azproduction внесите исправления, пожалуйста, что б новички не пугались, что у них что-то не работает.
Total votes 1: ↑1 and ↓0+1
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr