网页设计之Jquery网页设计论文

1、网页设计之Javascript中的Jquery技术 摘要：随着网页技术的日益发展，各类新技术推陈出新，极大地丰富了网页的表现形式，使网页从单一的HTML技术发展到HTML+CSS+JAVASCRIPT多种技术结合的形式。其中新兴的Jquery技术是一个优秀的Javascrpt框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器。同时帮助程序员轻松建立有高度互动的“web2.0”特性的富客户端页面。关键词：网页设计，Javascript，jQuery , CSS目录1. 网页技术简介11.1 HTML含义21.2 CSS含义21.3 Javascrip含义22Javas

2、cript之jQuery技术.32.1 Javascript中的jQuery32.2 jQuery特点32.3 jQuery核心方法63jQuery的具体技术93.1 jQuery的插件开发93.2 使Ajax变得简单技术103.3为 HTML 添加动画技术123.4 DOM 脚本和事件处理技术133.5释放 jQuery 选择器的强大能量134.基于jQuery几类插件的应用154.1 jQuery ui154.2 jQuery json164.3 jQuery select175.参考资料201.网页技术简介1.1 HTML含义HTML（Hyper Text Mark-up Languag

3、e）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛 的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。 HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。1.2 CSS含义CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容 与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形

4、式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内 容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。1.3 Javascript含义JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同 时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。它最初由网景公司的Brendan Eich设计，是一种动态、弱类型、基于原型的语言，内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了EC

5、MAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的 JavaScript实现包含三个部分：ECMAScript，文档对象模型，字节顺序记号。 2. Javascript之jQuery技术2.1 Javascript中的jQuery技术 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多Javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马利亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrpt框架。其宗旨是WRITE LESS,DO M

6、ORE,写更少的代码,做更多的事情。2.2 jQuery技术的特点I轻量级经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB。 jQuery 1.26版时：档案档案行数档案Size备注1131KB使用 Notepad+ 4.92版开启时，易导致Notepad+程式当掉。3255KBjquer355098KBII链式语法Var obj = $("#id1").parent().parent().parent().attr("name");/获取id=id1的元素的三层父节点的name属性Var obj = $("#div1

7、").find("table td").find("a").attr("href");/在id=div1的元素下查找table的所有td，然后在第一个td中找到第一个a，然后获取href属性IIICSS1-3选择器可以轻松设置，删除，读取css属性Var obj = $("p").css("color");/取得第一个段落的color样式属性的值。Var obj = $("p").addClass("css1");/取 得第一个段落为并追加cla

8、ss属性Var obj = $("p").removeClass("css1");/取得第一个段落为删除class属性$("#div1").css("overflow-y", "scroll");/为div1设置上下滚动条/$("#div1").css("overflow-x", "scroll");/为div1设置左右滚动条$("p").css( color: "#ff0011", backgr

9、ound: "blue" ); /取得 第一个段落并设置颜色和背景。IV跨浏览器支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+V Dom选 择可以轻松获取任意dom元素或dom元素封装后的jquery对象。 Var obj = $("#table1");/取得ID=table1的dom对象，并返回包装的jquery对象。 Var obj = $("#table1 a.class1");/取得ID=table1的元素中的class=class1的所有A标签，并返回包装的jqu

10、ery对象。 Var obj = $("inputname='name1'");/取 得name=name1的所有的input，并返回包装的jquery对象。VIAjax支持   $.ajax(        type: "POST",/提交方式post或者get        url: "test.do",/访问的地址   

11、60;    data: "name=a&code=b",/访问的参 数        cache: false,/是否缓存,       timeout: 1000,/超时时间       global: false,/禁用全局Ajax事件【只有当我们对ajax实现事件绑定时才有必要用】     &

12、#160;  success: function(html)/成功回调函数           /do something ,beforeSend: function()/提交前执行     / do something,       complete: function()/提交完成后执行，先用success     / do something

13、 ,        error: function(XMLHttpRequest, textStatus)/失败后执行     / do something );VII事件注册可以对任意一个或多个对象注册事件，让画面和事件分离。    给id=btn1的元素注册click事件       $("#btn1").click(function()   

14、           /do something );给class=class1的所有元素注册mouseover事件$(".class1 ").mouseover(function()       /do something);给多个元素注册事件，如：给id= listTable元素下的所有class=toLink的td注册点击事件    $("#listTable td.to

15、Link").click(function()           /do something );2.3 jQuery的核心方法IjQuery对象访问each(callback)注释： each 是jQuery中的一种循环机制。一般与this关键字配合使用。程序中的循环方式有dowhile()、while()、for循环以及C#和javaEE中JSTL标签中独有的 forEach循环。jQuery中的each循环与forEach循环类似。具体使用方法在本节案例中讲述。$("Eleme

16、nt").length;注释：表示某个对象在 HTML页面中的数量，与size用法一致，此方法不带有()。$("Element").size();注释：表示某个对象在HTML页面中的数量，与length用法一致。$("Element").get();注释：表示获得某个元素在HTML页面中的集合，以数组方式构建。$("Element").get().reverse();注释：表示将获取到得dom元素集合构建成的数组进行反向。$("Element").index($("Element");

17、注释：搜索 index中所获得的元素在所匹配对象元素中的索引值（从0开始计数），若没有找到则返回-1。比如有5个div，其中第4个标签的ID是#bar那 么$("div").index($("#bar")所返回的索引值就是3。II. jQuery 插件机制$.extend(     max:function(num1,num2)return num1 > num2 ? num1:num2;       min:function(num1,num2)return num1 <

18、 num2? num1:num2;)$.fn.extend(      check:function()         return this.each(function() this.checked = true; );         uncheck:function()         return this.each(function() this.checked =

19、 false; );) 注释：此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比 如$("#abc").click(function()this)这里的this指的就是#abc这个dom对象。each在上面已经讲解过了。在 此插件方法extend中定义了两个方法分别是check和uncheck。$("inputtype=radio").uncheck();注释：表示将input标签的type属性设置为未选中，其中，中括号中的内容表示如果input的type属性是 radio的话，再设置为未选中。III .多库共存在同一个页面内调

20、用多种js库，比如即使用jQuery类库又使用ProToType类库，按理说没有问题，但是他们都用 到了“$”符号，因此为了避免与其他库产生冲突，可以使用以下两种方法将其区别开来。jQuery.noConflict();注释：使用方法，var j=noConflict();表示j在jQuery中将代替"$"符号。jQuery.noConflict(true);注释：使用方法，dom.query = jQuery.noConflict(true)则表示将$和jQuery的控制权都交还给原来的库。比如你想要将jQuery嵌入一个高度冲突的环境。3. jQuery的具体技术3.1

21、 jQuery的插件开发一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间 的函数。类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型 的例子就是$.AJAX()这个函数，将函数定义于jQuery的 命名空间中。方法：jQuery.extend(object); 另一种是对象级别的插件开发，即给jQuery对象添加方法。方法：jQuery.fn.extend(object);3.2 使 Ajax 变得简单的技术使用 jQuery 将使 Ajax 变得及其简单。jQ

22、uery 提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去。为此，只需简单地选择所需的元素，然后使用 load() 函数即可。清单 1. 使用 Ajax 向页面发送数据$.post('save.cgi', text: 'my string',number: 23, function() alert('Your data has been saved.'););需要编写一些复杂的 Ajax 脚本，那么需要用到 $.ajax() 函数。那么可以指定 xml、

23、script、html 或者 json，jQuery 将自动为回调函数准备合适的结果，这样便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数，向用户提供更多有关 Ajax 体验的反馈。清单 2. $.ajax() 使 Ajax 由复杂变简单 $.ajax( url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function() alert('Error loading XML o

24、cument');, success: function(xml) / do something with xml );当 success 回调函数返回 XML 文档后，可以使用 jQuery 检索这个 XML 文档，其方式与检索 HTML 文档是一样的。这样使得处理 XML 文档变得相当地容易，并且把内容和数据集成到了您的 Web 站点里面。清单 3. 使用 jQuery 处理 XML 文档success: function(xml) $(xml).find('item').each(function() var item_text = $(this).text();

25、 $('<li></li>') .html(item_text) .appendTo('ol'); );3.3 为 HTML 添加动画技术可以使用 jQuery 处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的 CSS 样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。下面是一个同时变化某个元素高度和宽度的示例。请注意，这些参数没有开始值，只有最终值。开始值取自元素的当前尺寸。同时 我也附加了一个回调函数。$(

26、9;#grow').animate( height: 500, width: 500 , "slow", function() alert('The element is done growing!'););jQuery 的内置函数使更多常见的动画更容易完成。可以使用 show() 和 hide() 元素，立即显示或者以特定的速度显示。还可以通过使用 fadeIn() 和 fadeOut()， 或者 slideDown() 和 slideUp() 显示和隐藏元素，这取决于您所需要的显示效果。下面的示例定义了一个下滑的导航菜单。$(#nav).slid

27、eDown(slow);3.4 DOM 脚本和事件处理技术jQuery 最擅长的就是简化 DOM 脚本和事件处理。遍历和处理 DOM 非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。从本质上说，jQuery 可以使 DOM 脚本中的常用操作变得更加容易。您可以创建元素并且使用 append() 函数把它们与其它的一些元素链接到一起，使用 clone() 复制元素，使用 html() 设置内容，使用 empty() 函数删除内容，使用 remove() 函数删除所有的元素，即便是使用 wrap() 函数，用其他元素将这些元素包装起来。通过遍历 DOM，一些函数可以用于更

28、改 jQuery 对象本身的内容。可以获得元素所有的 siblings()、parents() 和 children()。还可以选择 next() 和 prev() 兄弟元素。find() 函数或许是功能最强大的函数，它允许使用 jQuery 选择器搜索 jQuery 对象中元素的后代元素。如果结合使用 end() 函数，那么这些函数将变得更加强大。这个函数的功能类似于 undo 函数，用于返回到调用 find() 或 parents() 函数（或者其它遍历函数）之前的 jQuery 对象。3.5 释放 jQuery 选择器的强大能量jQuery 的选择器语法主要是基于 CSS3 和 XPat

29、h 的。对 CSS3 和 XPath 了解的越多，使用 jQuery 时就越加得心应手。有关 jQuery 选择器的完整列表，包括 CSS 和 XPath。我们仍然可以在 jQuery 中使用 CSS3 选择元素，因为 jQuery 具备自己的自定义选择器引擎。比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：:empty 伪选择器（pseudo-selector）：$('td:empty').html('-');如果需要找出所有不含特定类的元素呢？ CSS3 同样提供了一个语法可以完成这个目的，使用 :not 伪选择器： 如下代码显示了如何隐藏所有不含

30、 required 类的输入内容：$('input:not(.required)').hide();与在 CSS 中一样，可以使用逗号将多个选择器连接成一个。下面是一个同时隐藏页面上所有类型列表的简单示例：$('ul, ol, dl').hide();XPath 是一种功能强大的语法，用于在文档中搜寻元素。它与 CSS 稍有区别，不过它能实现的功能略多于 CSS。要在所有复选框的父元素中添加一个边框，可以使用 XPath 的 /. 语法：$("input:checkbox/.").css('border','1px s

31、olid #777');jQuery 中也加入了一些 CSS 和 XPath 中没有的选择器。比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名 也可以称作把表分段 （striping）。使用 jQuery 不费吹灰之力就可以做到这点，这需要归功于 odd 伪选择器。下面这个例子使用 striped 类改变了表格中所有奇数行的背景颜色：$('table.striped > tr:odd').css('background', '#999999');我们可以看到强大的 jQuery 选择器是如何简化代码的

32、。不论想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个 jQuery选择器对它们进行定义。4. 基于jQuery几类插件的应用4.1 jQuery ui jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。可以直接用它来构建具有很好交互性的web应用程序。jQuery UI应用方向：(1) jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等。 (2) jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。提供了一些常用

33、的界面元素，诸如对话框、拖动行为、改变大小行为等等。 (3) jQuery本身注重于后台，没有漂亮的界面，而jQuery UI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。既有强大的后台，又有华丽的前台。4.2 jQuery jsonjquery的json插件, json(javascript object notation)是一种轻量级的数据交换格式, 易于阅读和编写, 同时也易于机器解析和生成。json插件提供了一种 名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。因为 JSON插件会负

34、责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript 。 json插件应用的代码：1. 添加HTML ：$('#dictionary').load('a.html') 2. 处理JSON数据 ：$.getJSON() JSON数据为： "term": "BACCHUS", "part": "n.", "definition": "A convenient deity invented

35、 by the ancients as an excuse for getting drunk.", "quote": "Is public worship, then, a sin,", "That for devotions paid to Bacchus", "The lictors dare to run us in,", "And resolutely thump and whack us?" , "author": "Jorace"

36、, "term": "BACKBITE", "part": "v.t.", "definition": "To speak of a man as you find him when he can't find you." , "term": "BEARD", "part": "n.", "definition": "The hair that is comm

37、only cut off by those who justly execrate the absurd Chinese custom of shaving the head." 3. 执行脚本： $.getScript() 4. 处理xml数据： $.get('d.xml', function(data) $(data).find('entry').each(function() . ); ); 5. 与服务器交互 ：get(url, data, callback, type) post(url, data, callback, type) 6. 组

38、织数据 ：serialize() $(this).find('input').serialize() 7. AJAX事件 ：ajaxStart( ) ajaxStop( ) ajaxSend( ) ajaxComplete( ) 4.3 jQuery selectjQuery select完全继承了CSS选择器的风格。利用jQuery选择器，可以非常便捷和快速找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。jQuery select的应用：/遍历option和添加、移除optionfunction changeShipMethod(shipping) var len = $("selectname=ISHIPTYPE option").length if(shipping.value != "CA")  $("selectname=ISHIPTYPE option").each(function()&