Jquery — селектор по значению атрибута

jQuery синтаксис:

/* Возвращение значения: */
Синтаксис 1.0:
$(selector).attr( attributeName ) 

attributeName - String

/* Установка значений: */

Синтаксис 1.0:
$(selector).attr( attributeName, value ) /* установка значения одного атрибута */
$(selector).attr({ attributeName: value, /* установка значений нескольких атрибутов */
			        attributeName: value })

value - String, или Integer, или null.

Синтаксис 1.1:
$(selector).attr( attributeName, function( index, currentValue ) ) /* установка значения атрибута с использованием функции */ 

attributeName - String
currentValue - String
index - Integer.

link Choosing Selectors

Choosing good selectors is one way to improve JavaScript’s performance. Too much specificity can be a bad thing. A selector such as is overkill if a selector such as will get the job done.


Does My Selection Contain Any Elements?

Once you’ve made a selection, you’ll often want to know whether you have anything to work with. A common mistake is to use:

1 2 3 4

This won’t work. When a selection is made using , an object is always returned, and objects always evaluate to . Even if the selection doesn’t contain any elements, the code inside the statement will still run.

The best way to determine if there are any elements is to test the selection’s property, which tells you how many elements were selected. If the answer is 0, the property will evaluate to when used as a boolean value:

1 2 3 4

Saving Selections

jQuery doesn’t cache elements for you. If you’ve made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.

1

Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.

A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you’ll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don’t magically update when the DOM changes.

Refining & Filtering Selections

Sometimes the selection contains more than what you’re after. jQuery offers several methods for refining and filtering selections.

1 2 3 4 5 6

Selecting Form Elements

jQuery offers several pseudo-selectors that help find elements in forms. These are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors.

:checked

Not to be confused with :checkbox, targets checked checkboxes, but keep in mind that this selector works also for checked radio buttons, and elements (for elements only, use the selector):

1

The pseudo-selector works when used with checkboxes, radio buttons and selects.

:disabled

Using the pseudo-selector targets any elements with the attribute:

1

In order to get the best performance using , first select elements with a standard jQuery selector, then use , or precede the pseudo-selector with a tag name or some other selector.

:enabled

Basically the inverse of the :disabled pseudo-selector, the pseudo-selector targets any elements that do not have a attribute:

1

In order to get the best performance using , first select elements with a standard jQuery selector, then use , or precede the pseudo-selector with a tag name or some other selector.

Using the selector selects all , , , and elements:

1

:selected

Using the pseudo-selector targets any selected items in elements:

1

In order to get the best performance using , first select elements with a standard jQuery selector, then use , or precede the pseudo-selector with a tag name or some other selector.

Selecting by type

jQuery provides pseudo selectors to select form-specific elements according to their type:

For all of these there are side notes about performance, so be sure to check out the API docs for more in-depth information.

Extension API

This contains the regular expressions used to parse a selector into different parts, to be used for finding and filtering. The name of each of the regular expressions should correspond to the names specified in the and objects.

Finding

In order to add a new find function:

  • A regular expression must be added to the object.
  • A function to must be defined.
  • must be appended to the regex.

A method for finding some elements on a page. The specified function will be called no more than once per selector.

  • is the array of results returned from matching the specified regex against the selector.
  • is the DOMElement or DOMDocument from which selection will occur.
  • is a boolean value indicating whether the function is currently operating within an XML document.

Filtering


In order to add a new filtering statement:

  • A regular expression must be added to the object.
  • A function must be added to the object.
  • A function may optionally be added to the object.

An optional pre-filter function which allows filtering of the matched array against the corresponding regular expression, which will return a new matched array. This matched array will eventually be passed and flattened as arguments against the corresponding filter function. This is intended to clean up some of the repetitive processing that occurs in a filter function.

Note: will be deleted prior to being passed to a filter, and must not be used.

The arguments for a filter method are the element and the captures from the regex corresponding to this filter (indicated above by what is in the match, starting at index 1). The return result must be boolean: true if the element matches the selector, false if not.

Attributes

Handle an attribute which requires specialized processing (such as , which has cross-browser issues). The return result must be the actual string value of that attribute.

Pseudo-selectors (pseudos)

The most common extension to a selector engine: adding a new pseudo. The return result from this function must be boolean: true if the element matches the selector, false if not.

For example, this defines a simple pseudo:

var $test = jQuery( document );
Sizzle.selectors.pseudos.fixed = function( elem ) {
    $test   = elem;
    return $test.css( "position" ) === "fixed";
};

is only required if the custom pseudo-selector accepts an argument.

Note: In jQuery 1.8 and earlier, the API for creating custom pseudos with arguments was broken. In jQuery 1.8.1+, the API is backwards-compatible. Regardless, the use of is greatly encouraged.

Now that the parser compiles a single function containing other functions, custom pseudo-selectors with arguments are much cleaner.

For example, within Sizzle, the implementation of the pseudo is very similar to:

Sizzle.selectors.pseudos.not =
    Sizzle.selectors.createPseudo(function( subSelector ) {
        var matcher = Sizzle.compile( subSelector );
        return function( elem ) {
            return !matcher( elem );
        };
    });
Backwards-compatible plugins for pseudos with arguments

In order to write a custom selector with arguments that can take advantage of the new API, yet still support all versions of Sizzle, check for the method.

// An implementation of a case-insensitive contains pseudo
// made for all versions of jQuery
(function( $ ) {

function icontains( elem, text ) {
    return (
        elem.textContent ||
        elem.innerText ||
        $( elem ).text() ||
        ""
    ).toLowerCase().indexOf( (text || "").toLowerCase() ) > -1;
}

$.expr.pseudos.icontains = $.expr.createPseudo ?
    $.expr.createPseudo(function( text ) {
        return function( elem ) {
            return icontains( elem, text );
        };
    }) :
    function( elem, i, match ) {
        return icontains( elem, match3 );
    };

})( jQuery );

These filters are run after a previous part of a selector has already returned results. are found from matching . When applicable, is expected to be an integer. The argument is a boolean indicating whether the result should be inverted (as in ).

For example, the code for the setFilter is similar to:

var first = function( elements, argument, not ) {
    // No argument for first
    return not ? elements.slice( 1 ) :  elements ;
};
Sizzle.selectors.setFilters.first = first;

It is easy to extend Sizzle — even Sizzle’s selectors. For example, to rename as :

Sizzle.selectors.match.POS = new RegExp( oldPOS.source.replace("first", "uno"), "gi" );
Sizzle.selectors.setFilters.uno = Sizzle.selectors.setFilters.first;
delete Sizzle.selectors.setFilters.first;
Sizzle("div:uno"); // ==> 

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора :nth-child</title>
		<style></style>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $("button").click(function(){ // задаем функцию при нажатиии на кнопку
	    var str = $(this).text(); // присваиваем переменной текстовое содержимое элемента <button>, который был нажат
	    $("tr").css("background", "#fff"); // выбираем каждый элемент <tr> в документе и задаем цвет заднего фона белый.
	    $("tr" + str ).css("background", "orange"); // создаем селектор из элемента <tr> и значения текста той кнопки, которая была нажата, после этого добавляем цвет заднего фона.
	    $(".info").text('$("tr'+str+'")'); // выводим в блок со значением info селектор, который был использован.
	});
		</script>
	</head>
	<body>
		<div class = "control">
			<button>:nth-child(2)</button>
			<button>:nth-child(3)</button>
			<button>:nth-child(even)</button>
			<button>:nth-child(odd)</button>
			<button>:nth-child(3n)</button>
			<button>:nth-child(3n+1)</button>
			<button>:nth-child(3n+2)</button>
			<button>:nth-child(3n-1)</button>
			<button>:nth-child(3n-2)</button>
			<div class = "info"></div>
		</div>
		<table>
			<tr><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>3</td><td>3</td><td>3</td></tr>
			<tr><td>4</td><td>4</td><td>4</td></tr>
			<tr><td>5</td><td>5</td><td>5</td></tr>
			<tr><td>6</td><td>6</td><td>6</td></tr>
			<tr><td>7</td><td>7</td><td>7</td></tr>
			<tr><td>8</td><td>8</td><td>8</td></tr>
		</table>
	</body>
</html>

В этом интерактивном примере с использованием селектора :nth-child выбираем и стилизуем элементы <tr> (строка таблицы) в зависимости от их размещения (порядкового номера в документе). Для демонстрации работы необходимого селектора нажмите на кнопку (элемент <button>), текст, которой выступает в роли значения селектора:

Выбор строк таблицы по элементарной математической формуле:

Интерактивный пример использования jQuery селектора :nth-childjQuery селекторы

jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.

Selector Example Selects
* $(«*») All elements
#id $(«#lastname») The element with id=»lastname»
.class $(«.intro») All elements with class=»intro»
.class,.class $(«.intro,.demo») All elements with the class «intro» or «demo»
element $(«p») All <p> elements
el1,el2,el3 $(«h1,div,p») All <h1>, <div> and <p> elements
     
:first $(«p:first») The first <p> element
:last $(«p:last») The last <p> element
:even $(«tr:even») All even <tr> elements
:odd $(«tr:odd») All odd <tr> elements
     
:first-child $(«p:first-child») All <p> elements that are the first child of their parent
:first-of-type $(«p:first-of-type») All <p> elements that are the first <p> element of their parent
:last-child $(«p:last-child») All <p> elements that are the last child of their parent
:last-of-type $(«p:last-of-type») All <p> elements that are the last <p> element of their parent
:nth-child(n) $(«p:nth-child(2)») All <p> elements that are the 2nd child of their parent
:nth-last-child(n) $(«p:nth-last-child(2)») All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n) $(«p:nth-of-type(2)») All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n) $(«p:nth-last-of-type(2)») All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child $(«p:only-child») All <p> elements that are the only child of their parent
:only-of-type $(«p:only-of-type») All <p> elements that are the only child, of its type, of their parent
     
parent > child $(«div > p») All <p> elements that are a direct child of a <div> element
parent descendant $(«div p») All <p> elements that are descendants of a <div> element
element + next $(«div + p») The <p> element that are next to each <div> elements
element ~ siblings $(«div ~ p») All <p> elements that appear after the <div> element
     
:eq(index) $(«ul li:eq(3)») The fourth element in a list (index starts at 0)
:gt(no) $(«ul li:gt(3)») List elements with an index greater than 3
:lt(no) $(«ul li:lt(3)») List elements with an index less than 3
:not(selector) $(«input:not(:empty)») All input elements that are not empty
     
:header $(«:header») All header elements <h1>, <h2> …
:animated $(«:animated») All animated elements
:focus $(«:focus») The element that currently has focus
:contains(text) $(«:contains(‘Hello’)») All elements which contains the text «Hello»
:has(selector) $(«div:has(p)») All <div> elements that have a <p> element
:empty $(«:empty») All elements that are empty
:parent $(«:parent») All elements that are a parent of another element
:hidden $(«p:hidden») All hidden <p> elements
:visible $(«table:visible») All visible tables
:root $(«:root») The document’s root element
:lang(language) $(«p:lang(de)») All <p> elements with a lang attribute value starting with «de»
     
$(«») All elements with a href attribute
$(«») All elements with a href attribute value equal to «default.htm»
$(«») All elements with a href attribute value not equal to «default.htm»
$(«») All elements with a href attribute value ending with «.jpg»
[attribute|=value] $(«») All elements with a title attribute value equal to ‘Tomorrow’, or starting with ‘Tomorrow’ followed by a hyphen
[attribute^=value] $(«») All elements with a title attribute value starting with «Tom»
[attribute~=value] $(«») All elements with a title attribute value containing the specific word «hello»
[attribute*=value] $(«») All elements with a title attribute value containing the word «hello»
     
:input $(«:input») All input elements
:text $(«:text») All input elements with type=»text»
:password $(«:password») All input elements with type=»password»
:radio $(«:radio») All input elements with type=»radio»
:checkbox $(«:checkbox») All input elements with type=»checkbox»
:submit $(«:submit») All input elements with type=»submit»
:reset $(«:reset») All input elements with type=»reset»
:button $(«:button») All input elements with type=»button»
:image $(«:image») All input elements with type=»image»
:file $(«:file») All input elements with type=»file»
:enabled $(«:enabled») All enabled input elements
:disabled $(«:disabled») All disabled input elements
:selected $(«:selected») All selected input elements
:checked $(«:checked») All checked input elements

JS Учебник

JS ГлавнаяJS ВведениеJS УстановкаJS ВыводJS СинтаксисJS ЗаявленияJS КомментарииJS ПеременныеJS ОператорыJS АрифметикаJS ПрисваиванияJS Типы данныхJS ФункцииJS ОбъектыJS ОбластьJS СобытияJS СтрокиJS Методы строкJS ЧислаJS Методы чиселJS МассивыJS Методы массиваJS Сортировка массиваJS Итерация массиваJS ДатыJS Формат датыJS Метод получения датJS Методы набора…JS Математические…JS Случайные числаJS БулевыJS Сравнение…JS Заявления if…elseJS Заявление switchJS Цикл forJS Цикл whileJS Заявление break…JS Преобразование…JS Битовые…JS Регулярные выраженияJS ОшибкиJS ОтладчикJS ПодъемныйJS СтрогийJS Ключевое слово thisJS Руководство стиляJS ПрактикаJS Распространенные ошибкиJS ЭффективностьJS Зарезервированные словаJS ВерсииJS Версия ES5JS Версия ES6JS JSON

.attr( attributeName, value )Возвращает: jQuery

Описание: Set one or more attributes for the set of matched elements.

    • attributeName Тип:

      The name of the attribute to set.

    • value Тип: or or

      A value to set for the attribute. If , the specified attribute will be removed (as in ).

  • An object of attribute-value pairs to set.

    • attributeName Тип:

      The name of the attribute to set.

    • function Тип: ( index, attr ) => or A function returning the value to set. is the current element. Receives the index position of the element in the set and the old attribute value as arguments.

The method is a convenient way to set the value of attributes—especially when setting multiple attributes or using values returned by a function. Consider the following image:

1

Setting a simple attribute

To change the attribute, simply pass the name of the attribute and its new value to the method:

1

Add an attribute the same way:

1

Setting several attributes at once

To change the attribute and add the attribute at the same time, pass both sets of names and values into the method at once using a plain JavaScript object. Each key-value pair in the object adds or modifies an attribute:

1 2 3 4

When setting multiple attributes, the quotes around attribute names are optional.

WARNING: When setting the ‘class’ attribute, you must always use quotes!

Note: Attempting to change the attribute on an or element created via will throw an exception on Internet Explorer 8 or older.

Computed attribute values

By using a function to set attributes, you can compute the value based on other properties of the element. For example, to concatenate a new value with an existing value:

1 2 3

This use of a function to compute attribute values can be particularly useful when modifying the attributes of multiple elements at once.

Note: If nothing is returned in the setter function (ie. ), or if is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.

Работа с классами через DOM-свойство className

Если кратко, то сначала нужно разобраться что такое DOM.

DOM – это фундаментальная сущность, которую браузер создаёт после получения HTML кода запрашиваемой страницы и её парсинга. DOM – это объектная модель HTML страницы и API для работы с ней через JavaScript. Это означает то, что с помощью JavaScript сценариев вы можете изменять DOM «на лету» и тем самым страницу. Но DOM браузер создаёт не только для взаимодействия с ней через JavaScript. Он её, например, также использует для создания других структур, которые используются для отрисовки страницы во вкладке браузера.

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

В jQuery для работы с DOM-свойствами используется .

Рассмотрим применения данного метода для управления классами элемента.

<img id="logo" class="img-responsive" src="..." alt= "">

<script>
// получим элемент #logo
var logo = $('#logo');
// получим значение DOM-свойства className
console.log(logo.prop('className'));
// кстати в jQuery к нему можно ещё обращаться, используя class
console.log(logo.prop('class'));
// изменим значение DOM-свойства className
logo.prop('className', 'img-fluid');
// удалим классы у элемента
logo.prop('class','');
// добавим классы "img-logo img-circle" к элементу
logo.prop('className', 'img-logo img-circle');
</script>

Other selectors and conventions

Additions

  • : Elements whose NAME attribute doesn’t match the specified value. Equivalent to .
  • : Elements with textContent containing the word ‘TEXT’. Case-sensitive.
  • : Header elements (h1, h2, h3, h4, h5, h6).
  • : Elements with at least one child node (either text or an element).
  • : (option) elements that are currently selected

Form Selector Additions

Note: In this context, , , , and are all considered to be input elements.

  • : Input elements
  • : Input elements that are s or have type «button»
  • , , , , , , , : Input elements with the specified type

Positional Selector Additions

In this context, «positional» refers to an element’s placement in the collection after a selection, based on document order. For example, would return an array containing the first on the page, while would target the first on the page and select all elements within.

Note: Positional indexes begin at zero.

  • /: The first/last matching element
  • /: Even/odd-numbered elements
  • /: The nth element; e.g. finds the 6th element
  • /: Elements at positions above/below the specified position
  • The , which users interact with.
  • The , for modifications to the selector engine.
  • The , used internally by Sizzle.

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

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

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

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

  • Изображение по атрибуту
  • Ссылку по атрибуту
  • Все поля формы, которые имеют атрибут

…и так далее.

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

Селектор Описание Пример
Атрибут Выбирает элемент(ы), которые содержат определенный атрибут вне зависимости от значения атрибута.
Атрибут равен Выбирает элемент(ы), которые содержат заданный атрибут с заданным значением.
Атрибут не равен Выбирает элемент(ы), которые не содержат заданного атрибута или сожержат заданный атрибут, но его значение не соответствует заданному.
Атрибут начинается с Выбирает элемент(ы), которые содержат заданный атрибут, у которого значение начинается с заданной строки.
Атрибут заканчивается Выбирает элемент(ы), которые содержат атрибут, у которого значение заканчивается заданной строкой.
Атрибут содержит Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданную строку.
Атрибут содержит слово Выбирает элемент(ы), который содержит атрибут, у которого значение содержит заданное слово. «Слово» — это последовательность символов без пробелов.
Атрибут содержит префикс Выбирает элемент(ы), который содержит атрибут, у которого значение либо равно заданной строке, либо начинается с заданной строки с последующим дефисом.

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

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

Селектор «Атрибут содержит префикс» выглядит неэффективно, но он сделан для обработки атрибутов языка, таких как и .

More Examples of jQuery Selectors

Syntax Description Example
$(«*») Selects all elements Try it
$(this) Selects the current HTML element Try it
$(«p.intro») Selects all <p> elements with class=»intro» Try it
$(«p:first») Selects the first <p> element Try it
$(«ul li:first») Selects the first <li> element of the first <ul> Try it
$(«ul li:first-child») Selects the first <li> element of every <ul> Try it
$(«») Selects all elements with an href attribute Try it
$(«a») Selects all <a> elements with a target attribute value equal to «_blank» Try it
$(«a») Selects all <a> elements with a target attribute value NOT equal to «_blank» Try it
$(«:button») Selects all <button> elements and <input> elements of type=»button» Try it
$(«tr:even») Selects all even <tr> elements Try it
$(«tr:odd») Selects all odd <tr> elements Try it

Use our jQuery Selector Tester to demonstrate the different selectors.

For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.

Internal API


Note: Functionality should be accessed via the Public and Extension APIs. While the Internal API is intended specifically for internal use, it has been exposed for edge cases.

Sizzle internally caches compiled selector functions and tokenization objects. The length of these caches defaults to 50, but can be set to any positive integer by assigning to this property.

This method compiles a selector function and caches it for later use. For example, calling during initialization of a plugin will speed up the first selection of matching elements.

returns(Function): The compiled function to be used when filtering the set of possibly matching elements

Parameters

selector: A CSS selector

Thanks

Special thanks goes out to the following. Without their contributions to the open source community, Sizzle would not be what it is today.

  • Samuel Lebeau for writing bouncer, a small bottom-up element matcher.

Public API

The main function for finding elements. Uses if available.

returns (Array): All elements matching the selector

Parameters

selector: A CSS selector

context: An element, document, or document fragment to use as the context for finding elements. Defaults to .Note: Prior to version 2.1, document fragments were not valid here.

results: An array or an array-like object, to which Sizzle will append results. For example, jQuery passes a jQuery collection. An «array-like object» is an object with a nonnegative numeric property and a method.

Uses native if available

returns(Boolean): Whether the given element matches the selector

Parameters

element: A against which Sizzle will test the selector

selector: A CSS selector

returns(Array): Elements in the array that match the given selector

Parameters

selector: A CSS selector

elements: An array of to filter against the specified selector


С этим читают