jQuery Attribute Starts With [name^="value"]

What You’ll Learn

The attribute starts-with selector — written [name^="value"] — matches elements whose attribute value begins with your search string. Matching is case-sensitive. It is ideal for URL schemes, ID prefixes, and grouped field names — available since jQuery 1.0.

Introduction

Many real-world naming patterns use prefixes: URL schemes (https://), server-generated IDs (ETI_1234), and grouped field names (billing_email, billing_city). The starts-with attribute selector lets you target those elements without listing every full name.

The caret-equals syntax [attribute^="value"] checks whether the attribute string begins with your prefix — nothing may precede it. jQuery has supported this selector since version 1.0, and browsers implement it natively through CSS3 attribute selectors.

Understanding the Starts-With Selector

Think of the attribute value as text on a line. The selector asks: “Do the first characters exactly equal my prefix?” If yes, the element matches.

• name="newsletter" + [name^="news"] → matches (starts with news).
• name="newsboy" + [name^="news"] → matches.
• name="milkman" + [name^="news"] → no match (starts with milk).
• href="https://example.com" + [href^="https://"] → matches.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "[attribute^='value']" )
// shorthand:
$( "[attribute^='value']" )

// common patterns:
$( "input[name^='news']" )
$( "a[href^='https://']" )

Parameters

• attribute — the HTML attribute name (name, href, id, etc.).
• value — prefix string the attribute value must begin with (case-sensitive).

Return value

• A jQuery object containing every element whose attribute starts with the prefix.
• Empty collection when no values match.

Official jQuery API example

$( "input[name^='news']" ).val( "news here!" );

// Matches name="newsletter", name="newsboy"
// Does NOT match name="milkman"

Examples Gallery

Example 1 follows the official jQuery API demo. Examples 2–5 cover prefix rules, operator comparison, HTTPS links, and scoped form fields. Use the Try-it links to run each snippet.

$( "input[name^='news']" ).val( "news here!" );

// Matches: newsletter, newsboy
// Skips: milkman

newsletter, newsboy → value "news here!"
milkman → unchanged

var names = [ "newsletter", "newsboy", "milkman", "news", "my_news" ];

names.forEach( function( n ) {
  var $el = $( "<input>" ).attr( "name", n ).appendTo( "body" );
  console.log( n, "→", $el.is( "[name^='news']" ) ? "MATCH" : "no" );
  $el.remove();
});

newsletter → MATCH
newsboy → MATCH
milkman → no
news → MATCH
my_news → no

var path = "/assets/report.pdf";
var $a = $( "<a>" ).attr( "href", path ).appendTo( "body" );

console.log( "href:", path );
console.log( "^=/assets:", $a.is( "[href^='/assets']" ) );
console.log( "$=.pdf:", $a.is( "[href$='.pdf']" ) );
console.log( "*=report:", $a.is( "[href*='report']" ) );

$a.remove();

href: /assets/report.pdf
^=/assets: true
$=.pdf: true
*=report: true

Each operator checks a different part of the same string

$( "a[href^='https://']" ).addClass( "secure-link" );

// Matches https://example.com and https://docs.site/page
// Does not match http:// or relative /about links

HTTPS links → class "secure-link"
HTTP and relative links → unchanged

$( "#checkout input[name^='billing_']" ).addClass( "billing-field" );

// Matches billing_email, billing_city inside #checkout
// Ignores shipping_email and billing fields in other forms

billing_email, billing_city in #checkout → class "billing-field"
shipping_email and fields outside #checkout → not styled

🚀 Common Use Cases

• URL schemes — a[href^='https://'], a[href^='mailto:'].
• Field prefixes — input[name^='billing_'] for checkout forms.
• Server IDs — [id^='ETI_'] for framework-generated element IDs.
• Path roots — a[href^='/docs/'] for documentation sections.
• Data attributes — [data-tab^='settings-'] for grouped tabs.
• Image CDN paths — img[src^='https://cdn.'] for asset origins.

📝 Notes

• Available since jQuery 1.0 — standard CSS3 attribute selector.
• Comparison is case-sensitive (per official jQuery docs).
• Prefix must be the first characters — nothing may precede it.
• Not the same as *= — substring anywhere vs strict prefix.
• Official docs: useful for server-generated IDs, but CSS classes are often faster when you control markup.
• Pair with element type and ID for performance: #checkout input[name^='billing_'].

💡 Best Practices