Jquery简介及简单应用

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

1.Jquery可以检索javascript代码

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

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

等等

实用Jquery之前,要到官网上下载类库http://jquery.com/,本文中的下载地址:https://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标签.. 

posted @ 2011-05-05 16:40  双魂人生  阅读(409)  评论(0编辑  收藏  举报