Javascript link rel jquery

HTML rel Attribute

The required rel attribute specifies the relationship between the current document and the linked document/resource.

Browser Support

Syntax

Attribute Values

Value	Description
alternate	Provides a link to an alternate version of the document (i.e. print page, translated or mirror). Example:
author	Provides a link to the author of the document
dns-prefetch	Specifies that the browser should preemptively perform DNS resolution for the target resource’s origin
help	Provides a link to a help document. Example:
icon	Imports an icon to represent the document. Example:
license	Provides a link to copyright information for the document
next	Provides a link to the next document in the series
pingback	Provides the address of the pingback server that handles pingbacks to the current document
preconnect	Specifies that the browser should preemptively connect to the target resource’s origin.
prefetch	Specifies that the browser should preemptively fetch and cache the target resource as it is likely to be required for a follow-up navigation
preload	Specifies that the browser agent must preemptively fetch and cache the target resource for current navigation according to the destination given by the «as» attribute (and the priority associated with that destination).
prerender	Specifies that the browser should pre-render (load) the specified webpage in the background. So, if the user navigates to this page, it speeds up the page load (because the page is already loaded). Warning! This wastes the user’s bandwidth! Only use prerender if you are absolutely sure that the webpage is required at some point in the user’s journey
prev	Indicates that the document is a part of a series, and that the previous document in the series is the referenced document
search	Provides a link to a resource that can be used to search through the current document and its related pages.
stylesheet	Imports a style sheet

More Examples

Example

Here is how to add a favicon to a website:

This is a Heading

This is a paragraph.

Источник

Link rel Property

Return the relationship between the current document and the linked document:

Description

The rel property sets or returns a space-separated list that defines the relationship between the current document and the linked document.

Browser Support

Syntax

Property Values

Value	Description
alternate	Linked page is an alternative version of the current document
appendix	Linked page is the appendix page for the current document
chapter	Refers to a chapter
contents	Linked page is the table of contents for the current document
copyright	Linked page is the copyright/policy for the current document
glossary	Linked page is the glossary page for the current document
help	Linked page is the help page for the current document
icon	Refers to an icon location
index	Linked page is the index page for the current document
next	Refers to the next page
offline	Refers to a location that contains a path to the CDF file
prev	Refers to the previous page
search	Refers to an XML file in OpenSearch description format
section	Link to a section in a list of documents
sidebar	Refers to the bookmark panel
start	Refers to the first page (used by search engines to show the first page)
stylesheet	Linked page is the style sheet for the current document
subsection	Linked page is a subsection for the current document

Technical Details

Источник

Работа с атрибутами в jQuery

HTML-атрибуты – это дополнительные значения для установления различных характеристик HTML-элементам в HTML-коде. С помощью них можно определённым образом настроить элемент и отрегулировать его поведение. Все атрибуты указываются внутри открытого тега и отделяются друг от друга посредством пробела.

Кроме атрибутов у нас имеются ещё DOM-свойства , которые в большинстве случаев являются их отражением.

Образуются DOM-свойства во время чтения браузером HTML-кода, т.е. при строительстве DOM. DOM – это объектная модель документа. При её создании теги становятся элементами (узлами), а HTML-атрибуты переводятся в соответствующие DOM-свойства этих элементов.

Для сведений, атрибут, который мы устанавливаем в HTML-коде называется атрибутом содержимого . А DOM-свойство – IDL-атрибутом .

Более подробно прочитать про атрибуты, DOM-свойства и их отличия можно в этой статье.

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

А сейчас познакомимся с методами jQuery для работы с атрибутами.

Методы attr() и removeAttr()

В jQuery для выполнения действий над атрибутами имеется два метода:

• attr() – используется, когда нужно, узнать значение требуемого атрибута, добавить к элементу новый атрибут или изменить текущее значение некоторого атрибута на новое;
• removeAttr() – применяется для удаления определённого атрибута у элемента или набора элементов.

Получение значения атрибута

Узнать значение определённого атрибута в jQuery осуществляется через attr() :

// attributeName – атрибут, значение которого нужно получить .attr('attributeName')

Например, получим значение атрибута href элемента #search :

Яндекс  

При применении attr() к набору элементов, этот метод вернёт значение указанного атрибута только для первого элемента.

.
 
.
 
.
  

Для того, чтобы вернуть значение указанного атрибута для каждого элемента набора, можно воспользоваться each() или map() .

$('.section').each(function() { console.log( $(this).attr('id') ); }); // Результат: // section-1 // section-2 // section-3

Если атрибута, значение которого мы хотим получить у элемента нет, то attr() вернёт undefined :

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

Например, проверим имеется ли у элемента #logo» атрибут title :

Изменение значения атрибута

Изменение значения атрибута осуществляется также посредством attr() .

Вариант синтаксиса attr() для установки значения одному атрибуту:

// attributeName – имя атрибута // value – новое значение (строка, число или null) .attr('attributeName', value)

Кстати, если установить атрибуту null , то он будет удалён.

Например, поменяем значение атрибута src элемента #logo :

Установка сразу нескольких атрибутов элементу осуществляется в формате объекта:

// attributes – объект, содержащий набор пар «атрибут: значение» .attr(attributes)

Пример установки элементу #logo несколько атрибутов:

Кроме этого в jQuery имеется также вариант установки атрибута с помощью функции:

// attr - имя атрибута .attr('attr', function(index, value) { // . })

В этом случае значение атрибута будет определяться результатом (строка или число), возвращаемой функцией. Если функция ничего не возвращает или undefined , то текущее значение не изменяется (оно остаётся прежним).

Обратиться к текущему элементу в функции можно с помощью ключевого слова this .

Добавление нового атрибута

В jQuery, установка нового атрибута или изменение существующего — это одна и также операция.

Пример, в котором всем ссылкам на странице установим атрибут rel со значением nofollow :

Как в jQuery удалить атрибут у элемента

В jQuery удаление атрибута обычно осуществляется с помощью метода removeAttr() :

// attributeName - атрибут, который нужно удалить .removeAttr('attributeName')

Например, удалим атрибут rel у всех ссылок на странице:

В jQuery удалить атрибут можно также с помощью attr() . Для этого ему нужно в качестве значения установить null .

Источник

Как добавить/удалить link в head? И возможно ли это вообще?

Доброго времени суток!
Нужно при нажатии на элемент(условно говоря, кнопку) изменить цветовую схему страницы. В голову пришло лишь добраться до head и там уже добавить в конец:

Каким образом это можно сделать с помощью jQuery?
Или есть другие способы реализации задумки, а я уверен, что они есть, буду премного благодарен, если о них поведают.
Заранее спасибо!

По мне так, лучшим вариантом будет оставить один link, а далее менять его href атрибут.
Примерно, так:

$('#blackstyle').click(function ()< $('link[href="style1.css"]').attr('href', 'style2.css'); >); $('#original').click(function ()< $('link[href="style2.css"]').attr('href', 'style1.css'); >);

Был уверен, что такой вариант не будет работать, потому что при смене URL новый стиль не загрузится.
Однако, потестировал — работает 🙂
Разве что пути до стилей лучше вынести в переменные, чтобы потом проще было менять. А еще лучше — задать тегу id и держать путь в data-атрибуте, чтобы в коде вообще не было путей.

// Добавление link $link = $('', < rel: 'stylesheet', href: 'путь. ' >).appendTo('head'); // Немного позже удаление ранее созданного link $link.remove();

Но лучше так не делать, потому что изменение стилей произойдёт с заметной задержкой, вызванной тем, что новый файл стилей нужно сначала загрузить и обработать. Лучше всего изменять класс тега body , а новое оформление задавать в том же файле стилей, но добавив к селекторам body.новыйКласс :

     
Lorem ipsum
 Поменять всё   

Насчет «лучше так не делать» я не очень согласен — если стили новой темы весят столько же, сколько основная, то лучше грузить их отдельно.
Таким образом, тем, кому другая тема не нужна, не надо будет грузить лишее, и можно будет гибче пользоваться кешированием — при изменении темы будет меняться только ее файл, а не все стили сайта.
В этом случае лучше будет сделать заглушку на весь документ, которая скроется после загрузки новых стилей.
Это, конечно, немного сложнее в реализации, но если трафик пользователей и скорость загрузки сайта имеют значение, то лучше заморочиться.
Ну а если отдельных стилей совсем немного, то, конечно, проще грузить все разом.

Алексей Уколов: Может лучше разделить стили на общие (встречающиеся во всех темах) и изменяемые (то, что меняется в зависимости от выбранной темы). В таком случае мы легко вешаем класс к body.

Максим Панов: это решит проблему кеширования, но лишние стили так и будут грузиться всем подряд, вдобавок, добавится дополнительный http-запрос на подгрузку файла темы.

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

// Подключает function addStyleSheets (href) < var $head = document.head, $link = document.createElement('link'); $link.rel = 'stylesheet'; $link.href = href; $head.appendChild($link); >// Отключает по ссылке function disableStyleSheets (href) < var styles = document.styleSheets; for (i in styles) < if (styles[i].href == href) < styles[i].disabled = true; >> > // Примеры addStyleSheets('путь/до/файла/со/стилями.css'); // Подключаем disableStyleSheets('путь/до/файла/со/стилями.css'); // Отключаем

В вашем случае, для изменения цветовой схемы страницы, лучше использовать особые классы. При клике на какую-нибудь кнопку добавлять соответствующий класс элементу body. Ниже привожу пример добавления класса к body используя чистый JavaScript.

// Вариант для IE10+ var $body = document.querySelector('body'); $body.classList.toggle('red-theme'); // удалит/добавит класс .red-theme для

Смешно читать про утверждение «JavaScript работает быстрее jQuery» :). jQuery это отличная реализации многих повседневных алгоритмов, с отличной оптимизацией.

Никита Каменев: я сначала тоже так думал, а потом взял и проверил.
Оказывается, реализация на чистом js в 3 раза быстрее, чем на jq. Но, конечно, в реальности надо сравнивать не разы, а миллисекунды и вот тут становится ясно, что практической разницы никакой нет — 1.2мс против 4мс.
Поэтому, смотреть нужно на реальный проект — если в нем уже используется jq, то экономить на спичках не стоит, это только усложнит поддержку. А вот если jq нет, то подключать ее ради конкретного этого функционала — явный overkill.
P.S. Не обращайте внимания на глюки jsperf, его уже полгода лихорадит.

Дмитрий Маринин: Доброго времени суток а можете пояснить
var $head = document.head, (что означает именно это — document.head)
$link = document.createElement(‘link’); (что означает именно это — document.createElement(‘link’) и сам -(‘link’) )

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

именно самое: я ваши комментарии буду удалять. Комментарии к ответам — это не чат. Если у вас есть какой-то вопрос, задайте его нормально. Но сначала прочитайте учебник и воспользуйтесь поисковиком.

Войдите, чтобы написать ответ

Эффект плавной прокрутки при переходе на ссылку #якорь?

Источник