28 мая, 2014 
Alexjc 
Иногда необходимо найти ссылку на странице, ведущую на конкретный сайт. Например, можно найти все ссылки, ведущие на webinit.ru, на следующей странице:
|
1 2 3 4 5 6 7 8 9 |
<body> <ul> <li><a href="http://jquery.com/">jQuery</a></li> <li><a href="http://microsoft.com/">Microsoft</a></li> <li><a href="http://webinit.ru/">Webinit</a></li> <li><a href="http://drupal.org/">Drupal</a></li> <li><a href="http://www.w3.org/">W3C</a></li> <li><a href="http://webinit.ru/article">Статьи</a></li> </body> |
Выделить ссылки на контретный сайт можно так:
|
1 |
$("a[href^='http://w3pro.ru']").css({fontWeight: "bold"}); // выделить все ссылки с сайта w3pro |
Но это достаточно бесполезный пример, более интересным является поиск внутренних и внешних ссылок на странице. Если создатели сайта и авторы содержимого достаточно образованные в плане сопровождения сайтов люди, то внутренние ссылки обычно указываются со слешем в начале ссылки, например, так «/article» или так «/» (ссылка на главную страницу). Поэтому такие ссылки легко найти:
|
1 |
$("a[href^='/']") // найти все ссылки начинающиеся со слеша |
или:
|
1 |
$("a:not([href^='http://'])") // найти все ссылки, не начинающиеся с http:// (внутренние) |
Если нужно найти такие ссылки только внутри области с основным содержимым, например, в статье, то можно уточнить селектор:
|
1 |
$("#content [href^='/']") // найти все ссылки начинающиеся со слеша внутри элемента с ID = content |
Часто авторы пользуются возможностью запретить индексацию ссылок поисковыми системами и добавляют атрибут rel со значениемnofollow. Найти такие ссылки с rel=nofollow или наоборот без него можно таким образом:
|
1 2 |
$("a[rel*='nofollow']") // найти все ссылки c rel=nofollow $("a:not([rel*='nofollow'])") // найти все ссылки без rel=nofollow |
Если есть необходимость, можно как-то выделить ссылки, которые будут открыты в новом окне, то есть с target=_blank:
|
1 |
$("a[target='_blank']") // найти все ссылки, по умолчанию открывающиеся в новом окне или вкладке |
Такой подход к поиску элементов на странице с определенными атрибутами может пригодится во многих случаях и предоставляемых jQuery-селекторов вполне достаточно для этих целей..
Posted in 