template design by http://www.20shx.com/
时间:2014-02-10 发布人:SHX 浏览次数:2632 评论:0
(1)创建HTML代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Binding Elements</title> <style> ul{ background-color:#999; list-style:none; margin:0pt; padding:0pt; width:250px; } li{ cursor:pointer; margin:10px 0px;} </style> </head> <body> <ul> <li>India</li> <li>USA</li> <li>UK</li> <li>France</li> </ul> <select> <option value="Africa">Africa</option> <option value="Antarctica">Antarctica</option> <option value="Asia">Asia</option> <option value="Australia">Australia</option> <option value="Europe">Europe</option> <option value="North">North</option> <option value="South">South</option> </select> <input type="button" value="Unbind select box" /> </body> </html>
(2)现在通过jQuery来施加一点魔法。使用.bind()方法向列表项附加一个click事件处理函数,该处理函数会将被单击项的背景颜色设置为红色。向选择框附加change事件处理函数,该函数将显示所选择项的值。最后,向按钮添加一个click处理函数。如果单击按钮,将从选择框删除事件处理函数。
<script type="text/javascript" src="jquery.js"></script> //网上可以搜索下载此文件 <script type="text/javascript"> $(document).ready(function(e) { $('input:text').bind( { focus: function() { $(this).val(''); }, blur: function() { $(this).val('Enter some text'); } }); $('li').bind('click',function() { $(this).css({'background-color':'red'}); }); $('select').bind('change',function() { alert('You selected:'+$(this).val()); }); $('input:button').bind('click',function() { $('select').unbind('change'); }); }); </script>
源码下载
上一篇:技术宅推荐电影,影片(合集)下一篇:PHP开启伪静态(AppServ服务器)