JQuery. Продолжение

JQuery - это фреймворк, а не просто библиотека функций. И как фреймворк, JQuery имеет определенную идеологию, определенный стиль. Сравним два фрагмента, делающих одно и то же:

Чистый Javascript	Jquery
window.onload = function() {    //…  }	$(function(){   //…  })

Допустим, нужно подсветить фон гиперссылок, указывающих на веб-ресурсы (среди прочих гиперссылок).

Современное кроссбраузерное решение на чистом Javascript:

var pth = "a[href^='http://']";

var links= document.querySelectorAll (pth);
for (var i = 0; i < links.length; i++) 
 links[i].style.background = 'red'

Решение на JQuery

$("[href^='http://']").css("background","red");

(приведем еще работающий вариант для не-IE)

var pth = "//a[starts-with(@href,'http://')]";
var links = document.evaluate(pth, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for (var i=0; i < links.snapshotLength; i++) 
   links.snapshotItem(i).style.background = 'red';

---

---

Рассмотрим более сложный пример с AJAX

Чистый Javascript:

var x = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');  
x.open("POST", "/request.php", true);
x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
str = encodeURIComponent("Имя") + "=" + encodeURIComponent("Джон") + "&"; 
str += encodeURIComponent("Фамилия") + "=" + encodeURIComponent("Резиг")
x.send(str);
x.onreadystatechange=function(){
 if (x.readyState != 4) return;
 document.body.innerHTML =  x.responseText;
}

JQuery

$.ajax({
  type: "POST",
  url: "/request.php",
  data: {Имя: 'Джон', Фамилия: 'Резиг'},
  success: function(msg){
    $("body").html(msg);
  }
});

---

---

В оболочке подключите базовый JQuery. Создайте в body прямоугольный див с фоновым цветом и присвойте ему идентификатор panel. Создайте рядом в абзаце элемент span с классом inactive и надписью Спрятать. Опишите каскадные стили для классов inactive и active, отличающиеся, например, цветом фона и шрифта.

Внесите в раздел скрипта код:

$(document).ready(function(){
    $(".inactive").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active");
    });
});
 

Щелкните по "Спрятать" один раз, потом другой. Убедитесь, что применяется эффект плавного исчезновения.
Так в JQuery работают анимационные эффекты.


Подключение (в head):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>

Версия 1.5

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

---

---

Ресурсы:

• Официальный сайт  (в том числе раздел пользовательского интерфейса)
• Блог на Хабре (в том числе раздел "Для начинающих")
  сообщение о 1.5
• Книга "jQuery in Action"
• Основы JQuery
• Подборка ресурсов - как электронных, так и печатных
• Интерактивный редактор
• Вики
• Шпаргалка UPD http://jqapi.ru/
• Селекторы UPD http://jquery.page2page.ru.nyud.net/tags/ifr.html
• Плагины
• Визуализация
  
• О других фреймворках
• Работа с Google API, в т.ч. с календарем, с таблицами (пример с закладками), с построением графиков.
• Еще одно API для построения графиков