jQuery实例1-CSDN博客

本文链接：https://blog.csdn.net/nlcold/article/details/6781232

最近在研究jQuery，它的优秀和功能强大也是早有耳闻，这里把一些小实例拿出来，供大家学习。你只需要把jquery.js导入，直接把下面的源代码复制到HTML中就可以运行了。jQuery这点还是很不错的，不像DWR，它对服务器没有任何的侵入，老老实实的在它的客户端运行。并且对AJAX提供了很好的支持，让JS操作起来变得如此方便和简单，很喜欢这个框架。

1. 入门实例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">   
$(document).ready(function(){
  $('#div1').append('<b>Hello World</b>'); 
}); 
</script>
</head>

<body>
<div id="div1">

</div>
</body>
</html>

2.对表格的操作，选择器的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
   <title>表格</title>
   <script src="jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
    $(document).ready(function(){
     $("#table tr").mouseover(function(){
      $(this).addClass("over");
     });
     $("#table tr").mouseout(function(){
      $(this).removeClass("over");
     });
    
     $("#table tr:even").addClass("double");
    });
   </script>
   <style type="text/css">
		th{
		background: gray;
		color: white;
		}

		table{
		width: 30em;
		height: 10em;
		}

		td {
			border-bottom:1px solid #95bce2;
			text-align:center;
		}

		tr.over td{		
		font-weight: bold;
		}

		tr.double td{
		background: #DAF3F1;
		}
   </style>
</head>

<body>
   <table id="table" border="0" cellpadding="0" cellspacing="0">
    <tr>
     <th>姓名</th>
     <th>年龄</th>
     <th>籍贯</th>
     <th>手机</th>
    </tr>
    <tr>
     <td>aaaa</td>
     <td>18</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>bbbb</td>
     <td>20</td>
     <td>广州</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>ccccc</td>
     <td>23</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>ddddd</td>
     <td>24</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>eeeee</td>
     <td>43</td>
     <td>北京</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>fffff</td>
     <td>26</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>gggggg</td>
     <td>19</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>hhhhhh</td>
     <td>43</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
    <tr>
     <td>iiiiii</td>
     <td>32</td>
     <td>上海</td>
     <td>13088888888</td>
    </tr>
   </table>
</body>
</html>

未完，待续。。。