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>
