Jquery как найти несколько элементов

Jquery как найти несколько элементов

I’m new to JQuery/Javascript etc… based on the following article:
How to make an anchor tag refer to nothing?

I would like to apply the java function to several id’s. Can we not make the function execute for classes as opposed to ids?

<span class="style1" id="myid">Link</span> 
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>
<span class="style1" id="myid">Link</span>

$('myid').click(function() { 
    /* put your code here */ 
});

Basically as above, how do I execute the function above for ALL of the links? Is this possible? Thanks in advance.

Community's user avatar

asked Mar 28, 2012 at 17:36

RiceBucket's user avatar

3

you should name the IDs uniquely, 

<span class="style1" id="myid1">Link</span> 
<span class="style1" id="myid2">Link</span>
<span class="style1" id="myid3">Link</span>
<span class="style1" id="myid4">Link</span>
<span class="style1" id="myid5">Link</span>

then use this code

$('#myid1,#myid2,#myid3,#myid4,#myid5').click(function() { 
    /* put your code here */ 
});

answered Mar 28, 2012 at 17:41

Sujit Agarwal's user avatar

Sujit AgarwalSujit Agarwal

12.3k11 gold badges48 silver badges79 bronze badges

3

Use the following

$('.style1').click(function() {      
    /* put your code here */  
});

This adds a click handler to all elements with class containing style1. You should not have duplicate IDs

Ruan Mendes's user avatar

Ruan Mendes

89.5k31 gold badges152 silver badges215 bronze badges

answered Mar 28, 2012 at 17:37

Scorpion-Prince's user avatar

Scorpion-PrinceScorpion-Prince

3,5363 gold badges18 silver badges24 bronze badges

0

First off, IDs should be unique. You should not have multiple elements with the same ID.

To select by ID in jQuery use the # character. $('#myid'). This will get the first element with that ID, as there should only be one (you can kinda cheat by doing $('[id="myid"]') to get get multiple elements with the same ID).

I suggest using a class to select all of your links. Classes are selected using the . character.

$('.style1').click(function(){});

answered Mar 28, 2012 at 17:38

gen_Eric's user avatar

gen_Ericgen_Eric

222k40 gold badges297 silver badges337 bronze badges

0

Источник

Есть следующий код:

<p>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
   <img src.../>
   <img src.../>
</p>
<p>
   <img src.../>
</p>

Как с помощью jquery обернуть в контейнер те теги img, которые идут подряд чтобы стало так?

<p>
   <span class='set'>
      <img src.../>
      <img src.../>
   </span>
</p>
<p>
   <span class='set'>
      <img src.../>
      <img src.../>
      <img src.../>
   </span>
</p>
<p>
   <img src.../>
</p>

Есть метод wrapAll, но я не понимаю, что ему передать

$("???").wrapAll("<span class='set'>");

Если делать wrapAll по img+img он обернет второй, третий и последующие, но не первый, а p>img перенесет все шесть img в первый p.

Источник

.find( selector )Returns: jQuery

Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

  • version added: 1.0.find( selector )

    • selector

      A string containing a selector expression to match elements against.

  • version added: 1.6.find( element )

    • element

      An element or a jQuery object to match elements against.

Given a jQuery object that represents a set of DOM elements, the .find() method allows us to search through the descendants of these elements in the DOM tree and construct a new jQuery object from the matching elements. The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

The first signature for the .find()method accepts a selector expression of the same type that we can pass to the $() function. The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. The expressions allowed include selectors like > p which will find all the paragraphs that are children of the elements in the jQuery object.

Consider a page with a basic nested list on it:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

 
  <li class="item-i">I</li>
      <li class="item-a">A</li>
          <li class="item-1">1</li>
          <li class="item-2">2</li>





  



                       
  





          <li class="item-3">3</li>
      <li class="item-c">C</li>
  <li class="item-iii">III</li>

If we begin at item II, we can find list items within it:

1

 
$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

The result of this call is a red background on items A, B, 1, 2, 3, and C. Even though item II matches the selector expression, it is not included in the results; only descendants are considered candidates for the match.

Unlike most of the tree traversal methods, the selector expression is required in a call to .find(). If we need to retrieve all of the descendant elements, we can pass in the universal selector '*' to accomplish this.

Selector context is implemented with the .find() method; therefore, $( "li.item-ii" ).find( "li" ) is equivalent to $( "li", "li.item-ii" ).

As of jQuery 1.6, we can also filter the selection with a given jQuery collection or element. With the same nested list as above, if we start with:

1

 
var allListElements = $( "li" );

And then pass this jQuery object to find:

1

 
$( "li.item-ii" ).find( allListElements );

This will return a jQuery collection which contains only the list elements that are descendants of item II.

Similarly, an element may also be passed to find:

1

2

 
var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );

The result of this call would be a red background on item 1.

Examples:

Starts with all paragraphs and searches for descendant span elements, same as $( "p span" )

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>





  



                       
  





<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
$( "p" ).find( "span" ).css( "color", "red" );

Demo:

A selection using a jQuery collection of all span tags. Only spans within p tags are changed to red while others are left blue.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

 
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<p><span>Hello</span>, how are you?</p>
<p>Me? I'm <span>good</span>.</p>
<div>Did you <span>eat</span> yet?</div>
$( "p" ).find( spans ).css( "color", "red" );

Demo:

Add spans around each word then add a hover and italicize words with the letter t.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

 
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
  find that which matters to you
var newText = $( "p" ).text().split( " " ).join( "</span> <span>" );
newText = "<span>" + newText + "</span>";
      $( this ).addClass( "hilite" );
      $( this ).removeClass( "hilite" );
  .find( ":contains('t')" )

Demo:

Источник

Выборка элементов

Cелекторы

Последнее обновление: 1.11.2015

Одним из важных функциональностей jQuery является выборка элементов. Чтобы что-то делать с элементами, манипулировать ими, применять к ним методы
jQuery, нам надо сначала их получить. Библиотека предоставляет нам удобный способ выбора элементов, основанный на селекторах.
Нам достаточно передать в функцию jQuery селектор и мы можем получить нужный нам элемент, который соответствует данному селектору. Например,
если необходимо получить все эелементы img, то мы можем использовать следующее выражение: $("img").
В данном случае “img” будет выступать в качестве селектора.

Рассмотрим основные селекторы jQuery, которые используются для выборки элементов.

Базовые селекторы jQuery

Шаблон селектора

Описание

Пример

$(“*”)

Выборка всех элементов страницы

Например, выражение $("*").css('background-color', 'red') окрасит все элементы страницы и саму страницу в красный цвет

$(“Element”)

Выборка всех элементов с данным именем тега

$("img") выбирает все элементы img

$("input") выбирает все элементы input

$(“#id”)

Выборка элемента с данным значением атрибута id

$("#btn1") выбирает элемент, у которого значение id равно btn1
(например, <div id="btn1"></div>)

$(“.class”)

Выборка всех элементов с данным значением атрибута class

$(".redStyle") выбирает элементы, у которого значение class равно redStyle
(например, <div class="redStyle"></div>)

$(“selector1,selector2,selectorN”)

Выборка всех элементов, которые соответствуют указанным селекторам

Например, у нас есть такой код:

<div class="apple"></div>
<div class="apple"></div>
<div class="orange"></div>
<div class="banana"></div>

то селектор $(".apple, .orange") выберет элементы, выделенные жирным

Конкретизация выбора

Мы можем использовать сразу несколько селекторов, чтобы более детально настроить выборку элементов. Например, у нас есть такая веб-страница:

<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
</head>
<body>
<h2>Словарь</h2>
<table id="tab">
<tr class="tabhead"><td><p>Слово</p></td><td><p>Перевод</p></td></tr>
<tr><td><p>table</p></td><td><p>таблица</p></td></tr>
<tr><td><p>apple</p></td><td><p>яблоко</p></td></tr>
</table>
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

	$("#tab").css('background-color', 'silver');
});
</script>
</body>
</html>

В данном случае мы используем селектор #tab, то есть выбираем нашу таблицу, которая имеет id=tab. Выражение css('background-color', 'silver')
устанавливает цвет элемента – в данном случае серебряный.

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

Но мы также можем использовать набор селекторов, чтобы более детально произвести действие. Например, нам надо, чтобы была закрашена только первая
строка, которая имеет атрибут class=”tabhead”. Тогда мы можем использовать следующий селектор: $("#tab .tabhead"). В этом
случае селектор выберет элемент с class=”tabhead”, который находится в элементе с id=”tab”.

При этом мы можем для сужения выборки использовать множество различных селекторов, например: $("div#menu a.redStyle"). К примеру
данный селектор может найти например такой элемент:

<div id="menu">
	<a href="m.tml" class="redStyle">Ссылка на сайт</a>
</div>

В данном случае мы применили иерархический селектор, который подразумевает, что элемент по второму селектору должен находиться в элементе по первому селектору.
Но кроме того, мы можем также применить еще ряд иерархических селекторов:

Шаблон селектора

Описание

Пример

родительский_селектор > дочерний_селектор

Выборка всех элементов, которые соответстуют второму селектору и являются дочерними для элементов первого селектора

Например, чтобы получить элемент ссылки в предыдущем примере мы можем использовать селектор $("#menu > a")

селектор1 + селектор2

Выборка элементов с селектором ‘селектор2’, которые располагаются непосредственно
за элементами ‘селектор1’. Причем оба элемента должны находиться на одном уровне

Например, у нас есть следующий блок ссылок:

<div id="menu">
	<a href="1.html" class="open">1.html</a>
	<a href="2.html" class="closed">2.html</a>
	<a href="3.html">3.html</a>
	<a href="4.html" class="open">4.html</a>
	<a href="5.html" class="closed">5.html</a>
	<a href="6.html" class="open">6.html</a>
</div>

Тогда селектор $(".closed + .open") выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом class=”open” идут непосредственно
за элементами с атрибутом class=”closed”.

селектор1 ~ селектор2

Выборка элементов с селектором ‘селектор2’, которые располагаются на одном уровне с элементами с селектором
‘селектор1’.

Например, у нас есть следующий блок ссылок:

<div id="menu">
	<a href="1.html" class="open">1.html</a>
	<a href="2.html" class="closed">2.html</a>
	<a href="3.html">3.html</a>
	<a href="4.html" class="open">4.html</a>
	<a href="5.html" class="closed">5.html</a>
	<a href="6.html" class="open">6.html</a>
</div>

Тогда селектор $(".closed ~ .open") выберет те ссылки, которые выделены жирным, так как эти элементы с атрибутом class=”open” находятся на одном уровне с
элементами с атрибутом class=”closed”.

Селекторы атрибутов

Чтобы сузить поиск кроме базовых и иерархических селекторов, рассмотренных выше, мы можем применять селекторы атрибутов. В данном случае jQuery будет
возвращать элементы в зависимости от значений и определения указанных атрибутов.

Шаблон селектора

Описание

Пример

[attr]

Выборка всех элементов с атрибутом attr

Например, выражение $("a[class]") выберет все элементы ссылок, которые имеют атрибут class

[attr=’value’]

Выборка всех элементов, у которых значение атрибута attr равно value

Например, выражение $("a[class='redStyle']") выберет все элементы ссылок, которые имеют атрибут class="redStyle"

[attr^=’value’]

Выборка всех элементов, у которых значение атрибута attr начинается со строки value

Например, выражение $("a[class^='red']") выбрать элементы ссылок, которые имеют атрибут class="redStyle",
так как слово ‘redStyle’ начинается на ‘red’.

[attr$=’value’]

Выборка всех элементов, у которых значение атрибута attr оканчивается на строку value

Например, выражение $("a[class$='Style']") выбрать элементы ссылок, которые имеют атрибут class="redStyle",
так как слово ‘redStyle’ оканчивается на ‘Style’.

[attr~=’value’]

Выборка всех элементов, у которых атрибут attr имеет список значений, разделенных пробелом, и одно из
этих значений равно value

Например, выражение $("a[class~='redStyle']") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="redStyle closed".

[attr*=’value’]

Выборка всех элементов, у которых значение атрибута attr имеет имеет подстроку value

Например, выражение $("a[class*='Style']") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="redStyle1".

[attr|=’value’]

Выборка всех элементов, у которых значение атрибута attr представляет либо значение value, либо список значений, разделенных дефисами, и первое значение в этом списке равно value

Например, выражение $("a[class|='red']") выбрать элементы ссылок, которые могут иметь следующее значение атрибута class="red-freeStyle-closed".

Контекст селекторов

Выше мы использовали такую запись для выборки элемента: $(селектор). Данное выражение просматривало все дерево DOM на соответствие элемента селектору.
Однако мы можем ограничить поиск, применив контекст поиска. Контекст представляет собой селектор, в рамках которого наждо производить выборку элементов.
Например, у нас есть такая веб-страница:

<!DOCTYPE html>
<html>
<head>
<title>Мир jQuery</title>
</head>
<body>
<div id="menu">
	<p><a href="1.html" class="open">Ссылка 1</a></p>
	<p><a href="2.html" class="open">Ссылка 2</a></p>
</div>
<p><a href="3.html" class="open">Ссылка 3</a></p>

<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

	$(".open", "div#menu").css('background-color', 'silver');
});
</script>
</body>
</html>

На странице у нас три ссылки, у всех у них определен один и тот же класс, но две из них находятся в элементе div и именно их мы хотим получить.
Тогда мы используем выражение $(".open", "div#menu") – здесь второй параметр-селектор будет являться контекстом выборки.
А результатом в данном случае будет следующая страница:

Важно не путать это выражение с выборкой по множеству селекторов, например, $(".open, div#menu ") – это разные выражения, которые будут давать разный результат.

Источник

Обычно селекторы jQuery используются для выбора элементов на странице, чтобы затем вызвать методы jQuery для манипулирования ими.

Селекторы jQuery основаны на селекторах CSS, и если вы знаете CSS, то уже имеет базовое представление об идее выбора элементов на странице.

В данном уроке мы рассмотрим селекторы, которые поддерживаются jQuery. Многие из них такие же как и селекторы CSS, но есть и специфические для jQuery. Для каждого селектора приведен пример использования для выбора элемента страницы.

В урок включены следующие  разделы:

  • Основные селекторы
  • Выбор элементов по атрибуту
  • Выбор элементов по содержанию
  • Выбор элементов по иерархии
  • Выбор полей формы
  • Выбор элементов по их положению
  • Другие полезные селекторы

Здесь приводится полный список всех селекторов, которые поддерживаются в jQuery.

jQuery поддерживает только те селекторы CSS, которые выбирают элементы DOM. Например, :visited, :hover и :first-line не поддерживаются.

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

Селектор Описание Пример
Все Выбирает все элементы на странице, включая head, body и так далее. $("*")
Элемент Выбирает все элементы с заданным тегом. $("p")
$("div")
Класс Выбирает все элементы с заданным именем класса. $(".myClass")
$("p.myClass")
ID Выбирает один элемент с заданным атрибутом id. $("#myID")
$("p.#myID")

Вы также можете комбинировать несколько селекторов в один с помощью запятой. jQuery выберет все элементы, которые соответствуют любому из селекторов. Например:

// Выбирает все div с классом .myClass, а также все параграфы
var selectedElements = $("div.myClass, p");

Выбор элементов по атрибуту

Основные селекторы отлично подходят в случаях, если нужно выбрать все параграфы на странице или элемент, который нужно выбрать имеет класс CSS или ID.

Однако, иногда нужно выбрать определенный элемент, у которого нет класса или ID, и нет возможности просто добавить класс или ID к данному элементу в разметке. Такая ситуация может сложиться при использовании CMS с фиксированным шаблоном HTML или при работе с контентом, созданным пользователем.

В данной ситуации возможно сузить область выбора с помощью атрибута HTML элемента, который надо выбрать. Например, можно выбрать:

  • Изображение по атрибуту src
  • Ссылку по атрибуту href
  • Все поля input формы, которые имеют атрибут type="checkbox"

…и так далее.

jQuery имеет много селекторов, которые можно использовать для выбора элементов по атрибуту:

Селектор Описание Пример
Атрибут Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута. $("div[attributeName]")
Атрибут равен Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением. $("div[attributeName='value']")
Атрибут не равен Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному. $("div[attributeName!='value']")
Атрибут начинается с Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки. $("div[attributeName^='value']")
Атрибут заканчивается Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой. $("div[attributeName$='value']")
Атрибут содержит Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку. $("div[attributeName*='value']")
Атрибут содержит слово Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. “Слово” – это последовательность символов без пробелов. $("div[attributeName~='value']")
Атрибут содержит префикс Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом. $("div[attributeName|='value']")

Вы можете комбинировать селекторы атрибутов для сужения области выбора. Например:

// Выбираем только те изображения, которые имеют ширину 300 px и высоту 200 px
var selectedImages = $("img[width=300][height=200]");

Селектор “Атрибут содержит префикс” выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как lang="en" и lang="en-US".

Выбор элементов по содержанию

Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно “покопаться” в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:

Селектор Описание Пример
:contains() Выбирает элемент(ы), которые содержат заданный текст. Текст может быть в самом элементе, так и в любом элементе внутри в выбранного элемента. Примечание:  :contains() чувствительно к регистру – "Hello" не соответствует "hello". // Выбираем все div, которые содержат "myText":
$("div:contains('myText')")
:has() Выбирает элемент(ы), которые содержат 1 или более элементов, соответствующих заданной строке. Селектор просматривает на соответствие все элементы внутри заданного элемента. // Выбираем все div, которые содержат параграфы:
$("div:has(p)")
:parent Выбирает элемент(ы), которые содержат другие элементы или текстовые узлы. // Выбираем все div, которые содержат что-нибудь:
$("div:parent")
:empty Выбирает элемент(ы), которые не содержат других элементов или текстовых узлов. // Выбираем все div, которые не содержат ничего:
$("div:empty")

Следующий пример показывает, как использовать :contains(), наряду с селектором класса для выбора параграфов, которые имеют определенный класс, дополнительным условием служит условие содержания определенной строки (или строк):

// Выбираем все параграфы,которые имеют класс "intro"
// и также содержат текст "MegaWidget"
var selectedElements = $("p.intro:contains('MegaWidget')");

// Выбираем все параграфы, которые имеют класс "intro"
// и содержат и "MegaWidget" и "WonderWidget"
var selectedElements = $("p.intro:contains('MegaWidget'):contains('WonderWidget')");

Выбор элементов по иерархии

Другой способ выбрать элементы в jQuery – это рассмотреть, как они соотносятся друг к другу на странице. Вероятно, вы знаете много таких селекторов по работе с  CSS:

Селектор Описание Пример
Ребенок Выбирает элемент(ы), которые являются ребенком (прямым потомком) заданного предка(ов). // Выбираем все элементы списка с классом "highlight", которые являются ребёнком для списка с ID "nav":
$("ul#nav > li.highlight")
Потомок Выбирает элемент(ы), которые являются потомками (детьми, внуками и так далее) заданного предка(ов). Это более общая форма селектора Ребенок. // Выбираем все ссылки внутри списка с ID "nav":
$("ul#nav a")
Следующий соседний элемент Выбирает элемент(ы), который следует непосредственно за заданным элементом, где оба элемента имеют одного и того же родителя. // Выбираем все параграфы, которые следуют непосредственно за  заголовком H1:
$("h1 + p")
Следующий сестринский элемент Выбирает элемент(ы), который следует за другим элементом, где оба элемента являются потомками одного родителя. Это более обобщенная версия селектора следующий соседний элемент. // Выбираем все ячейки таблицы после ячейки, которая содержит слово "Hello":
$("td:contains('hello') ~ td")
Первый ребенок Выбирает элемент(ы), который является первым ребенком его родителя. // Выбираем первые пункты во всех списках на странице:
$("li:first-child")
Последний ребенок Выбирает элемент(ы), который является последним ребенком его родителя. // Выбираем последние пункты во всех списках на странице:
$("li:last-child")
N-й ребенок Выбирает элемент(ы), который является n-м ребенком его родителя (смотри примечание ниже). // Выбираем третьи пункты во всех списках на странице:
$("li:nth-child(3)")
Только ребенок Выбирает элемент(ы), которые являются  ребенком родителей, у которых есть только дети. // Выбираем только элементы в списках с одним пунктом:
$("li:only-child")

Кроме задания определенного номера ребенка с помощью :nth-child(), можно указывать even (для выбора всех детей с четными номерами), odd (для выбора всех детей с нечетными номерами), или выражение (например, "li:nth-child(3n+2)" выбирает каждый третий элемент в списке, а отсчет начинается со второго элемента).

В следующем примере выбирается первая ячейка всех нечетных строк в таблице, которая имеет id "myTable":

var selectedElements = $("table#myTable tr:nth-child(odd) > td:first-child");

Выбор полей формы

Элементы формы имеют некоторые специфические свойства, которые вынуждают использовать некоторые трюки для их выбора. Например, чекбоксы, наряду со многими  другими типами полей, являются элементами input. Таким образом,, чтобы выбрать чекбоксы в форме нужно использовать $("input[type='checkbox']").

Аналогично, идентификация выбранных элементов в списке select или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

Селектор Описание Пример
:button Выбирает все кнопки формы. $("input:button")
:checkbox Выбирает все чекбоксы. $("input:checkbox")
:file Выбирает все поля загрузки фала. $("input:file")
:image Выбирает все поля ввода изображения. $("input:image")
:password Выбирает все поля пароля. $("input:password")
:radio Выбирает все радио кнопки. $("input:radio")
:reset Выбирает все кнопки перезагрузки формы. $("input:reset")
:submit Выбирает все кнопки отправки формы. $("input:submit")
:text Выбирает все поля ввода текста. $("input:text")
:input Выбирает все поля формы, включая элементы input, textarea, и select. $(":input")
:checked Выбирает все отмеченные чекбоксы радио кнопки. $("input:checked")
:selected Выбирает все элементы option. $("option:selected")
:disabled Выбирает все недоступные поля формы. $("input:disabled")
:enabled Выбирает все Доступные поля формы. $("input:enabled")

Кроме того, что написано, можно использовать, например, $("input:checkbox") для выбора всех чекбоксов на странице. Однако, $("input:checkbox") действует быстрее, так как jQuery может использовать функцию JavaScript getElementsByTagName() для быстрого ограничения объемов поиска только элементами input. Это действительно для jQuery вообще – для ускорения кода всегда ограничивайте объем для работы селекторов там, где возможно. Например, $("*") действует очень медленно, так как jQuery должен найти каждый отдельный элемент  на странице.

Следующий пример ищет форму, которая имеет атрибут action со значением "mailform.php", затем выбирает все отмеченные радио кнопки в форме:

var selectedElements = $("form[action='mailform.php'] input:radio:checked");

Выбор элементов по их положению

Иногда нужно выбрать элемент, про который известно, что он расположен в наборе ранее выбранных элементов. Например, нужно выделить первый параграф, который имеет класс "myClass". Для усложнения примера допустим, что нужно выбрать все пункты в списке, который имеет класс "myClass", а затем выбрать 5-й пункт из получившегося набора.

jQuery имеет семь селекторов, которые можно использовать для ограничения области поиска на основе позиции элемента:

Селектор Описание Примеры
:first Выбирает первый элемент в наборе отобранных элементов. // Выбираем первый параграф, который имеет класс "myClass":
$("p.myClass:first")
:last Выбирает последний элемент в наборе отобранных элементов. // Выбираем последний параграф, который имеет класс "myClass":
$("p.myClass:last")
:eq() Выбирает единственный элемент в наборе отобранных элементов. Выбор элемента осуществляется по последовательному номеру индекса (0 = первый элемент, 1 = второй и так далее). // Выбираем з-й параграф, который имеет класс "myClass":
$("p.myClass:eq(2)")
:lt() Выбирает элементы в наборе отобранных элементов, которые расположены перед элементом с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны первые 2 элемента (с индексами 0 и 1). // /Выбираем первые 2 параграфа, которые имеют класс "myClass":
$("p.myClass:lt(2)")
:gt() Выбираем элементы в наборе отобранных элементов, которые расположены после элемента с заданным индексом. Например, если задан индекс 2 (то есть 3-й элемент), то будут выбраны все элементы после третьего. // Выбираем все параграфы, которые имеют класс "myClass", за исключением первых трех:
$("p.myClass:gt(2)")
:even Выбирает все элементы с четными индексами в наборе отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 1-й, 3-й и так далее элементы. // Выбираем 1й, 3й, 5й, и так далее параграфы, которые имеют класс "myClass":
$("p.myClass:even")
:odd Выбирает все элементы с нечетными индексами в наборе уже отобранных элементов. Заметьте, что индексы начинаются с 0, таким образом в действительности отбираются 2-й, 4-й и так далее элементы // Выбираем 2й, 4й, 6й, и так далее параграфы, которые имеют класс "myClass":
$("p.myClass:odd")

Отметим, что данные селекторы не работают также как :first-child, :last-child, и так далее. Например, li.myClass:first-child выбирает только пункт списка с классом "myClass" , который является первым пунктом в соответствующем списке. А li.myClass:first находит все пункты списка на странице, которые имеют класс  "myClass", а затем выбирает первый пункт списка в наборе результата поиска.

В следующем примере выбираются все ячейки  в первых двух строках таблицы, которая имеет ID "myTable":

var selectedElements = $("table#myTable tr:lt(2) > td");

Другие полезные селекторы jQuery

Если ни один из перечисленных селекторов не помог вам выделить нужные элементы, попробуйте использовать следующие селекторы:

Селектор Описание Пример
:not() Выбирает все элементы, которые не соответствуют заданному слектору. // Выбираем все параграфы, которые не имеют класса "myClass":
$("p:not(.myClass)")
:animated Выбирает все элементы, которые в текущий момент анимируются jQuery (например, затухают). // Выбираем все div, которые анимируются в текущий момент:
$("div:animated")
:hidden Выбирает все скрытые элементы. Элемент полагается “скрытым” если: его свойство display установлено  в значение "none"; поля формы – type "hidden"; если ширина и высота установлены в 0; если один из элементов, которые содержат заданный элемент является скрытым. Однако, элемент не считается “скрытым” если только его свойство visibility установлено в значение "hidden". // Выбираем все скрытые праграфы, которые имеют класс "myClass":
$("p.myClass:hidden")
:visible Выбирает все видимые элементы. Это противоположный селектор для :hidden. // Выбираем все видимые параграфы, которые имеют класс "myClass":
$("p.myClass:visible")
:header выбирает все элементы заголовков (h1, h2 и так далее). // Выбираем все заголовки, которые имеют класс "myClass":
$(":header.myClass")

В следующем примере выбираются все элементы на странице, кроме заголовков h1:

var selectedElements = $(":header:not(h1)");

Заключение

В данной статье мы рассмотрели, как выбирать элементы с помощью селекторов jQuery. Были разобраны следующие типы селекторов:

  • Основные селекторы, которые будут использоваться большую часть времени работы над проектом
  • Селекторы атрибутов для выбора элементов на основе имен атрибутов и их значений
  • Селекторы содержания, которые позволяют выбирать элементы на основе их содержания
  • Иерархические селекторы, которые можно использовать для выбора элементов на основе их взаимоотношений с другими элементами на странице
  • Селекторы полей формы, которые обеспечивают простой способ выбора различных элементов полей формы
  • Селекторы положения для выбора элементов в соответствии с их положением в наборе элементов
  • Дополнительные селекторы, такие как :not() для выбора элементов, не соответствующих селектору, и :animated для выбора анимированных элементов
Источник

Добавить комментарий