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

 


Comments are closed