Jquery简介及简单应用

Jquery是Javascript轻量级脚本库，并不是javascript的升级版，其好处有：

1.Jquery可以检索javascript代码

2.Jquery可以解决众多浏览器不兼容的问题

3.可以实现很多的UI，很多好看的效果很容易的就能实现

等等

实用Jquery之前，要到官网上下载类库http://jquery.com/，本文中的下载地址:http://files.cnblogs.com/shuang121/jquery-1.6.min.js然后放到项目总，在页面中引用

<script src="js/jquery-1.6.min.js" type="text/javascript"></script>就可以正常使用Jquery了

来看一个例子：

 

View Code

<! 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 >
     < title > 无标题页 </ title >
     < script src = " js/jquery-1.6.min.js "  type = " text/javascript " ></ script >
</ head >
< body >
< div id = " divInfo " > Hello,Word !</ div >
< input id = " btnShow "  type = " button "  value = " 显示 "   />
< input id = " btnHid "  type = " button "  value = " 隐藏 "   />
< input id = " btnChange "  type = " button "  value = " 修改为:hello "   />
< script type = " text/javascript " >
  $( " #btnShow " ).bind( " click " ,function( event ){$( " #divInfo " ).show()});
  $( " #btnHid " ).bind( " click " ,function( event ){$( " #divInfo " ).hide();});
  $( " #btnChange " ).bind( " click " ,function( event ){$( " #divInfo " ).html( " hello " );});
</ script >
</ body >
</ html >

在上面用到了有：

1.Jquery的id选择器：$("#id");相当于document.getElementById("id")

2.事件绑定函数：bind(),通过它可以在页面加载的时候绑定好事件

3.显示和隐藏函数：show()和hide()

4.修改元素内部html函数：html();

要注意的是，如果是这样把html与代码分开，那么必须把Jquery写在应用的标签后面，否则会出现没有响应的情况，那是因为没有找到相关的html标签..