JavaScript Tutorial/jQuery/Selector ID

Материал из Web эксперт
Перейти к: навигация, поиск

Assign value to DIV with ID

   <source lang="javascript">

<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="javascript">

<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"

asdf
id="myDiv"
   </body>

</html></source>


Finds the element with the id "myID.entry[1]".

   <source lang="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

<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="javascript">

$("p").not("#selected")</source>


Select by ID

   <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>