JQ入门-绑定和解绑元素

时间: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>

源码下载

index.zip


返回

上一篇:技术宅推荐电影,影片(合集)下一篇:PHP开启伪静态(AppServ服务器)

我要评论

    loading
 

关闭

loading

回顶部