java 从零开始,学习笔记之基础入门<Jquery>(四十三)
Jquery
第一个Jquery程序
点击段落消失或出现DIV
jquery-01.html
jquery-01.html |
||
<!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=utf-8" /> <title>无标题文档</title>
<!--在进行jquery设计的时候,导入提供的js包--> <script language="javascript" src="jquery-1.4.js"></script> <script language="javascript" src="test01.js"></script> </head> <body> <p>如果你打我,我就让div跑</p> <div>我是div层</div>
<span>你再点我,我就让div出来帮忙</span>
<li>你点我,我就把用户名设为:三毛</li>
<form> <table style="background-color:#963; border:solid #990"> <tr class=""> <td label id="la1"> 用户名:</td> <td><input type="text" id="username" name="username"/></td> </tr> <tr> <td label id="la2">密码:</td> <td><input type="password" name="pwd" id="pwd"/></td> </tr> <tr> <td colspan="2" algin="center"><input type="submit" name="sub" value="提交" /></td> </tr> </table> </form>
</body> </html>
|
点击添加多个附件
jquery-02.html
jquery-02.html |
||
<!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=utf-8" /> <title>无标题文档</title> <script language="javascript" src="jquery-1.4.js"></script> <script language="javascript" src="test02.js"></script> </head>
<body> <p>如果你点我,我就笑一个:</p>
<table border="2px;" bgcolor="#888888"> <tr> <td align="right"><input type="button" id="but" value="添加附件"/></td> </tr> <tr> <td><input type="file" name="myfile" id="myfile" value="上传文件"/></td> </tr> </table>
</body> </html>
|
菜单点击或鼠标移动出现下拉框
Index_test.html
Index_test.html |
||||
<html> <head> <link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.4.js"></script> <script type="text/javascript" src="js/menu.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body> <ul> <li class="main"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单11</a></li> <li><a href="#">子菜单12</a></li> <li><a href="#">子菜单13</a></li> </ul> </li> </ul>
<ul> <li class="main"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单14</a></li> <li><a href="#">子菜单15</a></li> <li><a href="#">子菜单16</a></li> </ul> </li> </ul>
<ul> <li class="main"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单17</a></li> <li><a href="#">子菜单18</a></li> <li><a href="#">子菜单19</a></li> </ul> </li> </ul>
<hr> <!--**************************************--> <ul> <li class="hmain"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单11</a></li> <li><a href="#">子菜单12</a></li> <li><a href="#">子菜单13</a></li> </ul> </li> </ul>
<ul> <li class="hmain"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单14</a></li> <li><a href="#">子菜单15</a></li> <li><a href="#">子菜单16</a></li> </ul> </li> </ul>
<ul> <li class="hmain"><a href="#">菜单项</a> <ul> <li><a href="#">子菜单17</a></li> <li><a href="#">子菜单18</a></li> <li><a href="#">子菜单19</a></li> </ul> </li> </ul> </body> </html>
|
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。