基本标签应用，移除CSS，在div中间追加加载标签和事件 

<div><label>Some images:</label></div>
<div>
  <img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
  <img src="images/image.2.jpg" id="littleBear" title="A dog named Little Bear"/>
  <img src="images/image.3.jpg" id="verbena" alt="Verbena"/>
  <img src="images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
  <img src="images/image.5.jpg" id="tigerLily" alt="Tiger Lily"/>
  <img src="images/image.6.jpg" id="coffeePot"/>
</div>

<div id="someDiv">This is a &lt;div&gt; with an id of <tt>someDiv</tt></div>
<div title="myTitle1"><span>Hello</span></div>
<div title="myTitle2"><span>Goodbye</span></div>

<ul class="myList">
  <li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>

<table id="languages" border="0" cellspacing="1">
  <thead>
    <tr>
      <th>Language</th>
      <th>Type</th>
      <th>Invented</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Java</td>
      <td>Static</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>Ruby</td>
      <td>Dynamic</td>
      <td>1993</td>
    </tr>
    <tr>
      <td>Smalltalk</td>
      <td>Dynamic</td>
      <td>1972</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>Static</td>
      <td>1983</td>
    </tr>
  </tbody>
</table>

<form action="" method="put" onsubmit="return false;">
  <div>
    <label>Text:</label> <input type="text" id="aTextField" name="someTextField"/>
  </div>
  <div>
    <label>Radio group:</label>
    <input type="radio" name="radioGroup" id="radioA" value="A"/> A
    <input type="radio" name="radioGroup" id="radioB" value="B"/> B
    <input type="radio" name="radioGroup" id="radioC" value="C"/> C
  </div>
  <div>
    <label>Checkboxes:</label>
    <input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
    <input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2
    <input type="checkbox" name="checkboxes" id="checkbox3" value="3"/> 3
    <input type="checkbox" name="checkboxes" id="checkbox4" value="4"/> 4
  </div>
  <button type="submit" id="submitButton">Submit</button>
</form>
body,th,td {
  font-size: 8pt;
  background-color: white;
}

.redBorder, .wrappedElement {
  border: solid red 1px;
}

.thickBorder {
  border-width: 3px;
}

.seeThrough {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

table {
  background-color: black;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <link rel="stylesheet" type="text/css" href="sample.css">
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="../scripts/support.labs.js"></script>
    <script type="text/javascript">
      function performOperation(operation) {
        $('*').removeClass('wrappedElement');
        eval('var wrappedSet='+operation+';');
        wrappedSet.addClass('wrappedElement');
        return wrappedSet;
      }

      $(function(){
        $(document.body).load('sample.dom.html');
      });
    </script>
  </head>

  <body class="plain">
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>New &lt;div&gt;s Example</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
    </script>
    <script type="text/javascript">
      $(function(){
        $("<div class='foo'>I have foo!</div><div>I don 't</div>")
          .filter(".foo").click(function() {
            alert("I'm foo!");
          }).end().appendTo("#someParentDiv");
      });
    </script>
  </head>

  <body>
    <div>Div 1</div>
    <div id="someParentDiv">Div 2</div>
    <div>Div 3</div>
  </body>
</html>

 $("<div class='foo'>I have foo!</div><div>I don 't</div>")
          .filter(".foo").click(function() {
            alert("I'm foo!");
          }).end().appendTo("#someParentDiv");  加载到某个标签后

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../common.css">
    <link rel="stylesheet" type="text/css" href="sample.css">
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script>
    <script type="text/javascript" src="../scripts/support.labs.js"></script>
    <script type="text/javascript">
      function performOperation(operation) {
        $('*').removeClass('wrappedElement');
        eval('var wrappedSet='+operation+';');
        wrappedSet.addClass('wrappedElement');
        return wrappedSet;
      }

      $(function(){
        $(document.body).load('sample.dom.html');
      });
    </script>
  </head>

  <body class="plain">
  </body>
</html>

 

 

 

posted @ 2012-10-30 14:44  邹晟  阅读(883)  评论(0)  编辑  收藏  举报