title: change class name in jquery
body: <p>am making a site, I have menu as components in ascx.</p>
  
  <p>I want to change my class name to different name;</p>
  
  <p>this is my code:</p>
  
  <pre><code>&lt;div id="mainMenu" style="float: left;"&gt;
      &lt;ul class="level1 static"&gt;
          &lt;li class="menu" style="position: relative;"&gt;test &lt;/li&gt;
          &lt;li class="menu" style="position: relative;"&gt;test &lt;/li&gt;
          &lt;li class="menu" style="position: relative;"&gt;test &lt;/li&gt;
          &lt;li class="menu" style="position: relative;"&gt;test &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>for one of the page, I want to add my own style to the menu li.
  so I want all classes changed to:</p>
  
  <pre><code>class="apple" 
  class="grape" 
  class="bannana"
  class="orange" 
  </code></pre>
  
  <p>how will I do this in jquery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      // ?
  &lt;/script&gt;
  </code></pre>