Те, кто с помощью 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); });