如何让高职学生快速掌握Jquery技术
中图分类号：TP3 文献标识码：A 文章编号：1009-3044（2018）13-0132-02
JQuery是一个近年来兴起的网页特效程序语言，是基于对象和事件驱动的脚本语言，具有简单性、安全性、动态性和跨平台性的特点【1】。JQuery可以用来给网页增加交互性，是网页设计的核心技术之一，也是学习网页设计的一个重要的模块，jquery是javascript开发的一个类库，里面开发了很多特效功能，可以更简单快捷的实现javascript所实现的网页特效功能，理念“写得少，做得多”【2】，同时可在不同浏览器间实现一致的效果，jQuery 的代码非常规范，执行效率也很高，从而能够生成功能强大、丰富多彩、生动活泼的高质量的网页。
掌握jquery选择器的使用、动画的制作方法，熟悉jquery的调试方法，会使用jquery制作基本网页特效，并会对所学知识技能进行网页与特效的整合，能够根据设计要求独立编写HTML和CSS，使用jquery增强网页特效和交互。能够对已有的一些jquery效果进行修改、创新。
职校学生在校学习时间比本科生的少，因而有效的教学方法更显重要性，在学生掌握一定JQuery知识后，有针对性的对javascript和JQuery两者进行有效比较学习，是更快更有效的让学生掌握JQuery技术的有效方法之一。
1 Jquery与Javascript常用方法比较
学习完Javascript后继续学习jquery，对于学生来说比较容易造成混乱，尤其是很多jquery的选择器和两者的语法写法，下面列出JavaScript与JQuery常用方法比较，让学生学习思路更清晰，更好地学习jquery技术。
]
2 相同效果的JQuery案例和JavaScript案例比较
jQuery非常轻量级，有着出色的浏览器兼容、出色的dom操作、链式操作方式、隐式迭代集合、 行为层与结构的分离、支持扩展、开源等优势【2】，因此应用在页面上能发挥很多很cool或很炫的效果。与之相同效果的JavaScript案例当然也毫不?d色，凭本人多年的教学经验，整理和提炼一些分别用javsscript和jQuery实现相同效果的教学例子比较分析，同样对于学习jQuery技术来说，无疑又是一个非常好的比较学习法。
相同效果的教学例子不少，比如二级菜单制作、表单验证、选项切换、网上购物选择效果等，由于篇幅有限，本文只选取其中一些相对简单实例进行阐述，以起抛砖引玉作用。
下面先看一例收缩与展开效果。
1）有趣的收缩与展开例子
这是一个简单而有趣的收缩与展开例子，首先，跟学生演示实现效果，实现效果解释：预览网页，展示在学生面前的是图1效果。
当鼠标点击上方文字，即是已经过CSS样式修饰的绿色部分文字时，下方的文字会收缩起来，如图2；当再次点击时下方文字则再次展开，如图1。
它是一个由 John Resig 创建于2006年1月的开源项目......设计思路和编写程序的方式。
让学生弄清楚刚才效果演示点击和展开的分别是那部分标签内容，然后分别用javsscript原生代码和jQuery技术实现效果。
最后代码展示：最简单的javsscript原生代码实现效果，代码如下：
使用javsscript原生代码实现效果，需要在源文件h5标签里添加onclick="jsfun（）"；还需要在div标签里添加id="contentId"代码，如下：
最简单的jQuery技术实现效果代码：
$（function（）{
$（"#panel h5.head"）.click（function（）{
$（this）.next（）.toggle（）；}）}）
而使用jQuery技术实现效果则不用添加任何代码，简单快捷，效果明显，如果想效果炫酷，只需要在toggle（）；里添加时间即可，即toggle（2000）；
2）简单的表格隔行变色效果
这个例子使用jQuery技术实现效果则更简单，首先，也跟学生演示实现效果，如图3效果所示。
通过以上比较，让学生学习在比较中学习JQuery，不但学习JQuery，还巩固加深学习javascript，这不单是学习比较的过程，更是一种课程实施与教学实践，是在教师指导下的会成为学生提高兴趣、温故知新、举一反三、和拓展视野的学习过程。
3 结束语
有了上述的方法和相同案例比较，还需要学生多做多练多开动脑筋，同时注重学生的自主学习、提高学生的动手能力，并形成良好的编程习惯，培养学生网站开发的意识和能力。由于篇幅原因，无论是常用方法还是相同案例都只能点到为止，还有更多更好地让学生去挖掘与领悟。
- 上一篇：高职计算机教学现状及措施
- 下一篇：基于PS课程模块化的高职计算机教学研究
