jQuery — что это такое

Придерживаясь формальностей jQuery — это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе скажу, что фреймворк — это набор готовых функций для облегчения решения типовых задач). Слова «полностью бесплатный» добавлены потому, что есть и не совсем бесплатные, например ExtJS. На самом деле jQuery гораздо больше, чем просто фреймворк, это новая психология программирования на javascript, если можно так выразиться. Я бы сравнил появление jQuery с появлением самого javascript.
И это не просто громкие слова. Те, кто уже работает с jQuery подтвердят, что по прошествии некоторого времени начинаешь забывать структуры обычного javascript кода, а строка
<script type="text/javascript" src="jquery.js"></script>
становится такой же обязательной как <body>.

Какие же преимущества привнес jQuery в стандартный набор функций языка, которые позволяют мне говорить о «новой психологии программирования на javascript»?

  • Во-первых, это отношение к (x)html документу действительно как к xml, а не просто формально из-за разметки. На практике это означает, что я легко могу получить доступ к любому узлу (node) древовидной структуры и его атрибутам, а также свободно перемещаться по ветвям. Например, есть table:
    
    
    one two three four
    one two three four
    one two three four
    one two three four

    Мне захотелось, чтобы каждый td данной таблицы обрел border=»1px solid gray» (предполагается, что проблему нужно решить средствами javascript). Стандартными методами это можно сделать, например, так:

    var table = document.getElementById("test_tbl");
    var rows = table.getElementsByTagName("tr");
    for (var i = 0; i < rows.length; i++ ) {
        var tds = rows[i].getElementsByTagName("td");
        for (var j = 0; j < tds.length; j++ )
        tds[j].style.border = '1px solid gray';
    }

    Как видим целых 7 строчек кода, причем я не могу назвать это "свободным" доступом, потому что представьте себе, что бы мне пришлось выписывать, если бы я захотел добавить border только 3-й ячейке 2-й строки, при условии, что ячейки не имеют уникальных идентификаторов ...
    Теперь как это делается с помощью jquery:

    $('#test_tbl td').css('border','1px solid gray');

    Одна строка! Как вам? А теперь 3-я ячейка 2-й строки:

    	$('#test_tbl tr:eq(1) td:eq(2)').css('border','1px solid gray');



    Опять одна строка! Неплохо правда? А ведь это самые простые вещи, основы, в javascript это изначально должно было быть так просто! Вам наверняка потребуется время, чтобы привыкнуть думать в таких категориях.

  • Во-вторых, jQuery совершил революцию в области html-javascript шаблонизации. До момента его появления последнее было если не принципиально невозможным, то уж настолько трудозатратным, что не многие отваживались с этим связываться, а само выражение "html-javascript шаблонизации" вызывало в лучшем случае улыбку. Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления. Рассмотрим пример, и вы поймете о чем я говорю.
    Несколько изменим нашу таблицу:

    
    
    one two three edit del
    four five six edit del
    seven eight nine edit del
    ten eleven twelve edit del




    Как видите, это чистый html. Дизайнер может издеваться над стилями сколько угодно, лишь бы сохранялись названия классов. А вся логика теперь сосредоточена в script блоке:

    var tr;
    
    function appearence(){
    	$('#edit_div').slideToggle(200);
    }
    
    $('a.edit','#test_tbl2').click(function (){
    	tr = $(this).parent().parent();
    	for(var i=0; i<3; i++)
    	$('input:eq('+i+')','#edit_div').val($('td:eq('+i+')',tr).text());
    	appearence();
    });
    $('a.del','#test_tbl2').click(function (){
    	if(!confirm("Delete?")) return;
    	$(this).parent().parent().remove();
    });
    $('#save_but','#edit_div').click(function (){
    	for(var i=0; i<3; i++)
    	$('td:eq('+i+')',tr).text($('input:eq('+i+')','#edit_div').val());
    	appearence();
    });
    $('#cancel_but','#edit_div').click(appearence);
    

    Попробуйте реализовать подобный функционал стандартными средствами, уложитесь в 20 строчек? Но это еще не все, проницательный ум спросит: какая же это шаблонизация, ведь таблицу же надо заполнять данными из бд, а для этого все равно нужен php цикл? На самом деле совсем не обязательно, заполнять тоже можно яваскриптом (если вы, конечно, не ориентируетесь на пользователей с отключенным javascript, а если ориентируетесь - зачем эту статью читаете?). Здесь мнения программеров расходятся в соответствии с личными предпочтениями. Лично я придерживаюсь мнения, что таблицы данных как таковые удобнее делать php циклом, а вот работать с web формами (где шаблонизация не менее актуальна) лучше исключительно с помощью jquery, способом, показанным выше.

  • В-третьих, это качественно новый подход к разработке пользовательского интерфейса (GUI) и визуальных эффектов на web странице. Посетите http://jqueryui.com/ и вы согласитесь со мной. Такие тривиальные компоненты как слайдер (slider), которые раньше требовали написания отдельного модуля (сам таким занимался javascript/slider.php), теперь занимают одну строчку кода
    $("#slider").slider();
    Так же дело обстоит и с визуальными эффектами появления/исчезания блоков и др.
  • В-четвертых, новый уровень работы с AJAX. Внести что-то новое в этой области практически не возможно (с точки зрения javascript программирования), поэтому jquery лишь до предела упрощает написание кода. Посудите сами, вот пример типового аякс запроса методом post:
    $.post("test.php", { name: "Alek" }, function(data){
        alert("Data Loaded: " + data);
    },'html');

    Здесь я приведу только его, потому что документация по данному вопросу достаточно ясна.

  • В-пятых, серьезный подход разработчиков к расширяемости позволяет тысячам программистов во всем мире самостоятельно писать модули расширения и делиться ими с остальными. На практике это означает, что перед решением любой задачи вы можете посмотреть не решил ли ее уже кто-нибудь до вас. С большой долей вероятности вам не придется начинать с нуля, а при хорошем раскладе не нужно будет ничего делать вообще. Ссылка в тему http://plugins.jquery.com

Если все вышеперечисленное не убедило вас в рациональности использования рассматриваемого фреймворка, то вы настоящий "яваскриптовый ортодокс", или вам уже далеко за 40 и все, что появилось после basic'а для вас полная чушь. Ну а все, кого убедило - осваивайте, используйте ... Кстати, jquery, на мой взгляд, проще для понимания, чем к примеру Mootools (http://mootools.net/) или Prototype (http://www.prototypejs.org/), не говоря уж про ExtJS
(http://extjs.com/).

Читайте документацию на оф. сайте
http://jquery.com. Ну и на нашем можно найти еще пару интересных статей ...

10 thoughts on “jQuery — что это такое

  1. jQuery имеет смысл применять только там, где планируется серьезное использование ее функционала. К примеру, если нужен только календарь, то лучше написать килобайтный скрипт самому, чем грузить 100 килобайтную jQuery. Даже если вы слабы в Яваскрипте, множество отдельно реализованных функций можно найти в сети бесплатно, в компактном виде. Не используйте jQuery ради одной-двух функций на сайте и ваш сайт будет грузиться гараздо быстрее. Универсальность jQuery определяется большим количеством вложенного в нее кода. За это приходится расплачиваться весом скрипта. Если большенство этого кода не используется, ложим jQuery на дальнюю полку и пишем (находим) что-то более компактное. Только если вместо jQuery нужно написать свыше 50 килобайт собственного кода, использование ее готового кода оправдано.

  2. С общих позиций, конечно, Константин прав. Однако как сказал автор — это же психология) да и потом 100 килобайтная jQuery — это вы загнули. 18Kb при minified&gzipped и все в кэш. ну и где тут нагрузка страшная? на этой странице — картинок по объему больше))) конечно, лишний запрос к серверу это часто бывает критично. но настолько ли? и потом человек, который пишет на jQuery редко обходится одной простой javascript-задачей на сайте.

  3. хотелось бы узнать … а насколько безопасен в использовании?! есть ли такие моменты когда можно подменить значения…к примеру установить каким нибудь образом дату рождения на ложную…и т.д. ???

  4. Спасибо! Коротко, о главном, понятно и интересно! Обожаю Ваш сайт

  5. Крутой Сайт :))) Спасибо Автору, за ценную, в доступном виде !!! 🙂

  6. Огромное вам спасибо за такую дорогую информацию! Огромное спасибо автору!

  7. 3-я ячейка 2-й строки в JS одна строка: document.getElementsByTagName("tr")[1].getElementsByTagName("td")[2].style.border = '1px solid gray';

  8. jQuery очень полезная библиотека. С помощью нее можно сделать офигенно красивый динамический сайт очень просто и быстро. Всем рекомендую!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *