$(“#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, or do have the specified attribute but not with 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 that have the specified attribute, with any value.<br><b><font color=”red”>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$=’man’]” ).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);
