Те, кто с помощью jQuery написал уже не одну сотню, а может и тысячу строк javascript-кода, в этом посте врядли найдут много нового и/или интересного. Пост рассчитан на разработчиков, которые только начинают знакомиться со всей мощью бтблиотеки jQuery. В нем я дам несколько примеров скриптов, которые я время от времени использую с небольшим количеством изменений или вообще без таковых.

[Добавлено перед публикацией поста]
Все примеры достаточно просты, большинство (5 штук!) взяты из документации, но они активно используются мной и я решил сделать пост-заметку для себя. Может, еще кому-то будет полезно. Те, кто не использует jQuery либо другую библиотеку (еще остались такие?) поймут, что эти несколько строк кода в каждом примере иногда заменяют десятки строк кода на javascript’е без использования сторонних библиотек и своих велосипедов.
[/Добавлено перед публикацией поста]

• Прочитать и/или изменить значение нужного атрибута в элемента DOM-модели:
  var value = $("#element").attr("custimAttribute");
  и
  $("#element").attr("custimAttribute")=”some text”;
• Тоже самое, но для классов:
  методы .addClass() (http://api.jquery.com/addClass/) и .removeClass() (http://api.jquery.com/removeClass/) 
• Сделать подсветку всех картинок на странице по заданному параметру (имя класса):
  $(".image").mouseover(function () {
      $(this).css("border-width", "2px");
      $(this).css("border-style", "solid");
      $(this).css("border-color", "#1b5790");
  });
• Сделать какие-либо действия над коллекцией объектов:
  $.each([52, 97], function(index, value) {
      alert(index + : + value);
  });
  http://api.jquery.com/jQuery.each/
• Присвоить tabIndex для всех элементов ввода на форме:
  $(function(){
      var tabindex = 1;
      $(input,select).each(function() {
           if (this.type != "hidden") {
                var $input = $(this);
                $input.attr("tabindex", tabindex);
                tabindex++; 
           }
      });
   });
  http://greatwebguy.com/programming/dom/setting-your-tabindex-on-your-html-forms-automatically-with-jquery/
• Отправить AJAX-запрос на сервер:
  как ни странно, но примеры из документации http://api.jquery.com/category/ajax/ достаточно работоспособны чтобы использовать их практически без изменений (ссылку на службу все-таки прийдется подставить свою).
• Создать start-up скрипт на странице (без использования ScriptManager, входящего в состав ASP.NET):
  $(document).ready(function () {
       alert (hello);
  });

В связи с тем, что я повсеместно пытаюсь избавиться от ASP.NET AJAX Control Toolkit (ACT) и перейти на использование jQuery, то от использования Hover Extender от ACT пришлось отказаться. Сразу же было найдено большое количество разнообразных плагинов для jQuery, но большинство из них имели недостаточную реализацию, из-за чегоостановился на jQuery plugin EZPZ Tooltip.

Из основных достоинств данного плагина хочется выделить:

• "Чистый" HTML - не нужно добавлять специальные атрибуты для элементов, плагин завязывается на отдельный HTML элемент.
• Конфигурация через наименование (Convention over configuration) - поведение элементов зависит от из ID.
• Гибкие настройки - с помощью CSS можно настроить как внешний вид контрола, так и его позиционирование.
• Возможность замены стандартных эффектов путем перехвата соответствующих событий на jQuery.
• Удобство и простота работы.
• Маленький размер - 4.5K в сжатов виде.

Более подробно о всем этом можно почитать на странице проекта, а я хочу рассказать как можно его использовать в связке с ASP.NET на примере простого UserControl.

Для инициализации контрола нужно выполнить небольшой javascript:

$("#example-target-1").ezpz_tooltip();
или
$("#target").ezpz_tooltip({contentId:"content"}); - В случае если у наших HTML-элементов будут "нестандартные" для этого контрола ID.

Так как, ASP.NET сам генерирует нам ClientID элементов (я не учитываю специфику ASP.NET 4.0, где можно отключать автоматическую генерацию ClientID), то приходится использовать 2-й вариант таки образом:

При этом у нас:

•  TargetControlId - ID элемента, при наведении на который будет отображаться наш hover (tooltip).
• ContainerClientId - ID элемента который будет показываться в качестве hover (tooltip).

 Разметка нашего user control выглядит так:

Нам остаётся только разместить наш UserControl на странице и подключить необходимые стили и скрипты. Можно ещё сделать WebControl, но это уже зависит от конкретной задачи. В моём случае UserControl был предпочтительнее.

HoverControl.zip (31.35 kb)

Разработчики JavaScript-фреймворка JQuery не перестают нас удивлять. После недавнего релиза JQuery 1.4.1 нам представили инструмент для unit-тестирования кода, написанного на JavaScript - QUnit. 

В данный момент поддерживаются такие функции как expect(), equals(), ok(), same(), log() и асинхронные тесты. Вместе с фреймворком распространяется css-файл, с помощью которого можно быстро и красиво выводить результаты тестов. Также разработчики активно используют его для тестирования самого JQuery, поэтому можно посмотреть уже готовые приверы от авторов фреймворка.

P.S. Что-то подсказывает мне что не загорами плагин для FireBug, по крайней мере, мне бы этого хотелось...

Несколько дней назад вышла новая версия популярного JavaScript framework'а jQuery, пока только альфа, которую сами разработчики не рекомендуют использовать в production. Официальная информация на блоге http://blog.jquery.com/2009/12/04/jquery-14-alpha-1-released, а я расскажу о своих первых впечатлениях по сравнению с последней стабильной версией 1.3.2.

Для начала сравним размеры файлов:

Видем что размер вырос, примерно, на 30 килобайт. Много это или мало - судите сами.

Пока в целях тестирования подключил библиотеку к двум проектам, где jQuery спользуется не так активно, но, в моём случае, вся функциональнось работает как и работала, ничего не поламалось, плагины успешно работают. Сравнивать производительность с ранней считаю нецелесообразным, т.к. к релизу, а то и к следующим версиям всё может поменяться как в лучшую, так и худшую стороны.