JavaScript DHTML/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
<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>
attributeEndsWith(attribute, value): have the specified attribute and it ends with a certain value.
<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>
attributeEquals(attribute, value) matches elements with the specified attribute
<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>
attributeHas(attribute) matches elements that have the specified attribute.
<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>
<div>no id</div>
<div id="hey">with id</div>
</body>
</html>
attributeMultiple(selector1, selector2, selectorN) matches elements with specified attribute
<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>
attributeNotEqual(attribute, value) matches elements that don"t have the specified attribute
<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>
Get by attribute
<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</div>
<div id="hey">div</div>
</body>
</html>
match all of the specified attribute filters
<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>
Select attribute and it ends with a certain value
<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>
Select attribute by value
<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>
<div>
<input type="radio" name="me" value="A" />
<span>data</span>
</div>
<div>
<input type="radio" name="me" value="B" />
<span>data</span>
</div>
<div>
<input type="radio" name="me" value="C" />
<span>data</span>
</div>
</body>
</html>
Select attribute: not equals
<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>
<div>
<input type="radio" name="you" value="A" />
<span>data</span>
</div>
<div>
<input type="radio" name="me" value="B" />
<span>data</span>
</div>
<div>
<input type="radio" name="me" value="C" />
<span>data</span>
</div>
</body>
</html>
Select attribute: start with
<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>
Select attribute value
<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</div>
<div id="hey">div</div>
</body>
</html>
Select attribute value: match value
<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>