A small example of the jquery attribute selector to increase the understanding of the jquery attribute selector:
<!doctype html>
<meta charset= "Utf-8" >
<script src= "Http://code.jquery.com/jquery-1.9.1.js" ></script>
<style type= "Text/css" >
a{
margin-right:20px;
}
ol{
position:relative;
width:600px;
margin-left:400px;
}
dt{
margin:10px;
height:100px;
Background-color: #EAEAEA;
border:3px dotted orange;
}
. showmessage{
width:380px;
Float:left;
Background-color: #D8D8D8;
border:1px dotted red;
}
</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
var subject = "";
var describe = "";
name|= "Value"
$ ("#attri1"). Bind ("click", Function () {
var topvalue=$ ("#attri1"). Offset (). Top;
Subject = "Attribute Contains Prefix Selector [name|=\" value\ "]";
describe = "Selects elements that have specified attribute with a value either equal to a given string or starting wit h that string followed by a hyphen (-). ";
$ ("a[hreflang|= ' en ']"). CSS ("Border", "3px dotted green");
ShowMessage (Subject,describe,topvalue);
});
name*= "Value"
$ ("#attri2"). Bind ("click", Function () {
var topvalue=$ ("#attri2"). Offset (). Top;
Subject = "Attribute Contains Selector [name*=\" value\ "]";
describe = "Selects elements" have the specified attribute with a value containing the a given substring. ";
$ ("input[name*= ' Man ']"). Val ("Has Mans in it!");
ShowMessage (Subject,describe,topvalue);
});
name~= "Value"
$ ("#attri3"). Bind ("click", Function () {
var topvalue=$ ("#attri3"). Offset (). Top;
Subject = "Attribute Contains Word Selector [name~=\" value\ "]";
describe = "Selects elements that have the specified attributes with a value containing a given word, delimited by spaces." ;
$ ("input[name~= ' Man ']"). Val ("Mr.. Man being in it!");
ShowMessage (Subject,describe,topvalue);
});
name$= "Value"
$ ("#attri4"). Bind ("click", Function () {
var topvalue=$ ("#attri4"). Offset (). Top;
Subject = "Attribute Ends with Selector [name$=\" value\ "]";
describe = "Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. ";
$ ("input[name$= ' letter ']"). Val ("a letter");
ShowMessage (Subject,describe,topvalue);
});
Name= "Value"
$ ("#attri5"). Bind ("click", Function () {
var topvalue=$ ("#attri5"). Offset (). Top;
Subject = "Attribute Equals Selector [name=\" value\ "]";
describe = "Selects elements that have the specified attribute with a value exactly equal to a certain value.";
$ ("input[value= ' hot Fuzz ']"). Next (). Text ("Hot Fuzz");
ShowMessage (Subject,describe,topvalue);
});
name$= "Value"
$ ("#attri6"). Bind ("click", Function () {
var topvalue=$ ("#attri6"). Offset (). Top;
Subject = "Attribute not Equal Selector [name!=\" value\ "]";
describe = "Select elements that either don t have the specified attribute of, or do have the specified attributes but not wit h a certain value. ";
$ ("input[name!= ' newsletter ']"). Next (). Append ("<b>; Not newsletter</b> ");
ShowMessage (Subject,describe,topvalue);
});
name$= "Value"
$ ("#attri7"). Bind ("click", Function () {
var topvalue=$ ("#attri7"). Offset (). Top;
Subject = "Attribute starts with Selector [name^=\" value\ "]";
describe = "Selects elements that have the specified attribute with a value beginning exactly with a given string."
$ ("input[name^= ' News ']"). Val ("News here!");
ShowMessage (Subject,describe,topvalue);
});
name$= "Value"
$ ("#attri8"). Bind ("click", Function () {
var topvalue=$ ("#attri8"). Offset (). Top;
Subject = "has Attribute Selector [name]";
describe = "Selects elements" have the specified attribute, with any value.<br><b><font color=\ "red\" &G T;you can click the div which have ID element</font></b> ";
$ ("Div[id]"). One ("click", Function () {
var idstring = $ (this). Text () + "=" + $ (This). attr ("id");
$ (this). Text (idstring);
});
ShowMessage (Subject,describe,topvalue);
});
name$= "Value"
$ ("#attri9"). Bind ("click", Function () {
var topvalue=$ ("#attri9"). Offset (). Top;
Subject = "Multiple Attribute Selector [name=\" value\ "][name2=\" value2\ "]";
describe = "matches elements that match all of the specified attribute filters.";
$ ("input[id][name$= ')"). Val ("Only this one");
ShowMessage (Subject,describe,topvalue);
});
});
function ShowMessage (subject,describe,topvalue) {
$ ("#showMessage"). HTML ("<font color=\" red\ "><b>" +subject+ "</b></font><br>" + Describe
. addclass ("ShowMessage"). CSS ("Margin-top", Topvalue). Hide (). Show (1000);
}
</script>
<body>
<div id= "ShowMessage" ></div>
<ol>
<dt>
<input type= "button" id= "Attri1" value= "a[hreflang|= ' en '" "/><br><br>
<a href= "#" hreflang= "en" >en</a>
<a href= "#" hreflang= "en-" >en-</a>
<a href= "#" hreflang= "中文版" >english</a>
</dt>
<dt>
<input type= "button" id= "Attri2" value= "name*= ' Man"/><br><br>
<input name= "Man-news" >
<input name= "Milkman" ><br>
<input name= "Letterman2" >
<input name= "Newmilk" >
</dt>
<dt>
<input type= "button" id= "Attri3" value= "input[name~= ' Man" "/><br><br>
<input name= "Man-news" >
<input name= "Milk Man" ><br>
<input name= "Letterman2" >
<input name= "Newmilk" >
</dt>
<dt>
<input type= "button" id= "Attri4" value= "input[name$= ' letter '"/><br><br>
<input name= "Newsletter" >
<input name= "Milkman" ><br>
<input name= "Jobletter" >
</dt>
<dt>
<input type= "button" id= "Attri5" value= "input[value= ' hot Fuzz '"/><br><br>
<div>
<label>
<input type= "Radio" name= "newsletter" value= "Hot Fuzz" >
<span>name?</span>
</label>
</div>
<div>
<label>
<input type= "Radio" name= "newsletter" value= "Cold Fusion" >
<span>value?</span>
</label>
</div>
<div>
<label>
<input type= "Radio" name= "newsletter" value= "Evil plans" >
<span>value?</span>
</label>
</div>
</dt>
<dt>
<input type= "button" id= "Attri6" value= "input[name!= ' newsletter '" "/><br><br>
<div>
<input type= "Radio" name= "newsletter" value= "Hot Fuzz" >
<span>name is newsletter</span>
</div>
<div>
<input type= "Radio" value= "Cold Fusion" >
<span>no name</span>
</div>
<div>
<input type= "Radio" name= "Accept" value= "Evil plans" >
<span>name is accept</span>
</div>
</dt>
<dt>
<input type= "button" id= "Attri7" value= "input[name^= ' News '"/><br><br>
<input name= "Newsletter" >
<input name= "Milkman" ><br>
<input name= "Newsboy" >
</dt>
<dt>
<input type= "button" id= "Attri8" value= "Div[id" "/><br>"
<div>no id</div>
<div id= "Hey" >with id</div>
<div id= "There" >has an id</div>
<div>nope</div>
</dt>
<dt>
<input type= "button" id= "Attri9" value= "input[id][name$= ' Man" "/><br><br>
<input id= "Man-news" name= "Man-news" >
<input name= "Milkman" ><br>
<input id= "Letterman" name= "New-letterman" >
<input name= "Newmilk" >
</dt>
<dt>
<input type= "button" value= "Cleareffects" onclick= "javaScript:window.location.reload ();" />
</dt>
</ol>
</body>
