JQ入门-绑定和解绑元素
时间：2014-02-10 发布人：SHX 浏览次数：2625 评论：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服务器）
