2013-11-17
一.首先我们要了解jQuery与JavaScript的区别:
*JavaSipt是为了适应动态网页制作的需要而诞生的一种编辑语音.他是由Netscape公司开发的一种脚本语音(scripting language).
*JQuery是继Prototype之后有一个优势的JavaScript库,他由John Resig创建于2006年1月.他简化了遍历HTML文档.操作DOM.处理事件.执行动画和Ajax的操作.他独特而优雅的代码风格改变了JavaScript程序员的设计方式和思维.
二.jQuery的优势
1.轻量级:
jQuery非常轻巧,采用Dean Edwards 的Packer压缩后,只有不到30kb的大小,如果服务器端启用gzip压缩后,甚至只有16kb的大小!
2.强大的选择器:
jQuery可以让操作者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.
3.出色的DOM操作的封装
jQuery封装了大量常用DOM操作,使用编写DOM操作相关程序员的时候能够得以应手,优雅的完成各种原版非常复杂的操作,让JavaScript新手也能写出出色的程序.
4.可靠的事件处理机制
jQuery的事件处理机制吸取了JavaScript专家Dean Edwards 编写的事件处理函数的精华,使得jQuery处理事件绑定的时候相当的可靠.
5.完善的Ajax
jQuery将所有的Ajax操作封装一个函数$.ajax里,使用我们处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题.
6.不污染顶级变量
jQuery只建立一个名为jQuery的对象,其所有的方法都在这个对象之下.
7.出色的浏览器兼容性
作为一个流行的JavaScript库,浏览器的兼容性自然是必须具备的条件之一.
8.链接操作方式
jQuery中最有特色的莫过于它的链接操作方式--即对发生在同一个jQuery对象的一组动作,可直接连写而无需重复获取对象.
9.行为层与结构层的分离
开发者不需要再去HTML调用事件,而是直接使用jQuery选择器选中元素,然后直接给元素添加事件.
10.丰富的插件支持
任何事物的壮大,如果没有很多人的支持,是永久发展不起来.jQuery的易扩展性,吸引了来自全球的开发者来共同编写jQuery的扩展插件.
11.完善的文档
jQuery的文档是非常丰富的,现阶段多为英文文档,而中文文档较少.当然,有很多热爱jQuery的团队都在为这个努力,比如图灵教育翻译的<Learning jQuery>
三.jQuery的入门与使用
1.为了使用jQuery,我们可以从jQuery的官方网(http://www.jQuery,com)的网站获取jQuery最新版本.
2.怎么使用jQuery
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4-vsdoc.js"></script>
<script type="text/javascript">
function agree(){
var chk=document.getElementById("chk");
if(chk.checked)
{
alert("谢谢注册！");
}
}
$(function(){
var $chk=$("#chk");
$chk.click(function(){
if($chk.is(":checked"))
{
alert("谢谢注册！");
}
});
});
</script>
</head>
<body onclick="agree();">
<input type="checkbox" id="chk" /><label for="chk">我已经阅读并接受上面的许可</label>
</body>
</html>
3.jQuery代码风格
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.4.4-vsdoc.js"></script>
<script type="text/javascript">
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight").children("li").show().end().siblings().removeClass("highlight").children("li").hide();
});
});
</script>
<style type="text/css">
#menu{
300px;
}
.has_children{
background: #69c;
color:#fff;
cursor: pointer;
}
.highlight{
color: #fff;
background: green;
}
ul{
list-style: none;
padding: 0;
}
ul li{
background: #888;
display: none;
}
</style>
</head>
<body>
<div id="menu">
<ul class="has_children">中国
<li>上海</li>
<li>北京</li>
<li>天津</li>
<li>重庆</li>
</ul>
<ul class="has_children">美国
<li>纽约</li>
<li>华盛顿</li>
<li>拉斯维加斯</li>
</ul>
<ul class="has_children">日本
<li>东京</li>
<li>名古屋</li>
<li>仙台</li>
</ul>
</div>
</body>
</html>
四.jQuery对象和DOM对象