网页设计之Jquery网页设计论文Word文档格式.docx
《网页设计之Jquery网页设计论文Word文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计之Jquery网页设计论文Word文档格式.docx（12页珍藏版）》请在冰豆网上搜索。
它最初由网景公司的BrendanEich设计，是一种动态、弱类型、基于原型的语言，内置支持类。
JavaScript是Sun公司的注册商标。
Ecma国际以JavaScript为基础制定了ECMAScript标准。
JavaScript也可以用于其他场合，如服务器端编程。
完整的JavaScript实现包含三个部分：
ECMAScript，文档对象模型，字节顺序记号。
2.Javascript之jQuery技术
2.1Javascript中的jQuery技术
jQuery由美国人JohnResig创建，至今已吸引了来自世界各地的众多Javascript高手加入其team，包括来自德国的J&
ouml;
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属性
#div1"
）.find（"
tabletd"
a"
）.attr（"
href"
//在id=div1的元素下查找table的所有td，然后在第一个td中找到第一个a，然后获取href属性
III．CSS1-3选择器
可以轻松设置，删除，读取css属性
p"
）.css（"
color"
//取得第一个段落的color样式属性的值。
）.addClass（"
css1"
//取得第一个段落为并追加class属性
）.removeClass（"
//取得第一个段落为删除class属性
$（"
overflow-y"
"
scroll"
//为div1设置上下滚动条
//$（"
overflow-x"
//为div1设置左右滚动条
）.css（{color:
"
#ff0011"
background:
blue"
}）;
//取得第一个段落并设置颜色和背景。
IV．跨浏览器
支持InternetExplorer6+、Opera9+、Firefox1.5+、Safari2+
V．Dom选择
可以轻松获取任意dom元素或dom元素封装后的jquery对象。
Varobj=$（"
#table1"
//取得ID=table1的dom对象，并返回包装的jquery对象。
#table1a.class1"
//取得ID=table1的元素中的class=class1的所有A标签，并返回包装的jquery对象。
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"
2.3jQuery的核心方法
I．jQuery对象访问
each（callback）
注释：
each是jQuery中的一种循环机制。
一般与this关键字配合使用。
程序中的循环方式有do…while（）、while（）、for循环以及C#和javaEE中JSTL标签中独有的forEach循环。
jQuery中的each循环与forEach循环类似。
具体使用方法在本节案例中讲述。
Element"
）.length;
表示某个对象在HTML页面中的数量，与size用法一致，此方法不带有（）。
）.size（）;
表示某个对象在HTML页面中的数量，与length用法一致。
）.get（）;
表示获得某个元素在HTML页面中的集合，以数组方式构建。
）.get（）.reverse（）;
表示将获取到得dom元素集合构建成的数组进行反向。
）.index（$（"
））;
搜索index中所获得的元素在所匹配对象元素中的索引值（从0开始计数），若没有找到则返回-1。
比如有5个div，其中第4个标签的ID是#bar那么$（"
div"
#bar"
））所返回的索引值就是3。
II.jQuery插件机制
$.extend
（{
max:
function（num1,num2）{returnnum1>
num2?
num1:
num2;
}
min:
function（num1,num2）{returnnum1<
num2?
}）
$.fn.extend
check:
function（）
{returnthis.each（function（）{this.checked=true;
uncheck:
{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（{
document.xml'
GET'
dataType:
xml'
1000,
function（）{
ErrorloadingXMLocument'
},
function（xml）{
//dosomethingwithxml}
当success回调函数返回XML文档后，可以使用jQuery检索这个XML文档，其方式与检索HTML文档是一样的。
这样使得处理XML文档变得相当地容易，并且把内容和数据集成到了您的Web站点里面。
清单3.使用jQuery处理XML文档
success:
$（xml）.find（'
item'
）.each（function（）{
varitem_text=$（this）.text（）;
$（'
<
li>
/li>
'
）
.html（item_text）
.appendTo（'
ol'
3.3为HTML添加动画技术
可以使用jQuery处理基本的动画和显示效果。
animate（）函数是动画代码的核心，它用于更改任何随时间变化的数值型的CSS样式值。
比方说，您可以变化高度、宽度、不透明度和位置。
还可以指定动画的速度，定为毫秒或者预定义的速度：
慢速，中速或快速。
下面是一个同时变化某个元素高度和宽度的示例。
请注意，这些参数没有开始值，只有最终值。
开始值取自元素的当前尺寸。
同时我也附加了一个回调函数。
$（'
#grow'
）.animate（{height:
500,width:
500},"
slow"
function（）{
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'
XPath是一种功能强大的语法，用于在文档中搜寻元素。
它与CSS稍有区别，不过它能实现的功能略多于CSS。
要在所有复选框的父元素中添加一个边框，可以使用XPath的/..语法：
checkbox/.."
）.css（'
border'
'
1pxsolid#777'
jQuery中也加入了一些CSS和XPath中没有的选择器。
比方说，要使一个表更具可读性，通常可以在表格的奇数行或偶数行中附加一个不同的类名——也可以称作把表
分段（striping）。
使用jQuery不费吹灰之力就可以做到这点，这需要归功于odd伪选择器。
下面这个例子使用striped类改变了表格中所有奇数行的背景颜色：
table.striped>
tr:
odd'
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"
},
{"
BACKBITE"
v.t."
Tospeakofamanasyoufindhimwhenhecan'
tfindyou."
BEARD"
ThehairthatiscommonlycutoffbythosewhojustlyexecratetheabsurdChinesecustomofshavingthehead."
}]
3.执行脚本：
$.getScript（）
4.处理xml数据：
$.get（'
d.xml'
function（data）{$（data）
升级会员 