JavaScript Tutorial/jQuery/Selector Attribute
Содержание
- 1 attributeContains(attribute, value) matches specified attribute
- 2 attributeEndsWith(attribute, value): have the specified attribute and it ends with a certain value.
- 3 attributeEquals(attribute, value) matches elements with the specified attribute
- 4 attributeHas(attribute) matches elements that have the specified attribute.
- 5 attributeMultiple(selector1, selector2, selectorN) matches elements with specified attribute
- 6 attributeNotEqual(attribute, value) matches elements that don"t have the specified attribute
- 7 Get by attribute
- 8 match all of the specified attribute filters
- 9 Select attribute and it ends with a certain value
- 10 Select attribute by value
- 11 Select attribute: not equals
- 12 Select attribute: start with
- 13 Select attribute value
- 14 Select attribute value: match value
attributeContains(attribute, value) matches specified attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name*="a"]").val("a"); }); </script> </head> <body> <body> <input name="a" />
</body>
</html></source>
attributeEndsWith(attribute, value): have the specified attribute and it ends with a certain value.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name$="b"]").val("a"); }); </script> </head> <body> <body> <input name="ab" />
</body>
</html></source>
attributeEquals(attribute, value) matches elements with the specified attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name="ab"]").val("ab"); }); </script> </head> <body> <body> <input name="ab" />
</body>
</html></source>
attributeHas(attribute) matches elements that have the specified attribute.
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div[id]").one("click", function(){ var idString = $(this).text() + " = " + $(this).attr("id"); $(this).text(idString); }); }); </script> </head> <body> <body>
no id
with id
</body>
</html></source>
attributeMultiple(selector1, selector2, selectorN) matches elements with specified attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[id][name$="m"]").val("asdf"); }); </script> </head> <body> <body> <input id="a" name="m" />
</body>
</html></source>
attributeNotEqual(attribute, value) matches elements that don"t have the specified attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name!="n"]").val(" not n"); }); </script> </head> <body> <body> <input type="text" name="newsletter" value="Hot Fuzz" /> </body>
</html></source>
Get by attribute
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div[id]").one("click", function(){ var idString = $(this).text() + " = " + $(this).attr("id"); $(this).text(idString); }); }); </script> </head> <body> Click to see.
div
div
</body>
</html></source>
match all of the specified attribute filters
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[id][name$="data"]").val("data");
}); </script> </head> <body> <input id="end-data" name="data" /> </body>
</html></source>
Select attribute and it ends with a certain value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name$="Abc"]").val("data"); }); </script> </head> <body> <input name="Abc" /> <input name="Bcd" /> <input name="Cde" /> </body>
</html></source>
Select attribute by value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name="me"]").next().text(" changed");
}); </script> </head> <body>
<input type="radio" name="me" value="A" />
data
<input type="radio" name="me" value="B" />
data
<input type="radio" name="me" value="C" />
data
</body>
</html></source>
Select attribute: not equals
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name!="me"]").next().text(" changed");
}); </script> </head> <body>
<input type="radio" name="you" value="A" />
data
<input type="radio" name="me" value="B" />
data
<input type="radio" name="me" value="C" />
data
</body>
</html></source>
Select attribute: start with
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name^="A"]").val("data"); }); </script> </head> <body> <input name="Abc" /> <input name="Bcd" /> <input name="Cde" /> </body>
</html></source>
Select attribute value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div[id]").one("click", function(){ var idString = $(this).text() + " = " + $(this).attr("id"); $(this).text(idString); }); }); </script> </head> <body> Click to see.
div
div
</body>
</html></source>
Select attribute value: match value
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name*="Abc"]").val("Abc");
}); </script> </head> <body> <input name="Abc" /> <input name="Bcd" /> <input name="Cde" /> </body>
</html></source>