JavaScript Tutorial/jQuery/add

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

Add class to the result returned from an add function

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
var tmpExample = {
  ready : function() {
    $("ul#liClass1 li").add("ul#liClass3 li").addClass("justAdd");
  }
};
$(document).ready(tmpExample.ready);
    </script>
    <style type="text/css">
body {
    font: 16px sans-serif;
}
h3 {
    font-size: 18px;
    margin: 0 0 5px 0;    
}
h4 {
    font-size: 16px;
    margin: 5px 0;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li {
    margin: 1px;
    padding: 3px;
}
li.justAdd {
    background: #88fac6;
}
    </style>
  </head>
  <body id="tmpExample">
    <ul id="liClass1">
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
    </ul>
    <ul id="liClass2">
      <li>E</li>
      <li>F</li>
      <li>G</li>
      <li>H</li>
    </ul>
    <ul id="liClass3">
      <li>I</li>
      <li>J</li>
    </ul>
  </body>
</html>


add(expr): adds more elements

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
           
            
    $("div").add("p")
            .css("background", "yellow");

                    
        });
    </script>
  </head>
  <body>
    <body>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          <div>asdf</div>
          
    </body>
</html>


Adds one or more Elements to the set of matched elements(document.getElementById)

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                
           
            
                 $("p").add(document.getElementById("a")).css("background", "yellow");

                    
        });
    </script>
  </head>
  <body>
    <body>
         <p>Hello</p><span id="a">Hello Again</span>
          
    </body>
</html>


Add tag returned from document.getElementById

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").add(document.getElementById("a")).css("background", "yellow");

        });
    </script>
  </head>
  <body>
    <body>
          <p>Hello</p>
          <p id="a">Hello</p>
  </body>
</html>