Придерживаясь формальностей jQuery - это полностью бесплатный javascript фреймворк (framework) (для тех кто не в курсе скажу, что фреймворк - это набор готовых функций для облегчения решения типовых задач). Слова "полностью бесплатный" добавлены потому, что есть и не совсем бесплатные, например ExtJS. На самом деле jQuery гораздо больше, чем просто фреймворк, это новая психология программирования на javascript, если можно так выразиться. Я бы сравнил появление jQuery с появлением самого javascript. И это не просто громкие слова. Те, кто уже работает с jQuery подтвердят, что по прошествии некоторого времени начинаешь забывать структуры обычного javascript кода, а строка
становится такой же обязательной как .
Какие же преимущества привнес jQuery в стандартный набор функций языка, которые позволяют мне говорить о "новой психологии программирования на javascript"?
Во-первых, это отношение к (x)html документу действительно как к xml, а не просто формально из-за разметки. На практике это означает, что я легко могу получить доступ к любому узлу (node) древовидной структуры и его атрибутам, а также свободно перемещаться по ветвям. Например, есть table: view source
1
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
view source
1
| one | two | three | four |
| one | two | three | four |
| one | two | three | four |
| 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
2
3
for (var i = 0; i < rows.length; i++) {
4
5
for (var j = 0; j < tds.length; j++)
6
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
view source
1
$("#test_tbl td").css("border","1px solid gray");
Одна строка! Как вам? А теперь 3-я ячейка 2-й строки: view source
1
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
| one | two | three | edit del |
| four | five | six | edit del |
| seven | eight | nine | edit del |
| ten | eleven | twelve | edit del |
27
28
29
30
31
32
33
view source
01
| one | two | three | edit del |
| four | five | six | edit del |
| seven | eight | nine | edit del |
| ten | eleven | twelve | edit del |
27
28
29
30
31
32
33
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
05
}
06
07
08
09
for(var i=0; i
