Основы jquery

В этой статье я постараюсь привести основы jQuery. Статья, надеюсь, будет расширяться

Значения функции $()

1. $() данная функция вернет специальный объект Javascript, содержащий массив элементов, отобранных по переданному селектору. Иначе говоря, вернет "обертку".

1.1Ограничиваем отбор элементов (например, p) одним блоком (например, с id kukaracha).

JQuery

$('p','div#kukaracha')

Не путать с конструкцией $('span,h1') отберет и span и заголовок.

2 Этим мы создали элемент.

JQuery

$("<span>Парам-тарарам</span>") 

3$ (псевдоним jQuery) может выступать префиксом для ВСПОМОГАТЕЛЬНЫХ функций. Данныя функции не работают с элементами объектной модели документа (DOM) - этим занимаются методы.
Чтобы исключить появление ошибок при взаимодействии с другими библиотеками (например, если $ уже занят другой библиотекой) необходимо заключить вспомогательную функцию в следующую конструкцию:

JQuery

(function($){
// ваша вспомогательная функция
})(jQuery);

Готовность дерева DOM

JQuery

$(function() {

DOM уже загружен, можете кодировать

}); 

Или:

             
      $(document).ready(function(){	
      
      $("div.number_one").hide();
      
      });

             
      jQuery(document).ready(function(){	
       
      $("div.number_two").hide();
      
      }); 

Создаем плагин

JQuery

$.fn.doit 

расширяем обертку $ методом doit. Или, иначе говоря, расширяем объект $.fn. В плагине ключевой слово this - это тот самый jQuery объект, из которого был вызван плагин. Другими словами, контекст (this) ссылается на обернутый набор, то есть this уже идентичен $(this).

Подключили внешнюю библиотеку jQuery

HTML

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

Селектор выбора прямого потомка

$('span > a') 

отберет только прямых потомков (потомков вложенных куда-то еще не отберет)

Контест в jQuery

JQuery

this

В javascript this (контекст функции) - это объект, свойства которого содержат ссылку для вызова функции. (this это ссылка на текущий экземпляр объекта).Например:

var karamba = tuk.doit();

В качестве контекста (в конструкторе) будет выступать экземпляр объекта tuk. Или: вместо this подставляется название той сущности, которая вызвала данную функцию. В атрибуте (например, onclick) this - это ссылка на тот HTML-элемент, который запустил событие onclick.

Основные фильтры jQuery

4.1 Например, необходимо отыскать 7-ю по счету ячеку таблицы.

$('td:eq(6)').css('border','2px solid #fff');  

4.2 Например, необходимо отыскать все абзацы, которые следуют после 7-го по счету абзаца.

$('p:gt(6)').css('border','2px solid #fff');  

4.3 Например, отбираем все абзацы перед 7-м абзацем.

$('p:lt(6)').css('border','2px solid #fff');  

4.4 Например, отбираем все абзацы кроме 7-го.

$('p:not(:eq(6))').css('border','2px solid #fff');  

4.5 Например, отбираем абзацы, который в данный момент анимируется.

$('p:animated').css('border','2px solid #fff');  

Внешняя таблица стилей и код jquery

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

Статья в процессе написания.