Detailed explanation of the specific use of jQuery selector [attribute^=value]-JS Tutorial-php.cn

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

黄舟

Release： 2017-06-23 13:31:21

Original

1064 people have browsed it

Return value:Array[attribute^=value]

Overview

Match the given attribute is an element starting with certain values

Parameters

attributeStringV1.0

Copy after login

Attribute name

value StringV1.0

Copy after login

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" />

Copy after login

jQuery Code:

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

Copy after login

Result:

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

Copy after login

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

Grammar structure:

$("[attribute^=value]")

Copy after login

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>

Copy after login

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>

Copy after login

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!