JavaScript Tutorial/jQuery/replaceAll

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

Replace a button with text

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
$(document).ready(
  function() {
    $("input#id1").click(
      function($e) {
        $e.preventDefault();
        $(this).replaceWith(
          "<p>replaced</p>"
        );
      }
    );
    $("input#id2").click(
      function($e) {
        $e.preventDefault();
        $(this).replaceWith(
          "<p>replaced</p>"
        );
      }
    );
  }
);
    </script>
  </head>
  <body>
    <div>
      <input type="submit" id="id1" value="View Quote" />
    </div>
    <div>
      <input type="submit" id="id2" value="View Quote" />
    </div>
  </body>
</html>


replaceAll(selector): complement to replaceWith()

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("<b>Paragraph. </b>").replaceAll("span");
                
         
        });
    </script>

    
  </head>
  <body>
    <body>
          <span>Span Text</span>
                 
    </body>
</html>


Replace all with

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
$(document).ready(
  function() {
    $("input#tmpQuote1").click(
      function($e) {
        $e.preventDefault();
        $("p#id1").replaceAll(this);
      }
    );
    $("input#tmpQuote2").click(
      function($e) {
        $e.preventDefault();
        $("p#id2").replaceAll(this);
      }
    );
  }
);
    </script>
    <style type="text/css">
div {
    background: #acf7d0;
    border: 3px solid #96dab6;
    margin: 3px;
}
div#tmp {
    display: none;
}
    </style>
  </head>
  <body>
    <div id="tmp">
      <p id="id1">
        asdf
      </p>
      <p id="id2">
        asdf
      </p>
    </div>
    <div>
      <input type="submit" id="tmpQuote1" value="View Quote" />
    </div>
    <div>
      <input type="submit" id="tmpQuote2" value="View Quote" />
    </div>
  </body>
</html>


Use tag to replace all

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("<b>Paragraph. </b>").replaceAll("p");
        });
    </script>
    <style>
      div { border:2px green solid;}
    </style>
  </head>
  <body>
    <body>
       <p>Hello</p>
    </body>
</html>