使用Jquery进行项目开发讲解

项目讲解流程jQuery简介项目演示源码讲解项目总结一.jQuery简介1.1Jquery简介Jquery是一个优秀的Javascrīpt框架。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。说白了，jQuery就是一个核心JS文件，如果实现一些其他的基本效果之外的效果，那就需要更多的JS文件，一般我们都称作为叫做Jquery插件。下载的插件分为压缩版和未压缩版，未压缩的有换行空格退格等，可读性比较好，但文件比较大，适合程序员阅读，压缩版的去掉了多余的空行回车退格空格，语法也进行了压缩，文件比较小，适合于直接使用。要了解更多的关于jQuery的信息，可以到W3C看看，地址为：基本功能1.获得页面的元素对象：例如获得body对象$(“body”)，table对象$(“table”)。2.修改页面的外观：例如改变单元格的背景$(“td”).css({“backgroundColor”:”red”});3.改变页面的内容：例如在表格或段落中插入文本，修改文本等。$(“p”).html(“这是一个示例”);4.响应用户的操作：事件处理，例如单击，鼠标移进移出等。$(“#id”).click(function(){代码…});4.为页面增加动态效果：例如飞来飞去，淡入淡出等。$(“.class”).fadeToggle();5.无需刷新页面从服务器获得信息：这其实就是使用AJAX使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。6.简化常见的javascript操作二.项目演示三.源码讲解3.1首页面讲解我们可以看到页面由头部Logo，导航条，内容部分组成。分别实现了换肤、导航条、单击隐藏与显示、新闻滚动效果、图片自滚动、鼠标选取滚动、点击切换图片等等…3.1换肤HTML代码:JS代码:3.1导航条HTML代码:JS代码:3.1单击隐藏与显示HTML代码:JS代码:3.1新闻滚动效果HTML代码:JS代码:3.1图片自滚动HTML代码:JS代码:3.1鼠标选取滚动HTML代码:JS代码:3.1点击切换图片HTML代码:部分:JS代码:3.1插入放大镜JS代码:3.2副页面讲解我们同样可以看到副页面由头部Logo，导航条，内容部分组成。分别实现了换肤、导航条、观看清晰图片、切换图片、选项卡切换、选择尺寸、计算总金额、评分等等…3.2观看清晰图片HTML代码:JS代码:3.2切换图片HTML代码:JS代码:3.2选项卡切换HTML代码:JS代码:3.2选择尺寸HTML代码:JS代码:3.2计算总金额HTML代码:JS代码:3.2评分HTML代码:JS代码:CSS代码:四.项目总结4.项目总结独立完成WEB前段开发是一项乐在其中的事情，是对审美能力，美术设计功底的一种考验。这次jQuery项目开发让我学到了更多的知识，积累了更多的经验。这次项目是老师布置的项目，没有能够加入额外的效果，但是完成了每一个要求的效果。希望下次项目能够有更多自己加进去的效果，有更多自己的理解，自己的思路和需要。谢谢SEC8.0