使用Jquery进行项目开发讲解

使用Jquery进行项目开发讲解,指导老师:罗廷高,讲解人:雷力,项目讲解流程,jQuery简介,项目演示,源码讲解,项目总结,一.jQuery简介,1.1Jquery简介,Jquery是一个优秀的Javascrpt框架。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。说白了，jQuery就是一个核心JS文件，如果实现一些其他的基本效果之外的效果，那就需要更多的JS文件，一般我们都称作为叫做Jquery插件。下载的插件分为压缩版和未压缩版，未压缩的有换行空格退格等，可读性比较好，但文件比较大，适合程序员阅读，压缩版的去掉了多余的空行回车退格空格，语法也进行了压缩，文件比较小，适合于直接使用。要了解更多的关于jQuery的信息，可以到W3C看看，地址为：,1.2Jquery基本功能,获得页面的元素对象：例如获得body对象$(“body”)，table对象$(“table”)。修改页面的外观：例如改变单元格的背景$(“td”).css(“backgroundColor”:”red”);改变页面的内容：例如在表格或段落中插入文本，修改文本等。$(“p”).html(“这是一个示例”);响应用户的操作：事件处理，例如单击，鼠标移进移出等。$(“#id”).click(function()代码);为页面增加动态效果：例如飞来飞去，淡入淡出等。$(“.class”).fadeToggle();无需刷新页面从服务器获得信息：这其实就是使用AJAX使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。简化常见的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项目开发让我学到了更多的知识，积累了更多的经验。这次项目是老师布置的项