JavaScript DHTML/jQuery/Selector ID
Содержание
Assign value to DIV with ID
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ var input = $(":submit"); $("#result").text("jQuery matched " + input.length + " elements."); }); </script> </head> <body> <form><input type="submit" /></form>
</body>
</html>
</source>
Finds the element with the id "myDiv".
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myDiv").css("border","1px solid red"); }); </script> </head> <body> <body>
asdf
id="notMe"
asdfid="myDiv"
</body>
</html>
</source>
Finds the element with the id "myID.entry[1]".
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myID\\.entry\\[1\\]").css("border","3px solid red"); }); </script> </head> <body> <body>
id="myID.entry[0]"
id="myID.entry[1]"
id="myID.entry[2]"
</body>
</html>
</source>
ID index selector
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> .changeP { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#myID\\.index\\[1\\]").css("border","3px solid red"); }); </script> </head> <body>
0
1
2
</body>
</html>
</source>
ID selector
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> .changeP { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#myID\\.index\\[1\\]").css("border","3px solid red"); }); </script> </head> <body>
0
1
2
</body>
</html>
</source>
ID selector only
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> .changeP { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#myID").css("border","3px solid red"); }); </script> </head> <body>
0
1
2
</body>
</html>
</source>
Reference by tag name and id
<source lang="html4strict">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert($("div#result1").hasClass("selected").toString()); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <body>
A
B
C
</body>
</html>
</source>
Removes the element with the ID "selected" from the set of all paragraphs.
<source lang="html4strict">
$("p").not("#selected")
</source>
Select by ID
<source lang="html4strict">
<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>