jQuery [name|=”value”] Selector

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 34 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In web development, selecting specific elements based on their attributes is a common task. jQuery simplifies this process with powerful selectors like [name|="value"], which allows you to target elements with attribute values that match a specified pattern. Understanding and mastering this selector can significantly enhance your ability to manipulate elements dynamically.

In this guide, we'll explore the usage of the jQuery [name|="value"] selector with practical examples to help you harness its full potential.

🧠 Understanding [name|=”value”] Selector

The [name|="value"] selector targets elements with an attribute name whose value is exactly equal to value, or begins with value immediately followed by a hyphen -. This selector is particularly useful when dealing with attribute values that follow a specific pattern or are part of a group.

💡 Syntax

The syntax for the [name|=”value”] selector is straightforward:

syntax.js

Copied

$("[name|='value']")

📝 Example

Selecting Elements with Specific Attribute Values:

Suppose you have a group of input elements with name attributes, and you want to select those whose name attribute begins with a specific prefix. You can achieve this using the [name|="value"] selector:
index.html
Copied
```
<input type="text" name="user-123">
<input type="text" name="user-456">
<input type="text" name="admin-789">
```
example.js
Copied
```
$("input[name|='user']").css("border-color", "blue");
```
This will set the border color of input elements with name attributes starting with "user" to blue.
Applying Styles to Elements with Attribute Patterns:

You can dynamically style elements based on attribute patterns using jQuery. For instance, let's change the background color of elements whose name attribute contains a specific substring:
index.html
Copied
```
<input type="text" name="username">
<input type="text" name="email">
<input type="text" name="password">
```
example.js
Copied
```
$("[name|='user']").css("background-color", "lightyellow");
```
This will set the background color of input elements with name attributes containing the substring user to light yellow.
Handling Events on Elements with Specific Attributes:

Binding events to elements based on their attribute values is also straightforward with jQuery. Here's an example where we alert a message when an input field with a specific name attribute is focused:
index.html
Copied
```
<input type="text" name="username">
```
example.js
Copied
```
$("input[name|='username']").focus(function() {
  alert("Username field focused!");
});
```
Dynamically Updating Attribute Values:

jQuery enables you to modify attribute values of elements matching a specific pattern. For instance, let's change the value of all input fields with name attributes starting with user:
example.js
Copied
```
$("input[name|='user']").val("New Value");
```
This will set the value of input fields with name attributes starting with user to New Value.

🎉 Conclusion

The jQuery [name|="value"] selector provides a versatile way to target elements based on attribute patterns, offering flexibility and efficiency in web development tasks. Whether you need to select elements, apply styles, handle events, or modify attribute values dynamically, this selector empowers you to do so with ease.

By mastering its usage, you can streamline your code and create more interactive and dynamic web pages effortlessly.