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"?class="menu"??cellpadding="0"?cellspacing="0"?width="90%"> <tr>

<td?class="menuone"?valign="middle"?align="center">logo </td><!--?class后面要用到，不能漏掉? -->

<td?class="menumiddle"?valign="middle"?align="center">购买 </td?valign="middle">

<td?class="menumiddle"?valign="middle"?align="center">mac</td?valign="middle">

<td?class="menumiddle"?valign="middle"?align="center">ipod</td>

<td?class="menumiddle"?valign="middle"?align="center">iphone</td>

<td?class="menumiddle"?valign="middle"?align="center">ipad</td>

<td?class="menumiddle"?valign="middle"?align="center">iTunes</td>

<td?class="menumiddle"?valign="middle"?align="center">志愿服务

</td>

<td?class="menuend"?id="menuend"?valign="middle"?align="center"><input?class="menutext"?type="text"/></td>

</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; //用于判断是不是第一次执行，和让函数停止