The example in this article describes the [Attribute^=value] selector usage in jquery. Share to everyone for your reference. The specific analysis is as follows:
This selector is able to select the element that the property value starts with some values.
Syntax structure:
Copy Code code as follows:
Parameter list:
Parameters |
Describe |
Attribute |
The name of the property. |
Value |
The value at which the element number property starts. Quotation marks are optional in most cases. However, you avoid conflicts when you encounter such things as property values containing "]". |
Instance code:
Example one:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" co ntent= "http://www.jb51.net/"/>
<title> Cloud Communities </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>
<body>
<ul>
<li id= "a" >ht ML zone </li>
<li id= "second" title= "jquery" >jquery zone </li>
</ul>
<ul>
<li id= "Third" > Welcome to Cloud-dwelling community </li>
<li> cloud-Habitat Community welcome you </li>
</ul>
;button> Click View Effect </button>
</body>
The above code sets the text color of the LI element with the value of the id attribute in the LI element to blue at the beginning of S.
Example two:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "Author" content= "http://www.jb51.net/"/>
<title> Cloud-dwelling community </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>
<body>
<ul>
<li id= "The" The >html zone </li>
<li id= "[Second" title= "jquery" >jquery zone </li>
</ul>
<ul>
<li id= "Third" > Welcome to Yun-Habitat community </li>
<li> Cloud-dwelling communities welcome you </li>
</ul>
<button> Click to view Effect </button>
</body>
From the above code you can see how the code contains "[" or "]", you must enclose quotes, or you will cause a matching error.
I hope this article will help you with your jquery programming.