Comments 15
2. ::pseudoElementПокажите, пожалуйста, пример как с ними можно работать через jQuery.
В 6-м пункте надо использовать find вместо filter.
Напомню два интересных варианта добавления, скажем, к ссылкам на pdf-документы соответствующих иконок (здесь сама идея, оформить ссылки, конечно, можно как удобно):
и
Правда, в первом случае речь все же не идет про MIME-type (да и как браузер узнает, какой MIME-type у объекта по невыкачанной еще ссылке?), а именно про ссылки, для которых указан соответствующее значение HTML-аттрибута type:
Польза от такого подхода в том, что не во всех ссылках может быть указано расширение, что не даст выведение иконки по второму из приведенных способов.
a[type="application/pdf"] {
background-image: url(/images/pdf.gif);
padding-left: 20px;
}
и
a[href$=".pdf"] {
background-image: url(/images/pdf.gif);
padding-left: 20px;
}
Правда, в первом случае речь все же не идет про MIME-type (да и как браузер узнает, какой MIME-type у объекта по невыкачанной еще ссылке?), а именно про ссылки, для которых указан соответствующее значение HTML-аттрибута type:
<a href="/pdf/manual_on_manual.pdf" type="application/pdf">Мануал по пользованию мануалом</a></p>Польза от такого подхода в том, что не во всех ссылках может быть указано расширение, что не даст выведение иконки по второму из приведенных способов.
[href^="http"]
Eat this:
<a href="//habrahabr.ru">Habrahabr</a>
Пункт номер 1.
Это необязательно и, к тому же, не учитывает ссылки по протоколу https.>
Это неправильно, при данном написании будут учитываться ссылки с https. А вот если написать ```css
href^="https"
то не будут учитываться http
1. [href^=«http»]
не заработает в случае с:
<a href="http://this-site.com/page">page</a>
исправление:
a[href^="http"]:not([href*="this-site.com"])
Первые 4 и 9ый взяты из этого туториала вместе с примерами. Не вижу ссылки на оригинал, да еще и перевод с ошибками: "Обратите внимание, что мы не ищем http" — в оригинале было "http://", а это не имеет смысла.
Все селекторы не входящие в спецификацию CSS, а являющиеся расширениями jQuery, следует использовать с осторожностью, т.к. они могут сильно проседать по производительности. К примеру:
Для наглядности приведенного в пример :checkbox: представим таблицу 200x50, в ячейках которой будут чекбоксы.
Because :checkbox is a jQuery extension and not part of the CSS specification, queries using :checkbox cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type=«checkbox»] instead.
Для наглядности приведенного в пример :checkbox: представим таблицу 200x50, в ячейках которой будут чекбоксы.
//jquery 1.9.1
$('tr input[type="checkbox"]') //в вакууме выполнится ~18-19ms
$('tr input:checkbox') //в вакууме выполнится ~70-80ms
В пункте 6. :header скорее всего должно быть не
$("h1 h2 h3 h4 h5 h6")
$("h1, h2, h3, h4, h5, h6")
Всё то же написано в любом учебнике по css, в чём смысл статьи? Ещё и с таким количеством ошибок, как грамматических, так и просто по невнимательности (filter вместо find хотя бы).
Sign up to leave a comment.
Необычные jQuery и CSS селекторы