jQuery

jQuery - очень хорошая библиотека JavaScript, облегчающая работу. Я, как программист PHP не работаю с js часто, но тем не менее, иногда приходится. Поэтому здесь я выложу некоторые фрагменты на jQuery, чтобы использовать их вновь. А вот хороший сайт по JQuery

События

Чтобы навешать какое либо событие, очень удобно использовать метод on:

$(selector).on(events, [selector], [data], handler);
//Пример
$('a.class-a').on('click', function(){
     var href = $(this).attr('href');//$(this) - здесь это объект, с которы произошло событие
     alert('Переходим на '+href);
     return false; //Так можно отменить стандартное действие, в данном случае переход по ссылке
});
//Если объекты в DOM подгружаются после загрузки страницы, то на них навешать события можно так:
$('.content').on('click','a.class-a', function(){ //объект .content должен быть сразу на странице, при навешивании события
                                                // а объект a.class-a может появится в любой момент
     var href = $(this).attr('href');
     alert('Переходим на '+href);
});

Возможные события: blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Выбор объектов в DOM

Выбор объекта по селектору, получение свойств

Можно обратится к объекту в DOM, используя различные фильтры по селекторам. Список возможных селекторов и фильтров. Приведу пример как вернуть название всех отмеченных чекбоксов на странице:

$('input[type=checkbox]:checked').each(function(){ //each - 
        //осуществление перебора найденных объектов
    alert($(this).attr('name'));
});

В следующем примере выведу название всех чекбоксов и их статусов на странице:

$('input[type=checkbox]').each(function(){    
    alert($(this).attr('name')+'='+$(this).is(':checked'));//.is - 
          //проверяет объект на соответствие селектору
});

Перемещения по дереву DOM

Вот ссылка на хорошее описание всех функций с примерами. Ниже приведу список части функций, которые мне приходилось использовать, с кратким описанием:

.children() Находит все дочерние элементы у выбранных элементов, согласно селектору.
.closest() Находит ближайший, соответствующий заданному селектору элемент, из числа следующих: сам выбранный элемент, его родитель, его прародитель, и так далее, до начало дерева DOM.
.find() Находит элементы по заданному селектору, внутри выбранных элементов.
.next() Находит элементы, которые лежат непосредственно после каждого из выбранных элементов.
.parent() Находит родительские элементы у всех выбранных элементов.
.parents() Находит всех предков у выбранных элементов, т.е. не только прямых родителей, но и прародителей, прапрародителей и так далее, до начало дерева DOM.
.prev() Находит элементы, которые лежат непосредственно перед каждым из выбранных элементов.
.siblings() Находит все соседние элементы (под соседними понимаются элементы с общим родителем).

Эффекты

Эффектами я пользуюсь вообще не часто, но иногда приходится. Описание функций, для задание эффектов и работы с очередью выполнения. Покажу основные возможности на примере:

$('a.class-a').hide(); //скрыть объект
$('a.class-a').show(); //показать объект
//hide и show могут принимать набор параметров для плавного показа/скрытия
$('a.class-a').hide(1000); //простой вариант - скрыть за 1000 миллисекунд
//Анимация
$("div").animate({ 
        width: "100px",     //меняем css параметры    
        fontSize: "30px", 
        borderWidth: "3px"   
      }, 1500);       //в течении 1500 секунд 

Очередь анимации

Во всяких слайдерах, где происходит анимация нужно очищать очередь анимации, чтобы если пользователь кликнул 2 раза, анимация не затянулась на два раза, для этого я использую функцию .stop, но есть и другие, ссылку на них я приводил выше. Пример:

$('a.class-a').on('click', function(){ 
    $("div.example").stop(true,true); //первый параметр означает - остановить всю очередь
                                      //второй, перейти в конец текущей анимации
    $("div.example").animate({ 
        left: "+=100",  
    }, 2000); 
    return false;                                        
});

HTML:

<a href="#" class="class-a">сдвинуть на 100px >>>>>>>>>></a>
<div style="overflow: hidden; position: relative; border: 3px solid #7CAFF4; height: 50px;">
    <div style="height:50px; width:100px; position:absolute; background-color: #7CAFF4;" class="example">
    </div>
</div>

Ниже приведен результат примера, сколько бы раз подряд не нажимали на ссылку, анимация будет проходить всегда 2 секунды, не будет забиваться очередь.

сдвинуть на 100px >>>>>>>>>>

Ajax

Для реализация аякса, я использую метод .post:

$.post("/ajax.php", //Отправляем пост запрос по адресу /ajax.php
        {       //передаем объект - параметры POST запроса
		param1: "param1", 
		param2: param2
	}, function(data){ //Функция обработки результата
		data = JSON.parse(data); //Если вернули данные в
                        // формате JSON - преобразуем их в объект
		alert(data.res);//производим манипуляции с данными
	});

Манипуляции с объектами DOM

jQuery позволяет очень удобно манипулировать элементами на странице, можно без труда: менять атрибуты элементов, работать со стилями, добавлять новые элементы до, после, вместо существующих, получать содержимое элементов и их атрибутов. Функций достаточно много, и пользоваться мне приходилось всеми, в зависимости от задачи, поэтому я не могу выделить какой либо краткий список, а приводить все нет смысла. Поэтому даю ссылку: Манипуляции с объектами DOM