Home >Web Front-end >JS Tutorial >Detailed explanation of the specific use of jQuery selector [attribute^=value]

Detailed explanation of the specific use of jQuery selector [attribute^=value]

黄舟Original: 2017-06-23 13:31:211103browse

Return value:Array[attribute^=value]

Overview

Match the given attribute is an element starting with certain values

Parameters

attributeStringV1.0

Attribute name

value StringV1.0

Attribute value. Quotes are optional in most cases. But it is used to avoid conflicts when the attribute value contains "]".

Example

Description:

Find all input elements whose name starts with 'news'

HTML code:

<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />

jQuery Code:

$("input[name^=&#39;news&#39;]")

Result:

[ <input name="newsletter" />, <input name="newsboy" /> ]

The selector can select elements whose attribute values start with certain values.

Grammar structure:

$("[attribute^=value]")

Parameter list:

Detailed explanation of the specific use of jQuery selector [attribute^=value]

Example code:

Example one:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li[id^=s]").css("color","blue"); 
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second" title="jquery">Jquery专区</li>
</ul>
<button>点击查看效果</button>
</body>
</html>

The above code can set the text color of the li element whose id attribute value starts with s in the li element to blue.

Example 2:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li[id^=[s]").css("color","blue"); 
  }); 
}); 
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="[second" title="jquery">Jquery专区</li>
</ul>

<button>点击查看效果</button>
</body>
</html>

From the above code, we can see how when the code contains "[" or "]", it must be enclosed in quotation marks, otherwise it will cause a matching error.

The above is the detailed content of Detailed explanation of the specific use of jQuery selector [attribute^=value]. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Instructions for using jQuery selector [attribute!=value]Next article：Instructions for using jQuery selector [attribute!=value]

See more

Detailed explanation of the specific use of jQuery selector [attribute^=value]

Related articles