JavaScript Tutorial/jQuery/Selector tag class

Материал из Web эксперт
Версия от 11:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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>
div class="myClass"
         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>
div

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>
div class="myClass"
         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>
div
div
     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>
div
div
     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>
div

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>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_tag_class&oldid=9525»