Создание собственных селекторов jQuery

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
 
Строка 17: Строка 17:
  |-class="row"
  |-class="row"
  |class="funct"|<span class="oneLine">$(":selecorName")</span>
  |class="funct"|<span class="oneLine">$(":selecorName")</span>
-
  |class="discr"|вернет все элементы, удовлетворяющие фильтру selecorName на странице. (такое использование крайне не желательно, поскольку оно будет выполняться крайне медленно).
+
  |class="discr"|вернет все элементы, удовлетворяющие фильтру selecorName на странице. (такое использование крайне не желательно, поскольку оно будет выполняться очень долго).
  |}
  |}
Строка 23: Строка 23:
<source lang="javascript">
<source lang="javascript">
$.expr[':'].selecorName = function(obj, index, meta, stack){
$.expr[':'].selecorName = function(obj, index, meta, stack){
-
   // реализация функции
+
   // реализация фильтрующей функции
};
};
</source>
</source>
<div class="descrList">
<div class="descrList">
   <div class="cont">
   <div class="cont">
-
<tt><b>obj</b></tt> &mdash; отдельный DOM-элемент, который необходимо проверить на удовлетворение фильтру.<br/>
+
<tt><b>obj</b></tt> &mdash; DOM-элемент, который необходимо проверить на удовлетворение селектору.<br/>
<tt><b>index</b></tt> &mdash; порядковый номер проверяемого элемента (''obj''), в наборе фильтруемых элементов (нумерация начинается с нуля).<br />
<tt><b>index</b></tt> &mdash; порядковый номер проверяемого элемента (''obj''), в наборе фильтруемых элементов (нумерация начинается с нуля).<br />
-
<tt><b>meta</b></tt> &mdash; подробности использования селектора (см. подробности ниже).  
+
<tt><b>meta</b></tt> &mdash; подробности использования селектора (см. подробности ниже). <br />
<tt><b>stack</b></tt> &mdash; массив со всеми фильтруемыми элементами.  
<tt><b>stack</b></tt> &mdash; массив со всеми фильтруемыми элементами.  
   </div>
   </div>
Строка 101: Строка 101:
Организуем селектор, который будет искать элементы с заданным CSS-свойством <tt>display</tt>:
Организуем селектор, который будет искать элементы с заданным CSS-свойством <tt>display</tt>:
-
<tt>display</tt> равным <tt>block</tt>:
 
<source lang="javascript">
<source lang="javascript">
$.expr[':'].needDisplay = function(obj, index, meta){
$.expr[':'].needDisplay = function(obj, index, meta){

Текущая версия на 11:48, 11 апреля 2012

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

':selecorName' и ':selecorName(value)'.

Это так называемые фильтрующие (или псевдо) селекторы.

$("div:selecorName") вернет все div-элементы, удовлетворяющие фильтру selecorName.
$(".block:selecorName") вернет все элементы с классом block, удовлетворяющие фильтру selecorName.
$("div .block:selecorName") вернет все элементы с классом block, лежащие внутри div'ов и удовлетворяющие фильтру selecorName.
$(":selecorName") вернет все элементы, удовлетворяющие фильтру selecorName на странице. (такое использование крайне не желательно, поскольку оно будет выполняться очень долго).

Чтобы организовать собственный фильтрующий селектор, нужно использовать следующий шаблон:

$.expr[':'].selecorName = function(obj, index, meta, stack){
   // реализация фильтрующей функции
};

obj — DOM-элемент, который необходимо проверить на удовлетворение селектору.
index — порядковый номер проверяемого элемента (obj), в наборе фильтруемых элементов (нумерация начинается с нуля).
meta — подробности использования селектора (см. подробности ниже).
stack — массив со всеми фильтруемыми элементами.

Если фильтрующая функция возвращает true, то проверяемый элемент obj включается в результат, если false — не включается.

Теперь о параметре meta. Он представляет из себя массив из четырех элементов:

[
  Строка с полным вариантом фильтрующего селектора,
  Строка с именем фильтрующего селектора,
  Используемые в селекторе кавычки (если таковые имеются),
  Строка с переданным в селектор параметром (если он имеются)
]

Несколько примеров возможных значений параметра meta:

Селектор без параметра:

$('div:selecorName')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  undefined,
  undefined
];

Селектор с параметром без кавычек:

$('div:selecorName(arg)')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  '',
  'arg'
];

Селектор с параметром в кавычках:

$('div:selecorName("arg, arg2")')
 
// meta будет содержать:
[
  ":selecorName",
  "selecorName",
  '"',
  'arg, arg2'
];

Примеры

Организуем селектор, который будет искать элементы с CSS-свойством display равным block:

$.expr[':'].block = function(obj){
  if( $(obj).css('display') == 'block' )
    return true;
  else
    return false;
};
 
$('a:block'); // найдет все блочные ссылки

Организуем селектор, который будет искать элементы с заданным CSS-свойством display:

$.expr[':'].needDisplay = function(obj, index, meta){
  if( $(obj).css('display') == meta[3] )
    return true;
  else
    return false;
};
 
$('a:needDisplay("inline")'); // найдет все строчные ссылки
$('a:needDisplay("block")'); // найдет все блочные ссылки

В разделе Рецепты есть реализация селектора nth-of-type.