What is jQuery attributes in html?

Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements.

Most of these attributes are available through JavaScript as DOM node properties. Some of the more common properties are –

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

Consider the following HTML markup for an image element –

<img id = "imageid" src ="image.gif" alt = "Image" class = "myclass" title = "This is an image"/>

In this element’s markup, the tag name is img, and the markup for id src, alt, class, and title represents the element’s

attributes. each of which consists of a name and a value.

jQuery gives us the means to easily manipulate an elements’s attributes and gives us access to the element so that we can

also change its properties.

Attribute Contains Selector [name*=”value”]

It returns all the elements with specified attribute and its value contains at least one string value as substring. In other

words, it represents value with specified attribute, with a value containing string.

attribute Contains selector

Selects elements that have the specified attribute with a value containing a given substring.

jQuery(“[attribute*=’value’]”)

attribute: An attribute name.

value: An attribute value. Can be either a valid identifier or a quoted string.

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the

selector’s string appears anywhere within the element’s attribute value. Compare this selector with the Attribute Contains

Word slector (e.g [att~=”word”]), which is more appropriate in many cases.

Example

Finds all inputs with a name attribute that contains ‘man’ and sets and value with some text.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>attributeContains demo</title>
 <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
 </head>
 <body>
<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name*='man']").val( "has man in it!");
</script>

</body>
</html>

Demo:

Visually analyzed image

Attribute Contains Prefix Selector [name|=”value”]

attribute Contains Prefix Selector

Selects elements that have the specified attribute with a value either a given string or starting will that string followed by a hyphen(-)

JQuery(“[attribute|=’value’]”)

attribute: An attribute name.
value: An attribute value. Can be either a valid identifier or a quoted string.

The selector was introduced into the CSS specification to handle language attributes.

Example

Finds all links with an hreflang attribute that is english.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
 <title>attributeContainsPrefix demo </title>
 <style>
  a {
  display: inline-block;
   }
   </style>
   <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
   </head>
   <body>
<a href="example.html" hreflang="en">Some text</a>
<a href="example.html" hreflang="en-UK">Some other text</a>
<a href="example.html" hreflang="english">will not be outlined</a>

<script>
$( "a[hreflang|='en']").CSS( "border", "3px dotted green" );
</script>

</body>
</html>
 

Leave a Reply

Your email address will not be published. Required fields are marked *