Реальный пиарJavaScriptJquery → jQuery - что это такое

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

JavaScript

Придерживаясь формальностей 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: view source
1
<table id="test_tbl" cellspacing="1" width="500">
2
<tbody><tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
3
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
4
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
5
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
6
</tbody></table>
view source
1
<table id="test_tbl" cellspacing="1" width="500">
2
<tbody><tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
3
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
4
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
5
<tr><td>one</td><td>two</td><td>three</td><td>four</td></tr>
6
</tbody></table>one two three four
one two three four
one two three four
one two three four

Мне захотелось, чтобы каждый td данной таблицы обрел border="1px solid gray" (предполагается, что проблему нужно решить средствами javascript). Стандартными методами это можно сделать, например, так: view source
1
var table = document.getElementById("test_tbl");
2
var rows = table.getElementsByTagName("tr");
3
for (var i = 0; i < rows.length; i++ ) {
4
var tds = rows[i].getElementsByTagName("td");
5
for (var j = 0; j < tds.length; j++ )
6
tds[j].style.border = '1px solid gray';
7
}
view source
1
var table = document.getElementById("test_tbl");
2
var rows = table.getElementsByTagName("tr");
3
for (var i = 0; i < rows.length; i++ ) {
4
var tds = rows[i].getElementsByTagName("td");
5
for (var j = 0; j < tds.length; j++ )
6
tds[j].style.border = '1px solid gray';
7
}

Как видим целых 7 строчек кода, причем я не могу назвать это "свободным" доступом, потому что представьте себе, что бы мне пришлось выписывать, если бы я захотел добавить border только 3-й ячейке 2-й строки, при условии, что ячейки не имеют уникальных идентификаторов ...
Теперь как это делается с помощью jquery: view source
1
$('#test_tbl td').css('border','1px solid gray');
view source
1
$('#test_tbl td').css('border','1px solid gray');


Одна строка! Как вам? А теперь 3-я ячейка 2-й строки: view source
1
$('#test_tbl tr:eq(1) td:eq(2)').css('border','1px solid gray');
view source
1
$('#test_tbl tr:eq(1) td:eq(2)').css('border','1px solid gray');


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

Во-вторых, jQuery совершил революцию в области html-javascript шаблонизации. До момента его появления последнее было если не принципиально невозможным, то уж настолько трудозатратным, что не многие отваживались с этим связываться, а само выражение "html-javascript шаблонизации" вызывало в лучшем случае улыбку. Широко бытовало мнение, что шаблонизация рациональна только средствами серверных языков программирования, но jQuery, благодаря развитому механизму обработки событий, позволил уже на уровне javascript отделить логику от представления. Рассмотрим пример, и вы поймете о чем я говорю. Несколько изменим нашу таблицу: view source
01
<table id="test_tbl2" cellspacing="1" width="500">
02
<tbody><tr>
03
<td>one</td>
04
<td>two</td>
05
<td>three</td>
06
<td><a class="edit">edit</a> <a class="del">del</a></td>
07
</tr>
08
<tr>
09
<td>four</td>
10
<td>five</td>
11
<td>six</td>
12
<td><a class="edit">edit</a> <a class="del">del</a></td>
13
</tr>
14
<tr>
15
<td>seven</td>
16
<td>eight</td>
17
<td>nine</td>
18
<td><a class="edit">edit</a> <a class="del">del</a></td>
19
</tr>
20
<tr>
21
<td>ten</td>
22
<td>eleven</td>
23
<td>twelve</td>
24
<td><a class="edit">edit</a> <a class="del">del</a></td>
25
</tr>
26
</tbody></table>
27
<div id="edit_div" class="pad3 bg bord abs dis">
28
<input type="text" size="15">
29
<input type="text" size="15">
30
<input type="text" size="15">
31
<input type="button" value="Сохранить" id="save_but">
32
<input type="button" value="Отменить" id="cancel_but">
33
</div>
view source
01
<table id="test_tbl2" cellspacing="1" width="500">
02
<tbody><tr>
03
<td>one</td>
04
<td>two</td>
05
<td>three</td>
06
<td><a class="edit">edit</a> <a class="del">del</a></td>
07
</tr>
08
<tr>
09
<td>four</td>
10
<td>five</td>
11
<td>six</td>
12
<td><a class="edit">edit</a> <a class="del">del</a></td>
13
</tr>
14
<tr>
15
<td>seven</td>
16
<td>eight</td>
17
<td>nine</td>
18
<td><a class="edit">edit</a> <a class="del">del</a></td>
19
</tr>
20
<tr>
21
<td>ten</td>
22
<td>eleven</td>
23
<td>twelve</td>
24
<td><a class="edit">edit</a> <a class="del">del</a></td>
25
</tr>
26
</tbody></table>
27
<div id="edit_div" class="pad3 bg bord abs dis">
28
<input type="text" size="15">
29
<input type="text" size="15">
30
<input type="text" size="15">
31
<input type="button" value="Сохранить" id="save_but">
32
<input type="button" value="Отменить" id="cancel_but">
33
</div>one two three edit del
four five six edit del
seven eight nine edit del
ten eleven twelve edit del

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

03
function appearence(){
04
$('#edit_div').slideToggle(200);
05
}
06

07
$('a.edit','#test_tbl2').click(function (){
08
tr = $(this).parent().parent();
09
for(var i=0; i<3; i++)
10
$('input:eq('+i+')','#edit_div').val($('td:eq('+i+')', tr).text());
11
appearence();
12
});
13
$('a.del','#test_tbl2').click(function (){
14
if(!confirm("Delete?")) return;
15
$(this).parent().parent().remove();
16
});
17
$('#save_but','#edit_div').click(function (){
18
for(var i=0; i<3; i++)
19
$('td:eq('+i+')', tr).text($('input:eq('+i+')','#edit_div').val());
20
appearence();
21
});
22
$('#cancel_but','#edit_div').click(appearence);
view source
01
var tr;
02

03
function appearence(){
04
$('#edit_div').slideToggle(200);
05
}
06

07
$('a.edit','#test_tbl2').click(function (){
08
tr = $(this).parent().parent();
09
for(var i=0; i<3; i++)
10
$('input:eq('+i+')','#edit_div').val($('td:eq('+i+')', tr).text());
11
appearence();
12
});
13
$('a.del','#test_tbl2').click(function (){
14
if(!confirm("Delete?")) return;
15
$(this).parent().parent().remove();
16
});
17
$('#save_but','#edit_div').click(function (){
18
for(var i=0; i<3; i++)
19
$('td:eq('+i+')', tr).text($('input:eq('+i+')','#edit_div').val());
20
appearence();
21
});
22
$('#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: view source
1
$.post("test.php", { name: "Alek" }, function(data){
2
alert("Data Loaded: " + data);
3
},'html');
view source
1
$.post("test.php", { name: "Alek" }, function(data){
2
alert("Data Loaded: " + data);
3
},'html');
Здесь я приведу только его, потому что документация по данному вопросу достаточно ясна.

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

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


Источник: http://easywebscripts.net

Рекомендуем



jQuery основы На первый взгляд связь не очевидна, но дело в том, что в основе функционирования jQuery лежит возможность легкого доступа к любому узлу xml дерева, коим и является html документ, а доступ этот осуществляется с помощью механизмов CSS и XPath


jQuery EasyTooltip plugin Во-первых, это мое стремление к простоте и красоте ибо они спасут мир, а когда я взглянул на исходный код нескольких существующих, то понял, что спасать мир придется долго


Сортировка в Java - легко! Теперь же мы можем сортировать и массивы простых типов и массивы объектов, написав относительно малый код, с помощью интерфейса Comparable