# 06: Проширења селектора јКуери - ЦСС-трикови

Anonim

јКуери може одабрати све што ЦСС3 може одабрати. Али ту се не зауставља! Постоји низ додатних селектора које јКуери нуди (путем механизма за одабир Сиззле) који су прилично корисни понекад. На пример, ЦСС има селекторе атрибута који вам омогућавају да одаберете елемент на основу било ког произвољног атрибута који елемент може имати. На пример:

 

Постоји ЦСС селектор који можемо користити у јКуери-у да би изабрали:

$("(data-whatever='elephant-eyeballs')");

Постоје варијације на селектору атрибута, као што уместо =можете учинити ^=да назначите „почиње са овом вредношћу“. Али из неког разлога, ЦСС нема! = Или „није једнако овој вредности“. јКуери ради! То је пример проширења селектора јКуери.

Постоји много ових додатака за селектор. Неколико о којима конкретно говоримо у овом сцреенцаст-у:

  • : ек () - 0-индексирана верзија: нтх-цхилд ()
  • : евен - пречица за: нтх-цхилд (евен)
  • : гт (н) - изаберите елементе са већим индексом од н. Такође пречица за сложенији: нтх-цхилд () форумла.

Вероватно најкорисније проширење селектора од свих је: хас () - што ограничава избор на елементе који садрже оно што прослеђујете овом псеудо селектору (или је то псеудо псеудо селектор :) Вероватно ће једног дана у будућности ЦСС имати нешто попут ово за нас (мислим да ће бити као pre ! code), али то је далеко. Нажалост, у овом сцреенцаст-у не износим баш убедљив аргумент за то, али знаћете када вам затреба! На пример, „Изаберите све .модуле који садрже х3.спортс-бар“ - такве ствари.

Ако желите, можете и да направите сопствена проширења за избор. Ево чланка о томе. Пример је израда :inviewкоја бира елемент само ако је видљив на страници на тренутној позицији помицања. То би било овако:

jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));