jQuery初识，引入jquery库，jquery语法、函数，类样式使用与移除

最新推荐文章于 2025-12-04 17:39:28 发布

原创最新推荐文章于 2025-12-04 17:39:28 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

jquery常用功能专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用jQuery实现表格的隔行变色效果，展示了如何通过$()工厂函数和选择器操作DOM元素，以及CSS样式修改。同时涉及了添加和移除类样式的例子。

<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       $(function(){
           // alert("我编写的第一个jQuery程序");
       });
       $(document).ready(function(){
           // 隔行变色 $()工厂函数 tr:even 选择器 css()改变样式的方法
           $("tr:even").css("backgroundColor","yellow")
           // jquery函数中可写js语句
           // 定义一个Dom对象
           var trs=document.getElementByTagName("tr");
           // (trs).css("backgroundColor","yellow");
       });
       $("p").css("color","blue");
       $("#p1").css("color","green");
       $(".red").css("color","red");

       // 通过类样式修改p3
       $("#p3").addClass("change");
       // 移除类样式
       $("#p3").removeClass("change");
   </script>

附赠html与css部分

<body>
       <table border="1px">
           <tr>
               <td>a</td>
               <td>a</td>
               <td>a</td>
               <td>a</td>
           </tr>
           <tr>
               <td>b</td>
               <td>b</td>
               <td>b</td>
               <td>b</td>
           </tr>
           <tr>
               <td>c</td>
               <td>c</td>
               <td>c</td>
               <td>c</td>
           </tr>
           <tr>
               <td>d</td>
               <td>d</td>
               <td>d</td>
               <td>d</td>
           </tr>
           <tr>
               <td>e</td>
               <td>e</td>
               <td>e</td>
               <td>e</td>
           </tr>
           <tr>
               <td>f</td>
               <td>f</td>
               <td>f</td>
               <td>f</td>
           </tr>
       </table>
       <p>测试</p>
       <p class="red">测试</p>
       <p id="p1">测试</p>
       <p id="p3">我佛减肥不能渡欧东</p>
   </body>

S01E08