JavaScript Tutorial/jQuery/Selector ID

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

Assign value to DIV with ID

<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>
     <div id="result"></div>

  </body>
</html>


Finds the element with the id "myDiv".

<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>
          <div id="notMe">asdf<p>id="notMe"</p>asdf</div>
          <div id="myDiv">id="myDiv"</div>
    </body>
</html>


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

<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>
            <div id="myID.entry[0]">id="myID.entry[0]"</div>
            <div id="myID.entry[1]">id="myID.entry[1]"</div>
            <div id="myID.entry[2]">id="myID.entry[2]"</div>
    </body>
</html>


ID index selector

<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>
  <div id="myID.index[0]">0</div>
  <div id="myID.index[1]">1</div>
  <div id="myID.index[2]">2</div>

  </body>
</html>


ID selector

<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>
  <div id="myID.index[0]">0</div>
  <div id="myID.index[1]">1</div>
  <div id="myID.index[2]">2</div>

  </body>
</html>


ID selector only

<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>
  <div id="myID">0</div>
  <div id="myID1">1</div>
  <div id="myID2">2</div>

  </body>
</html>


Reference by tag name and id

<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>
      <p>A</p>
      <p>B</p>
      <p>C</p>
      <div id="result1"></div>
    </body>
</html>


Removes the element with the ID "selected" from the set of all paragraphs.

$("p").not("#selected")


Select by ID

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Selector_ID&oldid=9763»