Как на jquery найти все ссылки

Думаю, что для Вас не секрет, что при помощи популярной библиотеки jQuery мы можем сделать наши веб-страницы интерактивными. Выбрав нужный элемент из объектной модели DOM нашей страницы мы можем заставить его исчезнуть, появиться, отреагировать на клик мыши (или другое событие), изменить стиль элемента и сделать еще очень много разных вещей. Эта статья будет посвящена селекторам и фильтрам библиотеки jQuery. Вы узнаете, как из всего многообразия элементов веб-страницы выбирать именно нужный.

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

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

Селекторы библиотеки jQuery

JQuery предлагает очень мощную технику выбора и работы с коллекциями элементов. Если Вы писали файлы таблиц стилей CSS, то принцип работы селекторов в jQuery Вы поймете очень быстро.

Основной синтаксис здесь таков:

$('селектор');

Знак $ обозначает специальную команду – объект jQuery. По сути – это сокращение от jQuery.

Итак, давайте начнем с простых селекторов.

1. Вы можете выбрать любой элемент веб-страницы по его идентификатору.

Например, если на странице у Вас имеется <div id=”main”></div>, то выбрать его по идентификатору можно следующим образом:

$('#main');

Здесь знак # указывает именно на то, что мы выбираем элемент по его идентификатору (также, как и в css-селекторах).

2. Вы также можете выбрать элемент или группу элементов по названию их тега.

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

$('a');

Здесь, как Вы можете видеть, никаких лишних знаков нет, только название тега в кавычках.

3. Еще один простой способ выбора элементов – это выбор по имени класса.

Например, чтобы выбрать все кнопки Вашей навигационной панели, имеющие одинаковое имя класса (class=”nav”), Вы можете написать следующую выборку:

$('.nav');

Здесь ключевым моментом является точка «.», которая обозначает, что Вы выбираете элементы именно по имени класса.

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

Для этого давайте рассмотрим более сложные селекторы. Они позволят нам более точно указать на нужные теги.

4. Селектор потомков, например, позволяет указать на тег, заключенный в другом теге.

Допустим, что у Вас есть ненумерованный список (тег <ul>) с идентификатором «nav» (<ul id=”nav”>), и в этом списке присутствуют ссылки. Вы хотите выбрать все ссылки на странице, которые находятся внутри этого ненумерованного списка. В таком случае выборку будем делать следующим образом:

$('#nav a');

Как Вы можете видеть селекторы расположены через пробел. Селектор, указанный последним в списке – это и есть тот элемент (или группа элементов), который мы выбираем. Селектор (или селекторы), находящиеся левее это тег, в котором находится выбираемый элемент.

Например, при таком выборе $('#main p span'); мы выбираем все теги «span», которые находятся в теге абзаца «p», который в свою очередь расположен в теге с идентификатором «main».

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

Например, у нас есть элемент <div id=”main”>, внутри которого есть теги абзацев (p). Помимо тегов с абзацами в этом элементе div также расположен еще один элемент div, который также включает в себя теги с абзацами. Но нам необходимо выбрать только теги абзацев, которые находятся непосредственно в <div id=”main”>, не включая абзацы из вложенного в него тега div.

Если мы будем действовать по принципу из пункта 4, то выберутся все теги абзацев. А если будем выбирать вот так:

$('#main > p');, то выберутся только теги абзацев дочерние для тега с id=”main”.

6. При помощи соседних родственных селекторов можно выбрать тег, идущий сразу после другого тега. Где это может быть полезно? Приведу один пример. Допустим у Вас есть заголовок, нажав на который, сразу под ним появляется результат вычисления в теге <span>. До нажатия на заголовок этот тег невидим. В момент нажатия Вы хотите сделать его видимым для пользователя. Вам нужно выбрать этот тег <span>. Это легко можно сделать использовав соседние родственные селекторы, вот так:

$('h3 + span');

Достаточно добавить знак «+» между двумя селекторами. Только не забудьте, что в этом случае тег <span> должен идти сразу за заголовком h3.

7. При помощи селектора атрибута мы может выбрать элемент (или группу элементов) по наличию у него определенного атрибута. Мало того, мы даже можем выбрать элемент, определенный атрибут которого имеет определенное значение. Сейчас Вы все увидите на примерах.

Например, нам нужно выбрать все изображения на странице, которые имеют атрибут «alt». Для этого мы может написать следующий селектор:

$('img[alt]');

Если нам нужно выбрать все теги <input> формы содержащие текст, Вы можете использовать следующий селектор:

$('input[type="text"]');

Если Вы хотите выбрать тег по атрибуту, значение которого начинается с определенных символов, например, все ссылки, атрибут «href» которых начинается с «http», то селектор атрибута можно применить со специальным символом «^» следующим образом:

$('a[href^="http"]');

Также можно выбирать и элементы, чьи атрибуты заканчиваются определенным образом. Делается это при помощи специального символа «$». Таким образом можно, например, выбрать все ссылки на странице с расширением «.xml» (или каким-то другим).

$('a[href$=".xml"]');

Если нужно выбрать элемент с атрибутом, в любом месте которого содержится определенное значение, то это можно сделать при помощи специального символа «*». Таким образом, если я хочу выбрать все ссылки на странице, в атрибуте «href» которых содержится значение «website-create.ru», то я могу воспользоваться следующим кодом:

$('a[href*="website-create.ru"]');

Таким образом я выберу все ссылки, которые могут вести на разные страницы моего блога.

Также мы можем выбирать элементы, значение атрибута которых не содержит конкретное значение. Например, мне нужно выбрать все элементы <input>, кроме тех, у которых текстовый тип. Это можно сделать так:

$('input[type!="text"]');

Вот я Вам и рассказала об основных селекторах, знание которых поможет Вам при выборке элементов веб-страницы.

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

Фильтры jQuery

Для того, чтобы применить фильтр к выборке, нужно поставить двоеточие после основного селектора и прописать нужный фильтр. Сейчас мы рассмотрим основные фильтры на примерах.

1. Допустим у нас есть таблица с именем класса «mytab» и в ней мы хотим выбрать все четные строки. Для этого мы можем использовать фильтр «:even», который профильтрует по четным значениям индексов элементов массива.

$('.mytab tr:even');

Только не забудьте, что нумерация в массиве начинается с 0. Поэтому фактически этот фильтр выберет все четные индексы (0, 2, 4…), а по сути нечетные строки, так как первый элемент будет иметь индекс со значение 0, а третий – со значением 2.

А чтобы в действительности выбрать четные строки в таблице, мы должны пройтись по нечетным индексам, используя фильтр «:odd».

$('.mytab tr:odd');

2. Другой вид фильтров способен выбрать первый или последний элемент из выборки.

Например, я выбираю все абзацы в теге с идентификатором «main», но хочу отфильтровать и взять только первый абзац. Для этого я могу использовать следующий код:

$('#main p:first');

А если мне нужен только последний абзац, то я напишу вот так:

$('#main p:last');

3. Чтобы выбрать элементы, не относящиеся к данному типу селектора, можно использовать фильтр «:not()».

Например, мне нужно выбрать все изображения кроме тех, которые имеют класс «picture». Я могу сделать это следующим образом:

$('img:not(.picture)');

Еще один пример. Например, мы хотим найти все ссылки, начинающиеся не с «http». Для этого используем следующий код:

$('a:not([href^="http"])');

4. Еще один фильтр позволяет находить элементы, которые содержат другие элементы.

Например, мне нужно найти все теги <li>, но только те, внутри которых есть ссылка (тег <a>). Для этого можно использовать фильтр «:has».

$('li:has(a)');

5. При помощи фильтра «:contains» мы можем найти элементы, содержащие определенный текст.

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

$('a:contains(здесь)');

6. Для того, чтобы найти скрытые элементы на странице (это элементы, которые мы не видим на странице. Они могут быть скрыты при помощи css, jQuery или иметь нулевые высоту и ширину) можно использовать фильтр «:hidden».

Например, чтобы найти все скрытые элементы <div> на веб-странице, можно написать вот такой код:

$('div:hidden');

Вот, пожалуй, я и познакомила Вас с основными фильтрами. Хочу сразу сказать, что это не все существующие фильтры, есть и еще. В том числе существуют специальные фильтры для работы с формами, но о них я напишу в одном из следующих постов. А сейчас Вы, по крайней мере, познакомились с основными селекторами и фильтрами, применяя которые Вы без труда сможете выбирать любой элемент (или группу элементов) со своей веб-страницы, а потом делать с этим элементом все, что пожелаете, обеспечивая интерактивность своему веб-ресурсу.

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

И, конечно же, как всегда жду Ваших комментариев. Если статья Вам понравилась – поделитесь ей с друзьями при помощи кнопок социальных сетей (буду очень признательна).

Успехов Вам, друзья! Оставайтесь на связи и подписывайтесь на обновления блога, если еще не подписаны.

А также пишите, какие темы Вам интересны и полезны. Ваше мнение и пожелания Очень Важны.

С Вами была Анна Котельникова. До связи!

4 ответа

document.links

var links = $("a").map(function() {
                return this.href;
            }).get();

$("a").hide(); // or whatever

function findLinks(innerHTML){
    var fragment = document.createElement('div');
    fragment.innerHTML = innerHTML;

    var links = [];
    fragment.find('a').each(function(index, element){
        links.push($(element).attr('href'));
    });
    return links;
}