网页设计之Jquery网页设计论文.docx
《网页设计之Jquery网页设计论文.docx》由会员分享，可在线阅读，更多相关《网页设计之Jquery网页设计论文.docx（12页珍藏版）》请在冰豆网上搜索。
网页设计之Jquery网页设计论文
网页设计之Javascript中的Jquery技术
摘要：
随着网页技术的日益发展，各类新技术推陈出新，极大地丰富了网页的表现形式，使网页从单一的HTML技术发展到HTML+CSS+JAVASCRIPT多种技术结合的形式。
其中新兴的Jquery技术是一个优秀的Javascrīpt框架。
它是轻量级的js库（压缩后只有21k），它兼容CSS3，还兼容各种浏览器。
同时帮助程序员轻松建立有高度互动的“web2.0”特性的富客户端页面。
关键词：
网页设计，Javascript，jQuery,CSS
1.网页技术简介1
1.1HTML含义2
1.2CSS含义2
1.3Javascrip含义2
2．Javascript之jQuery技术.3
2.1Javascript中的jQuery3
2.2jQuery特点3
2.3jQuery核心方法6
3．jQuery的具体技术9
3.1jQuery的插件开发9
3.2使Ajax变得简单技术10
3.3为HTML添加动画技术12
3.4DOM脚本和事件处理技术13
3.5释放jQuery选择器的强大能量13
4.基于jQuery几类插件的应用15
4.1jQueryui15
4.2jQueryjson16
4.3jQueryselect17
5.参考资料20
1.网页技术简介
1.1HTML含义
HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
1.2CSS含义
CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。
页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。
将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
1.3Javascript含义
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。
同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。
它最初由网景公司的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类。
JavaScript是Sun公司的注册商标。
Ecma国际以JavaScript为基础制定了ECMAScript标准。
JavaScript也可以用于其他场合，如服务器端编程。
完整的JavaScript实现包含三个部分：
ECMAScript，文档对象模型，字节顺序记号。
2.Javascript之jQuery技术
2.1Javascript中的jQuery技术
jQuery由美国人JohnResig创建，至今已吸引了来自世界各地的众多Javascript高手加入其team，包括来自德国的JörnZaefferer，罗马利亚的StefanPetre等等。
jQuery是继prototype之后又一个优秀的Javascrīpt框架。
其宗旨是——WRITELESS,DOMORE,写更少的代码,做更多的事情。
2.2jQuery技术的特点
I．轻量级
经GZip压缩后传输的代码文件仅14KB，未经压缩传送的代码文件仅26KB。
jQuery1.26版时：
档案
档案行数
档案Size
备注
jquery-1.2.6.pack.js
11
31KB
使用Notepad++4.92版开启时，易导致Notepad++程式当掉。
jquery-1.2.6.min.js
32
55KB
jquery-1.2.6.js
3550
98KB
II．链式语法
Varobj=$（"#id1"）.parent（）.parent（）.parent（）.attr（"name"）;//获取id=id1的元素的三层父节点的name属性
Varobj=$（"#div1"）.find（"tabletd"）.find（"a"）.attr（"href"）;//在id=div1的元素下查找table的所有td，然后在第一个td中找到第一个a，然后获取href属性
III．CSS1-3选择器
可以轻松设置，删除，读取css属性
Varobj=$（"p"）.css（"color"）;//取得第一个段落的color样式属性的值。
Varobj=$（"p"）.addClass（"css1"）;//取得第一个段落为并追加class属性
Varobj=$（"p"）.removeClass（"css1"）;//取得第一个段落为删除class属性
$（"#div1"）.css（"overflow-y","scroll"）;//为div1设置上下滚动条
//$（"#div1"）.css（"overflow-x","scroll"）;//为div1设置左右滚动条
$（"p"）.css（{color:
"#ff0011",background:
"blue"}）;//取得第一个段落并设置颜色和背景。
IV．跨浏览器
支持InternetExplorer6+、Opera9+、Firefox1.5+、Safari2+
V．Dom选择
可以轻松获取任意dom元素或dom元素封装后的jquery对象。
Varobj=$（"#table1"）;//取得ID=table1的dom对象，并返回包装的jquery对象。
Varobj=$（"#table1a.class1"）;//取得ID=table1的元素中的class=class1的所有A标签，并返回包装的jquery对象。
Varobj=$（"input[name='name1']"）;//取得name=name1的所有的input，并返回包装的jquery对象。
VI．Ajax支持
$.ajax（{
type:
"POST",//提交方式post或者get
url:
"test.do",//访问的地址
data:
"name=a&code=b",//访问的参数
cache:
false,//是否缓存,
timeout:
1000,//超时时间
global:
false,//禁用全局Ajax事件【只有当我们对ajax实现事件绑定时才有必要用】
success:
function（html）{//成功回调函数
//dosomething},
beforeSend:
function（）{//提交前执行
//dosomething},
complete:
function（）{//提交完成后执行，先用success
//dosomething},
error:
function（XMLHttpRequest,textStatus）{//失败后执行
//dosomething}
}）;
VII．事件注册
可以对任意一个或多个对象注册事件，让画面和事件分离。
给id=btn1的元素注册click事件
$（"#btn1"）.click（function（）{
//dosomething}）;
给class=class1的所有元素注册mouseover事件
$（".class1"）.mouseover（function（）{
//dosomething}）;
给多个元素注册事件，如：
给id=listTable元素下的所有class=toLink的td注册点击事件
$（"#listTabletd.toLink"）.click（function（）{
//dosomething}）;
2.3jQuery的核心方法
I．jQuery对象访问
each（callback）
注释：
each是jQuery中的一种循环机制。
一般与this关键字配合使用。
程序中的循环方式有do…while（）、while（）、for循环以及C#和javaEE中JSTL标签中独有的forEach循环。
jQuery中的each循环与forEach循环类似。
具体使用方法在本节案例中讲述。
$（"Element"）.length;
注释：
表示某个对象在HTML页面中的数量，与size用法一致，此方法不带有（）。
$（"Element"）.size（）;
注释：
表示某个对象在HTML页面中的数量，与length用法一致。
$（"Element"）.get（）;
注释：
表示获得某个元素在HTML页面中的集合，以数组方式构建。
$（"Element"）.get（）.reverse（）;
注释：
表示将获取到得dom元素集合构建成的数组进行反向。
$（"Element"）.index（$（"Element"））;
注释：
搜索index中所获得的元素在所匹配对象元素中的索引值（从0开始计数），若没有找到则返回-1。
比如有5个div，其中第4个标签的ID是#bar那么$（"div"）.index（$（"#bar"））所返回的索引值就是3。
II.jQuery插件机制
$.extend
（{ max:
function（num1,num2）{returnnum1>num2?
num1:
num2;}
min:
function（num1,num2）{returnnum1num1:
num2;}
}）
$.fn.extend
（{ check:
function（）
{returnthis.each（function（）{this.checked=true;}）;}
uncheck:
function（）
{returnthis.each（function（）{this.checked=false;}）;}
}）
注释：
此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比如$（"#abc"）.click（function（）{this}）这里的this指的就是#abc这个dom对象。
each在上面已经讲解过了。
在此插件方法extend中定义了两个方法分别是check和uncheck。
$（"input[@type=radio]"）.uncheck（）;
注释：
表示将input标签的type属性设置为未选中，其中，中括号中的内容表示如果input的type属性是radio的话，再设置为未选中。
III.多库共存
在同一个页面内调用多种js库，比如即使用jQuery类库又使用ProToType类库，按理说没有问题，但是他们都用到了“$”符号，因此为了避免与其他库产生冲突，可以使用以下两种方法将其区别开来。
jQuery.noConflict（）;
注释：
使用方法，varj=noConflict（）;表示j在jQuery中将代替"$"符号。
jQuery.noConflict（true）;
注释：
使用方法，dom.query=jQuery.noConflict（true）则表示将$和jQuery的控制权都交还给原来的库。
比如你想要将jQuery嵌入一个高度冲突的环境。
3.jQuery的具体技术
3.1jQuery的插件开发
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。
jQuery的全局函数就是属于jQuery命名空间的函数。
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。
典型的例子就是$.AJAX（）这个函数，将函数定义于jQuery的命名空间中。
方法：
jQuery.extend（object）;
另一种是对象级别的插件开发，即给jQuery对象添加方法。
方法：
jQuery.fn.extend（object）;
3.2使Ajax变得简单的技术
使用jQuery将使Ajax变得及其简单。
jQuery提供有一些函数，可以使简单的工作变得更加简单，复杂的工作变得不再复杂。
Ajax最常见的用法就是把一块HTML代码加载到页面的某个区域中去。
为此，只需简单地选择所需的元素，然后使用load（）函数即可。
清单1.使用Ajax向页面发送数据
$.post（'save.cgi',{
text:
'mystring',
number:
23},
function（）{
alert（'Yourdatahasbeensaved.'）;}）;
需要编写一些复杂的Ajax脚本，那么需要用到$.ajax（）函数。
那么可以指定xml、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（'ErrorloadingXMLocument'）;},
success:
function（xml）{
//dosomethingwithxml}
}）;
当success回调函数返回XML文档后，可以使用jQuery检索这个XML文档，其方式与检索HTML文档是一样的。
这样使得处理XML文档变得相当地容易，并且把内容和数据集成到了您的Web站点里面。
清单3.使用jQuery处理XML文档
success:
function（xml）{
$（xml）.find（'item'）.each（function（）{
varitem_text=$（this）.text（）;
$（'
'）
.html（item_text）
.appendTo（'ol'）;
}）;
}
3.3为HTML添加动画技术
可以使用jQuery处理基本的动画和显示效果。
animate（）函数是动画代码的核心，它用于更改任何随时间变化的数值型的CSS样式值。
比方说，您可以变化高度、宽度、不透明度和位置。
还可以指定动画的速度，定为毫秒或者预定义的速度：
慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。
请注意，这些参数没有开始值，只有最终值。
开始值取自元素的当前尺寸。
同时我也附加了一个回调函数。
$（'#grow'）.animate（{height:
500,width:
500},"slow",function（）{
alert（'Theelementisdonegrowing!
'）;
}）;
jQuery的内置函数使更多常见的动画更容易完成。
可以使用show（）和hide（）元素，立即显示或者以特定的速度显示。
还可以通过使用fadeIn（）和fadeOut（），或者slideDown（）和slideUp（）显示和隐藏元素，这取决于您所需要的显示效果。
下面的示例定义了一个下滑的导航菜单。
$（‘#nav’）.slideDown（‘slow’）;
3.4DOM脚本和事件处理技术
jQuery最擅长的就是简化DOM脚本和事件处理。
遍历和处理DOM非常简单，同时附加、移除和调用事件也十分容易，且不像手动操作那样容易出错。
从本质上说，jQuery可以使DOM脚本中的常用操作变得更加容易。
您可以创建元素并且使用append（）函数把它们与其它的一些元素链接到一起，使用clone（）复制元素，使用html（）设置内容，使用empty（）函数删除内容，使用remove（）函数删除所有的元素，即便是使用wrap（）函数，用其他元素将这些元素包装起来。
通过遍历DOM，一些函数可以用于更改jQuery对象本身的内容。
可以获得元素所有的siblings（）、parents（）和children（）。
还可以选择next（）和prev（）兄弟元素。
find（）函数或许是功能最强大的函数，它允许使用jQuery选择器搜索jQuery对象中元素的后代元素。
如果结合使用end（）函数，那么这些函数将变得更加强大。
这个函数的功能类似于undo函数，用于返回到调用find（）或parents（）函数（或者其它遍历函数）之前的jQuery对象。
3.5释放jQuery选择器的强大能量
jQuery的选择器语法主要是基于CSS3和XPath的。
对CSS3和XPath了解的越多，使用jQuery时就越加得心应手。
有关jQuery选择器的完整列表，包括CSS和XPath。
我们仍然可以在jQuery中使用CSS3选择元素，因为jQuery具备自己的自定义选择器引擎。
比方说，要在表格中的每一个空列中都添加一个横杠，可以使用：
:
empty伪选择器（pseudo-selector）：
$（'td:
empty'）.html（'-'）;
如果需要找出所有不含特定类的元素呢？
CSS3同样提供了一个语法可以完成这个目的，使用:
not伪选择器：
如下代码显示了如何隐藏所有不含required类的输入内容：
$（'input:
not（.required）'）.hide（）;
与在CSS中一样，可以使用逗号将多个选择器连接成一个。
下面是一个同时隐藏页面上所有类型列表的简单示例：
$（'ul,ol,dl'）.hide（）;
XPath是一种功能强大的语法，用于在文档中搜寻元素。
它与CSS稍有区别，不过它能实现的功能略多于CSS。
要在所有复选框的父元素中添加一个边框，可以使用XPath的/..语法：
$（"input:
checkbox/.."）.css（'border','1pxsolid#777'）;
jQuery中也加入了一些CSS和XPath中没有的选择器。
比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名——也可以称作把表
分段（striping）。
使用jQuery不费吹灰之力就可以做到这点，这需要归功于odd伪选择器。
下面这个例子使用striped类改变了表格中所有奇数行的背景颜色：
$（'table.striped>tr:
odd'）.css（'background','#999999'）;
我们可以看到强大的jQuery选择器是如何简化代码的。
不论想处理什么样的元素，不管这个元素是具体的还是模糊的，都有可能找到一种方法使用一个jQuery选择器对它们进行定义。
4.基于jQuery几类插件的应用
4.1jQueryui
jQueryUI是以jQuery为基础的开源JavaScript网页用户界面代码库。
包含底层用户交互、动画、特效和可更换主题的可视控件。
可以直接用它来构建具有很好交互性的web应用程序。
jQueryUI应用方向：
（1）jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等。
（2）jQueryUI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等。
（3）jQuery本身注重于后台，没有漂亮的界面，而jQueryUI则补充了前者的不足，他提供了华丽的展示界面，使人更容易接受。
既有强大的后台，又有华丽的前台。
4.2jQueryjson
jquery的json插件,json（javascriptobjectnotation）是一种轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成。
json插件提供了一种名为json的ResultType，一旦为某个Action指定了一个类型为json的Result，则该Result无需映射到任何视图资源。
因为JSON插件会负责将Action里的状态信息序列化成JSON格式的数据，并将该数据返回给客户端页面的JavaScript 。
json插件应用的代码：
1.添加HTML：
$（'#dictionary'）.load（'a.html'）
2.处理JSON数据：
$.getJSON（）
JSON数据为：
[{"term":
"BACCHUS","part":
"n.",
"definition":
"Aconvenientdeityinventedbytheancientsasanexcuseforgettingdrunk.","quote":
["Ispublicworship,then,asin,","ThatfordevotionspaidtoBacchus","Thelictorsdaretorunusin,","Andresolutelythumpandwhackus?
"],
"author":
"Jorace"},
{"term":
"BACKBITE","part":
"v.t.",
"definition":
"Tospeakofamanasyoufindhimwhenhecan'tfindyou."},
{"term":
"BEARD","part":
"n.",
"definition":
"ThehairthatiscommonlycutoffbythosewhojustlyexecratetheabsurdChinesecustomofshavingthehead."}]
3.执行脚本：
$.getScript（）
4.处理xml数据：
$.get（'d.xml',function（data）{$（data）
升级会员 