Jquery教程
jquery主要用来为页面添加动态特效（这里不讨论这个），开始使用jquery吧
首先要想使用jquery就必须引入query的基础包（215KB）
115下载地址：http://u.115.com/file/clw81fn7
数据银行：http://dl.dbank.com/c0dla9ty0l
Jquery不分语言，html中就可以使用，不需要部署项目，更不需要运行tomcat后才能访问。
现在，开始用jquery编写两个网页特效。
特效一：仿苹果官网菜单
观看地址：http://www.kuaileyuandi.com/study/test.html
步骤：首先创建一个html文件（dreamweaver或myeclipse均可）
1.引入包：把下载下来的jquery包放到你想要的路径下，并添加引用
<script?src="jquery-1.5.2.js"?type="text/javascript"></script>?
也可不下载直接使用网络上的
<script?src="http://www.kuaileyuandi.com/js/jquery-1.5.2.js"?type="text/javascript"></script>?
2.开始画静态界面,静态界面就不多说了
<table?align="center"?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"><td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"></td>
<td?style="margin-bottom: 0pt; margin-top: 0pt; text-align: left; line-height: 10pt;"></tr>
</table>
3.为菜单添加样式
我们要让他可以改变样式就必须先添加样式：
<style>?
td.menuone{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png);
//图片地址可以修改
height:?36px;//设置宽高
width:?102px;
????overflow:?hidden;//设置去除多余部分（只显示图片中指定的部分）
}
td.menumiddle{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png)?-115px?0px?no-repeat;
//图片地址可以修改，?-115px?0px?no-repeat;指定从115px的X坐标0px的Y坐标开始
overflow:?hidden;//去除多余部分
????height:?36px;
????width:?102px;
}
td.menumiddleselectd{
background:url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png)?-115px?-72px?no-repeat;
????height:?36px;//同上
????overflow:?hidden;
????width:?102px;
}
td.menuend{
background:url(http://public.bay.livefilestore.com/y1pkXLKBfE3Iqxf6-oYWWQMDZ7HJtrvCY4mQbZ3_R_KHm0neMTfWsCQogwvHXZLwc_yx_t-uJb9fQO28jUGCDMoqQ/menutext.png)?-10px?0?no-repeat;
????height:?36px;//同上
????overflow:?hidden;
????width:?162px;
}
td.menuendselected{
background:url(http://public.bay.livefilestore.com/y1pkXLKBfE3Iqxf6-oYWWQMDZ7HJtrvCY4mQbZ3_R_KHm0neMTfWsCQogwvHXZLwc_yx_t-uJb9fQO28jUGCDMoqQ/menutext.png)?-10px?-36px?no-repeat;
????height:?36px;//同上
????overflow:?hidden;
????width:?162px;
}
.menutext{
background:Transparent;//设置input样式为透明，这样背景看起来就像是框架了
width:110px;
height:14px;
border:none;//不显示边框
}
</style>?
4.添加jquery特效
样式设置好后，开始添加鼠标移入移出动态特效
<script?type="text/javascript">
$(document).ready(function(){//jquery开始的固定格式
$('td.menuone').mouseover(function(){//鼠标移入事件
$(this).css("background","url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png)?0px?-72px?no-repeat");//修改tdmenuone的样式（这里包括url，截取的初始位置）
}).mouseout(function(){//鼠标的移出事件这里也可以另起一行：$('td.menuone').mouseout
$(this).css("background","url(http://0gielq.bay.livefilestore.com/y1pYjoh4J69IgWCmhHQ3Irq6jcmF8ATK9FcC-63vWT23OS2jOnmn0-H8LtLfHEq-wHr04WRONu9yxZH4c3L7no75zsVJ0ha2TRx/menutool.png)?no-repeat");
})
//上面是更变样式的一种写法（直接修改样式内容），下面是另一种方法（修改样式名称，直接换到另一个样式）
$('td.menumiddle').mouseover(function(){//鼠标移入事件
$(this).removeClass("menumiddle");
$(this).addClass("menumiddleselectd");//回头看上面的样式
//这里把menumiddle样式换成menumiddleselectd样式，这两个样式都是之前写好的
}).mouseout(function(){//同上
$(this).removeClass("menumiddleselectd");
$(this).addClass("menumiddle");
})
$('.menutext').blur(function(){
$('#menuend').removeClass("menuendselected");
$('#menuend').addClass("menuend");
}).focus(function(){
$('#menuend').removeClass("menuend");
$('#menuend').addClass("menuendselected");
})
})
</script>
特效二：文字换行滚动
观看地址：http://www.kuaileyuandi.com/study/test.html
步骤：首先创建一个html文件（dreamweaver或myeclipse均可）
1.引入包：把下载下来的jquery包放到你想要的路径下，并添加引用
<script?src="jquery-1.5.2.js"?type="text/javascript"></script>
也可不下载直接使用网络上的
<script?src="http://www.kuaileyuandi.com/js/jquery-1.5.2.js"?type="text/javascript"></script>2.开始画静态界面,静态界面就不多说了
<table?align="center"?width="80%">
<tr>
<td?width="10%">
新闻焦点
</td>
<td?width="2%">
|
</td>
<td?width="78%">
<DIV?id="bigdiv">
<DIV?id="midddiv"?style="border:none">
??<li>Apple1?正式推出</li>
<li>Apple2?正式推出</li>
<li>Apple3?正式推出</li>
<li>Apple1?正式推出</li>
</DIV>
</DIV>
</td>
<td?width="10%">
English
</td>
</tr>
</table>
3.为菜单添加样式
这里添加样式有两个用处：固定高度（滚动是会用到高度），美观。
去掉样式也可以滚动行，只是位置不一定准确
<style>?
#bigdiv?div?{
border:?#e6e6e6?1px?solid;
padding:0px?10px?0px?10px;
overflow-y:hidden;
line-height:?24px;
height:?24px
}
li{
height:24px;
margin:0;?
padding:0;
list-style:none;
}
</style>?
?
4.添加jquery特效
<script?type="text/javascript">
//function?$(id){return?document.getElementById(id);}
var?anndelay?=?500;//时间间隔
var?anncount?=?0;//计数器，为了控制函数执行的次数
var?annst?=?0;//用于判断是不是第一次执行，和让函数停止