jquery课程设计报告

1、课程设计报告课程设计名称： jquery课程设计 系部名称： 中印计算机软件学院 学生姓名： 李壮壮 班 级： 13级计算机应用技术三班学 号： 1 成 绩： 指导教师： 范伟村 开课时间：2015-2016学年第1学期一、什么是JQUERYjQuery是一个轻量级的跨浏览器的JavaScript库, 该库的重点在于JavaScript和HTML之间的互动. 它是2006年一月, 在BarCamp NYC由John Resig发布的. 目前10,000个最大网站的百分之二十都在使用它, jQuery是当今世界最为流行的JavaScript库.jquery是继prototype之后又一个优秀的j

2、avascript库。它是轻量级的js库 ，它兼容Css3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定

3、义id即可。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使

4、用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思议，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。Microsoft和Nokia已经宣布了计划在他们的平台上捆绑jQuery. Microsof开始在Visual Studio中采纳了jQuery, 用来在ASP.NETAJAX Framework下, 还有ASP.NET MVC Framework中提供jQuery的支持. 而Nokia 将会把它集成到他们自己的Web Run-Time pl

5、atform中.例:/Webalon:非常好的图片滑动效果，图片会随着窗口的缩放而缩放，这种方式很酷http:/Fully I/Fully Illustrated:这个网站导航发光效果很靓，滑块效果也很平滑，精美。/wiki/MetalabMetaLab: 网页界面非常清爽、光滑，带有效果很酷的水平和垂直滚动方式的jQuery滑块./wiki/Carlinhos_Brown Zaum & Brown: 别被这个网站的简单外观迷惑了，缩放浏览器窗口

6、试试，会有惊喜的。 / Authentic Jobs: 一个蹩脚，但非常清爽的网站，使jQuery实现搜索的即时显示效果。二、JQUERY的优点和优势。 优点： ,Query是继prototype之後又一个优秀的Javascrpt框架。其宗旨是WRITE LESS,DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压缩後只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery是一个快速的，简洁的javaScript

7、库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。优势：1. 轻量级2.出色的浏览器兼容3.出色的dom操作4.链式操作方式5.隐式迭代集合（可以对选择对象的集合自动的迭代不需要用for in循环）如$(div:lt(2).css(border-color,red)/*对前两个div增

8、加css*/6.行为层与结构的分离 （如想对dom添加事件，在javascript中添加要声明一次函数，在dom中还要使用一次，jquery只需在jquery部分声明某个元素的某种事件就可以了：$(#myButton).click(function()代码部分)）7.支持扩展8.完善的学习资源9.开源三、Jquery和其他类库的比较。 jQuery是js的一个框架，每一种js框架也可以看成是js的类库，每种类库也可以看成一种框架，都是封装一些功能，方便用户使用。 Mousetrap是一个超简单的处理键盘快捷的类库，压缩只有1,6KB大小，并且不依赖任何的外部类库。你使用的主要就是绑定方法。它会

9、帮助你绑定指定的键盘命令到一个Callback方法中。并且拥有第三个参数来制定监听的事件类型。可以是keypress.keydown或者keyup。任何被空格分隔的KEY会被认为是连续的。如果你连续的输入KEY，最后一个输入的KEY会触发callback。Jwerty于使用的标准api生成更加清晰并且容易使用的格式。所有的jwerty事件都要求jwertycode .jwertycode 可以以字符串或者数组传递，使用字符串可能是最简单的方式来生成组合。这个类库非常小，压缩后1、5Kb，gipped大概3kb。不依赖任何类库。兼容JQUERY。Zepto或者Ender。Keypress是一个输

10、入捕捉类库，拥有一些特殊的特性。非常容易上手和使用，大概9KB，不依赖任何类库。可以开发非常简单或者高级的应用。这个类库针对keyboardjs是一个标准的JS类库，处理键盘输入帮助我们理解按键输入并且生成行为。这个类库支持简单的组合按键并且支持不同locale。针对press和release事件拥有回调函数。Keymaster是一个简单的迷你类库，用来定义和生成web应用中的键盘快捷。不依赖任何类库。和其他类库同时使用不会有任何冲突。Kibo是一个简单的JS类库，用来处理键盘事件。没有任何依赖。Kibo的构建器拥有一个可选选项，一个用来定义事件句柄的HTML元素。Keyimage是一个简单的

11、类库，用来处理键盘绑定。书写这个类库的目的是没有其他类库支持整合所有的特性，并且方便大家书写一个新的类库。这个类库标准化JS键盘码以便支持浏览器兼容。这个利库支持key对象，这些对象是JS对象，用来记录键盘码是否被其他操作修改，使用hot-key()接受类似的对象，并且返回一个合适JQuery hotkey插件或者BIinny VAs short.js类库。四、Css选择符有哪几种。并举例说明如何通过jquery来操作选择符。.CSS选择符包括通配选择符、ID选择符、属性选择符、包含选择符、类选择符等，他们的基本格式为： 通配选择符：$(#ID *) 表示该元素下的所有元素。 ID选择符：$(

12、#ID) 表示获得指定ID的元素。 属性选择符：$(inputtype=text) 表示type属性为text的所有input元素。 包含选择符：$(ul li a) 表示ul元素下所有的li元素里的所有a元素。 类选择符：$(.Class) 表示所有引用Class样式的元素。当然这些选择符是可以配合使用的比如说：$(#ID inputtype=text)，这种写法表示指定ID元素下的type属性为text的所有input元素。在JQuery中有些细微的改动都是非常有趣的，比如$(ul li).addClass(Class)和$(ul li).addClass(Class)，他们显示出来的效果

13、是不同的，第一种是将ul下的所有li元素添加样式，第二种是将ul下的第一个li元素添加样式，具体更多的使用方法可以自行测试。XPath选择符所涵盖的内容不多，他们的基本格式为： $(title) 表示选择所有元素内 属性带有title的元素。 $(title=t) 表示所有属性title值是以t为开头的元素。 $(title$=t) 表示所有属性title值是以t为结尾的元素。 $(title$=t) 表示所有属性title值是包含t的元素。XPath选择符和CSS选择符一样，也可以配合使用，可以多个XPath选择符一起使用，也可以和CSS选择符一起使用，所以想要达到你想要的要求用JQuery

14、方法是有很多种的。自定义选择符是选择以一个冒号(：)开头的一种选择符，说到自定义选择符，那就不说到我们经常用到:gt()、:eq()、:odd、:even，这些是我们最常用到的，比如:odd和:even这两个我们通常用他来做有条纹样式的表格，使用方法相当简单，如 $(#table tr:odd).addClass(odd)和$(#table tr:even).addClass(even)只要简单的使用两行代码就可以制作出我们想要的条纹样式。当然在实际开发中我们一般会使用选择符配合DOM遍历方法来进行操作，如：1$(#table td:contains(Window窗口).parent().fi

15、nd(td:gt(0).addClass(highlight)这句代码表示取得Window窗口单元格，再取得他的父级元素，然后找到该元素中包含的所有编号大于0的单元格。当然有些方法是可以简化的，在这里我只是为了表示JQuery的连缀效果，这种格式也是不推荐的，我本人一般是这样书写的：1$(#table td:contains(Window窗口)2.parent()/获取父级3.find(td)/找到td元素4.not(:contains(Window窗口) /不是window窗口的元素5.addClass(highlight);/添加样式将他们分开，后面标明，以便于增强可读性。下面我提供几个在

16、实际开发最常用的代码：1$(inputtype=text).val();/清空所有文本框2$(#text input:text).val();/清空text元素下所有文本框3/获取选中的所有CheckBox的值4$(input:checkbox:checked).each(function() 5alert($(this).val();6);7$(select option:selected).val()/获取选中的下拉框的值8$(select option:selected).text()/获取选中的下拉框的文本五、事件的传播原理，并举例说明事件委托、移除事件、重新绑定事件、响应键盘事件。事

17、件传播分为两个阶段，一个是Capture(捕获)阶段，另一个是Bubble(冒泡)阶段。下面就分别讲一下这两个阶段。先用一张图来总体表示一下：比如说，我们点击了页面上id为picture的img元素，暂时只关心click事件，那么实际上它是从根元素html依次递归到点击的元素，这里为img元素，当然如果点击到了id为son的div元素，它就会递归到该div元素，这一阶段称为捕获阶段。该阶段中如果有任何祖先元素监听了click事件，那么都会触发该事件。那么，从点击到的img元素开始，依次向祖先元素递归，一直到达顶级祖先元素，这一过程称为冒泡阶段。该阶段中，如果有任何祖先元素监听了click事件，

18、也会触发。我们也可以概括为捕获阶段是从祖先元素(根节点)到达目标元素；冒泡阶段是从目标元素到达祖先元素(根)。明白了这一过程后，我们来看一段代码：12345678910111213141516171819202122232425262728293031$(function () $(*).each(function () var current = this;this.addEventListener(click, function (event) say(捕获 + current.tagName + 元素，id为 + current.id + ，目标元素： + event.target.id

19、);, true);this.addEventListener(click, function (event) say(冒泡 + current.tagName + 元素，id为 + current.id + ，目标元素： + event.target.id);, false););function say(text) $(#show).append( + text + );代码中使用了addEventListener方法为元素注册事件。该方法的第一个参数为事件类型，第二个参数为回调方法，第三个参数为在哪一个阶段捕获事件，若为true则是捕获阶段，若为false则是冒泡阶段。运行结果:如果我们

20、想在冒泡阶段阻止事件向祖先元素传播，我们也可以调用Event实例中的stopPropagation()方法。jQuery事件的绑定和委托可以用多种方法实现，on() 、 bind() 、 live() 、 delegate() ，还有one()。有时我们可能会像下面这样绑定一个事件：代码如下:$(#div1).click(function() alert(点击后触发); );上面的事件绑定，我们可以通过多种方式去实现：1. on()复制代码 代码如下:/无数据参数 $(p).on(click, function() alert( $(this).text() ); ); /有数据参数 func

21、tion myHandler(event) alert(event.data.foo); $(p).on(click, foo: bar, myHandler)与on()对应的是off()，用来移除事件绑定：复制代码 代码如下:var foo = function () / code to handle some kind of event ; / . now foo will be called when paragraphs are clicked . $(body).on(click, p, foo); / . foo will no longer be called. $(body).off(click, p, foo);off()：移除on()进行的绑定one()：只绑定一次。有时候事件执行完了，想取消事件的