自制jqueydemo教程.doc

首先，先说一下我们所要实现导航栏的一个效果既然有人可以这导航那么我们也可以，我也是为了让更多人认识jquery神奇的地方，这也就是现在做网站的主流，我们用淘宝的例子来做吧！如图打开Visual Studio也就是我们所说的VS，名字自己定义，新建一个文件，名字自己定义（如图1）图1添加一个现有项，jquery-1.7文件就是JS（如图2）图 2添加一个.aspx文件 名字为index.aspx 图3打开index.aspx文件，把jquery-1.7.js添加进去图 4哦！差点忘记还要新建一个主题图 5而menu.css就是我们所要的文件（外观模板）那同样我们的CSS文件同样要添加至index中接下来我们就开始写div css 还有menu.css那么怎么来实现淘宝上的效果呢？怎么样可以下拉，怎么样可以实现这东西呢？这个是我们思考的方向。那好我们接下来慢慢来实现这效果为什么我们要 为什么不用 或者是来编写呢！原因和是一对多的关系，前面带有小圆点前面带有数字 自动带有缩进功能而我们在看一下淘宝他所要的功能呢！没有圆点 没有数字 只有缩进功能，那和就是我们所要用的功能，所以我们选择了/当然这里最终效果还差得太远了，所以我们还是要加油，这就是写网站就是要考虑的问题。这就是一个方向。图 6这就是和的效果！那我们已经初步实现了这个效果，那么怎么样能实现当鼠标滑过的时候会下拉菜单呢！那么我们先设置一下menu.css吧！（字体灰色，那么怎么样算出黑色的位置要用到的就是我们高中学过的进制转换先在介绍吧！）可以用一种很简单的方法来计算因为QQ自带截图功能嘛！一般截图工具会自带rgb的值那我看到的是RGB：“102,102,102”那我们就打开系统只带的计算机吧！切换至程序员模式就是吧数字输到10进制的地方去切换为16进制就那么简单还有一种最简单的方法就是用PS来那里不要去算，直接可以看出结果是66还有红色的RGB（255,170,43）255就不用说了肯定是FF的170为AA43是一个很神奇的数字2B结果为#FFAA2B好就先介绍到这我们先设置menu.css设置这就是我们占时需要的东东设计一个类用“. ”表示Margin 外边框属性Padding 边框的空白Font-size 元素所需的大小.Taobaomenu a就是一个元素用于div那里这里很多人就会有疑问为什么加a和a：hovera和a：hover相当于父子级关系a：hover是鼠标放上去的时候下面是效果图这就出现了想淘宝一样当鼠标到文字上回变成另外一种颜色了。text-decoration 是元素文字的下划线，我们设了超连接不是会有下划线所以我们要设为none 没有另外要介绍一下 这个用class来表示为一个连接Href为连接地址我这里设的是空地址所以用#来表示还有一个要像大家说明一下的一个字12px即是12像素那“我的淘宝”为4个那么就是48px那因为我们要居中的那就是说，我们要多设点像素那就是100px吧！因为“已买到的宝贝”也是要算的那还没有设置那先设置一下边框这些这里重点说明一下text-align：这是文件是什么对齐方式，那我们肯定是要选择居中center的。长宽高，这个我就不说了 对于css不懂的同学那要去补习一下怎么样用css 这个教程不说明太多现在已经到了这里了，那我们要想一下，能用什么方式来实现当鼠标滑到我的淘宝的时候，会下拉，其他三个项目，那我们要怎么想呢，用两个div还是用一个，那我们只有俩个都要试一试了。那我们只有在原有的dd上面添加一个类就变成这个样子了 所以我们囧了。那么这就不是我们要实现的效果图那我们要怎么样添加成为那种效果呢？那就只有在原来的Taobao a 那里在添加一点东西所以我们只有一种办法了那么我们有什么办法变成两个div呢！可以这样想能不能只要一个呢！那我们可以看一下！这样设置看一下效果！好的，这个方案，可以实现这个效果，但是又来了一点问题了，就是覆盖，怎么样覆盖，好那么我们可以这么解决，能不能把的高度设置一下，我们来看一下这样子基本可以。那就初步实现了两个成功覆盖。加一个padding 前面也说过padding的作用，这里就不说了那现在还有两点，也可以说是一点，怎么样去掉这个怎么样去掉是我们这个课程的重点 前边框 和下边框去掉那我们就安排它那怎么安排它呢？怎么样去掉下边框呢?其实也不过是加几个东东而已.Taobaomenu dd加东东。也就是这几个border-bottom 是谁呢 他是实现下边框消失的东东Position是何许人也 它是定位一个元素z-index是什么人呢 它是也是定位但又排序功能最终会实现这个效果那还一个问题就是我的淘宝那里有背景是灰色的那怎么办这个是又灰色效果的那我们往里面添加背景在.Taobaomenu dt那里添加一个background设为灰色因为我的淘宝是往左边突的那么就是用margin那就可以实现了这是实现的效果图下面我就开始介绍jquery的用法，这次我就不会一一介绍什么东西了，怎么去实现这效果，怎么样去弄这效果，是都得要去想。我也被这步卡了有点久说时候，有时候因为东西太多，很容易出错，我也被搞得迷迷糊糊的。这两个代码，为什么呢，当鼠标放上DT的时候，当鼠标离开DD的时候在后来发现其实没有必要弄。Showmenudd这个类的因为我在后面添加了。Css样式代码也就是这里的东西。这个不要也行当我没说，呵呵！看下边框不就被隐藏了。今天我又调试了一下，我发现当鼠标滑过的时候发现我的淘宝背景色是不会改变的，如图上面还是灰色的，所以我就想，他的淘宝标题本来是三个DIV构成的，所以我只有在原来的基础上在弄一下就是在Function（）/这是一个函数/添加一个背景background-color 当鼠标放上去的时候我们就把background-color设为白色，白色的RGB为“255，,255,，255”这个就不用算RGB 肯定是FFFFFF那就就说一下jquery $(document).ready(function () $(.Taobaomenu).hover( function () $(.Taobaomenu dt).addClass(Showmenudt).css(background-color, #ffffff); $(.Taobaomenu dd).css(display, block); , function () $(.Taobaomenu dt).removeClass(Showmenudt).css(background-color, #cecece); $(.Taobaomenu dd).css(display, none); ); );就是这个function 是一个函数，.addclass是方法向被选元素添加一个或多个类.Display是显示方向Document就是一个文档$这个是串结束符号那我们得到的效果是这样的这是鼠标没有滑过前这是鼠标滑过之后然后滑出之后好，我们实现了这个效果，其实如果我们想去弄jqu