正文

体验JQuery的万能selectors2008-06-15 18:26:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/goalbell/36143.html

分享到:

  用JQuery这个强大而优秀的javascript库做了一个简单的反馈表单,因为这几天都在看JQuery的有关资料,所以接下来的几日,我为陆续介绍下JQuery的有关特性。我都是刚刚开始学的,开始看<<JQuery Reference Guide>>和JQuery官方上的有关文档资料,都是配合起来看效果好很多。看了一下,体验一下JQuery的Selectors特性。 Cure  Code:          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head>  <meta http-equiv="Content-Type" content="text/html; charset=GB2312">  <title>Simple form</title>  <script language="JavaScript"  src="lib/jquery/jquery.js"></script>     <script language="JavaScript">         $(document).ready(function(){    $('span#title').css("border","3px solid #FF0000");    $('p>span').css("border-bottom","1px dotted #000000");    $('dt>label').css("float","left");    $('dd>input').css("margin-bottom","5px");    $('input').css("border","1px solid #333333");    $('textarea').css("border","1px solid #333333");    $('fieldset legend').css("font-size","12px");    $('fieldset legend').css("color","blue");    $("dl dd:nth-child(even)").append("<span>*</span>").css("color","red");       });      </script>  </head> <body>  <div id="container">         <span id="title">感谢你访问我们的网站!</span>     <fieldset>      <legend>请填写以下表单:</legend>   <dl>      <dt><label>你的姓名:</label></dt>   <dd><input type="text" id="name" /></dd>   <dt><label>Your company name:</label></dt>   <dd><input type="text" id="coname" /></dd>   <dt><label>Your email:</label></dt>   <dd><input type="text" id="email" /></dd>   <dt><label>Your address:</label></dt>   <dd><input type="text" id="addr" /></dd>   <dt><label>Your tel:</label></dt>   <dd><input type="text" id="tel" /></dd>   <dt><label>Your fax:</label></dt>   <dd><input type="text" id="fax" /></dd>   <dt><label>Inquiry content:</label></dt>   <dd><textarea id="content" cols="30" rows="6"></textarea></dd>    <dd><button id="submit" value="Send">Send</button></dd>     </dl>      </fieldset>    </div>  </body></html> Summary:在接下来的有关文章,我会逐一介绍有关selectors强大的功能。

阅读(1873) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册