JQuery技术在网页设计中的应用

孙桂萍

摘要：随着网页技术的成熟，各类技术层出不同，网页的表现形式也越来越丰富，从最基础单一的HTML，演变到今天的HTML+CSS+ JavaScript，由最基础的页面拼接发展到如今各式各样的网页动画效果，网页的交互性也大大提高，这其中离不开JQuery的功劳。

关键词：网站建设；HTML；CSS；JQuery

网站前端开发技术主要包括三个要素：HTML、CSS和JavaScript。JQuery是一个快速、简洁、优秀的JavaScript框架。它的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。核心特征可以总结为：具有独特链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展。

1 Jquery技术特点

使用JQuery的第一步，往往就是将一个选择表达式，放进构造函数JQuery（）（简写为$），然后得到被选中的元素。选择表达式可以是CSS选择器， 也可以是JQuery特有的表达式， 如果选中多个元素，JQuery提供过滤器，可以缩小结果集，有时候，我们需要从结果集出发，移动到附近的相关元素，JQuery也提供了在DOM树上的移动方法：

选中网页元素后，就可以对它进行某种操作。JQuery允许所有操作链接在一起，以链条的形式写出来，操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。

JQuery使用同一个函数，来完成取值和赋值。到底是取值还是赋值，由函数的参数决定。取出或设置值时需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.Text（）除外，它可以取出所有元素的text内容）。

JQuery可以对网页元素绑定事件，根据不同事件，运行相应的函数，熟练应用事件，网站页面会更生动。若想实现更复杂的特效，还可将JQuery与animate动画相结合，制作出更炫酷的动画效果。

2 Jquery具体应用

JQuery是为事件处理特别设计的。事件处理程序是当HTML中发生某些事件时所调用的方法。常用的JQuery有鼠标悬浮、点击、移入移出等，JQuery还可与各类插件搭配使用，以达到预期的网页效果。

：hover选择器用于选择鼠标指针浮动在上面的元素，即鼠标悬浮事件。在悬浮事件的时候我们要先分析清楚，悬浮事件有两部分。

：click选择器用于选择鼠标点击的元素，即鼠标点击事件。当点击元素时，会发生click事件，鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次click。click事件只有点击一种状态，不存在鼠标悬停和移走两种。

另外需要注意的是关于鼠标的点击还有一种.onclick（）事件，这是属于Javascript的点击事件，在写法上也与JQuery点击事件不同。

“aa”就是onclick的事件。onclick執行的效果跟click大致相同只是写法和语言上略有区别，但是能达到同样的目的，都能完成鼠标的点击事件。

在网页制作中还会出现很多鼠标经过或点击时同一个元素下的子元素中切换的图片不同的情况，JQuery中有eq（）和index（）两种方式用来确定li的位置，它们相似但又大不相同。

：eq（）选择器选取带有指定index值的元素，index值是从0开始，所以第一个元素的index值是0不是1。eq（）一般与其他元素或选择器一起使用，来选择指定的组中特定序号的元素。index（）方法返回指定元素相对于其他指定元素的index位置，这些元素可通过JQuery选择器或DOM元素来指定。需要注意的是，如果未找到元素，index（）将返回-1。

综上，这两种方式都可以找到某个元素在上一级中的位置，只是使用情况不同，页面中使用时还是要根据模块的功能进行选择。

JQuery是一个强大且优秀的js库，它可以支持多种事件和选择器，且普及度高、兼容性好、上手速度快，便于我们理解和使用。初期我们可以只掌握上面一些常用的事件方法，然后再一步一步去探索那些未知的神秘的JQuery。相信JQuery给我们带来的只有更多的惊喜。

参考文献：

[1]单东林，张晓菲，魏然.锋利的JQuery（第二版）.北京：人民邮电出版社，2012，300-306

[2]汤东，张富银.JQuery入门实战.北京：西南财经大学出版社，2015，2-3

[3]朱育发，JQuery与JQuery Mobile开发完全技术宝典.北京：中国铁道出版社，2014，1

[4]奥特罗，劳伦斯.JQuery高级编程.北京：清华大学出版社，2013，4

[5]高云，JQuery技术内幕.北京：机械工业出版社，2014，2-3endprint