JavaScript Tutorial/jQuery/Selector tag class
Содержание
- 1 Finds every DIV element.
- 2 Finds the elements that match any of these three selectors.
- 3 Finds the element with the class "myClass".
- 4 Find the very next sibling of each paragraph that has a class "selected".
- 5 Get last paragraph and add class
- 6 Matches all elements with the given class
- 7 Query just added tags
- 8 Select based one just added
- 9 Select from nested classes
- 10 Select tag and its class
- 11 Select tag by name
- 12 Header 2
Finds every DIV element.
<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").css("border","3px solid red"); }); </script> </head> <body> <body>
span class="myClass"
</body>
</html></source>
Finds the elements that match any of these three selectors.
<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,span,p.myClass").css("color","red"); }); </script> </head> <body> <body>
p class="myClass"
p class="notMyClass"
span
</body>
</html></source>
Finds the element with the class "myClass".
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".myClass").css("border","3px solid red"); }); </script> </head> <body> <body>
span class="myClass"
</body>
</html></source>
Find the very next sibling of each paragraph that has a class "selected".
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").next(".selected").css("background", "yellow"); }); </script> </head> <body> <body>
Hello
Hello Again
</body>
</html></source>
Get last paragraph and add class
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p:last").addClass("selected"); }); </script> <style> .selected { color:red; } </style> </head> <body> <body>
A
B
C
</body>
</html></source>
Matches all elements with the given class
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".myClass").css("border","3px solid red");
}); </script> </head> <body>
span
</body>
</html></source>
Query just added tags
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").html("bold"); $("p b").append(document.createTextNode("added")).css("color", "red"); }); </script> </head> <body> <body>
asdf
</body>
</html></source>
Select based one just added
<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").html("bold not bold"); $("div b").append(document.createTextNode("!!!")).css("color", "red"); }); </script> </head> <body> <body>
</body>
</html></source>
Select from nested classes
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".myClass.myOtherClass").css("border","1px solid red");
}); </script> </head> <body>
span
</body>
</html></source>
Select tag and its class
<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,span,p.myClass").css("border","3px solid red"); }); </script> </head> <body>
p
p
span
</body>
</html></source>
Select tag by name
<source lang="javascript">
<html>
<head> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <style type="text/css"> a.test { font-weight: bold; color:red;} </style> <script type="text/javascript"> $(document).ready(function(){ $("input.buttonA").click(function(){$("div.contentToChange").find("p").not(".alert").append(" Appended")}); $("input.buttonB").click(function(){$("strong").remove()});
}); </script> </head> <body> <input type="button" value="Add" class="buttonA" /> <input type="button" value="Remove" class="buttonB" />
Header 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. <p class="fifthparagraph">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</body>
</html></source>