2024年5月3日发(作者：)

$(this).hide();

});

});

If you click on me, I will disappear.

jQuery非常经典实战教

程

第1章 基础之篇

第1讲 jQuery简介

【1】适合JQuery课程学习的人员：①准备做Ajax

前台开发；②熟悉Java、.Net、PHP、Python、Ruby

等；③熟悉JavaScript，了解Ajax，想要提高；

④网页设计师，熟悉CSS；⑤想熟练掌握JQuery

的使用方式。

【2】JQuery的特点：

①写尽可能少的代码，做尽可能多的事情（Write

less,Do more）；

②用很简洁的代码完成很丰富的工作，会改变我们

写JavaScript代码的一些方式；

③支持各种主流浏览器，包括IE6以上，FireFox2

以上，Safari2以上和Opera9以上的版本；

④以强大的CSS选择器为基础，几乎所有的操作都

先使用选择器查找DOM对象，然后对其进行各种操

作；

⑤屏蔽浏览器差异，对DOM的操作提供了方便

的扩展，易用的事件处理API和动画API；

⑥强大的插件机制；

⑦社区活跃，文档非常齐全，全部配有示例。学

习容易，易用性很高。

【3】学习环境准备：

①任何你喜欢的编辑器或IDE；

②各种主流浏览器；

③一个自己熟悉的应用服务器。

【4】jQuery是一个轻量级的 JavaScript库 ，它

极大地简化了JavaScript编程。

【5】【点击后隐藏的效果】

第2讲 jQuery语法

【1】jQuery 语法是为 HTML 元素的选取编制的，

可以对元素执行某些操作。

基础语法是：$(selector).action()

·美元符号定义jQuery

·选择符selector“查询”和“查找”HTML元素

·jQuery 的action()执行对元素的操作

【2】【$(this).hide()：隐藏当前Html元素】

【3】【$("#test").hide()：隐藏所有 id="test"

的元素】

jQuery实战教程

- 1 -

This is a heading

This is a paragraph.

This is another paragraph.

$(".test").hide();

});

});

This is a heading

This is a paragraph.

This is another paragraph.

【4】【$("p").hide()：隐藏所有段落】

This is a heading

This is a paragraph.

This is another paragraph.

【6】文档就绪函数：我们让所有的jQuery函数位

于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行

jQuery代码。如果在文档没有完全加载之前就运行

函数，操作可能失败。

第3讲 jQuery选择器

【1】 JQuery选择器 ：可以用来准确地选取您希

望应用效果的元素。jQuery 元素选择器 和 属性

选择器 允许您通过标签名、属性名或内容对HTML

元素进行选择。选择器允许您对HTML元素组或单

个元素进行操作。在HTML DOM术语中，选择器

允许您对DOM元素组或单个DOM节点进行操作。

【2】jQuery元素选择器：jQuery使用CSS选择器

来选取HTML元素。

①$("p") 选取

元素；

②$("") 选取所有class="intro"的

元素；

③

$("p#demo") 选取id="demo" 的第一个

元素。

【3】jQuery属性选择器：jQuery使用XPath表达

式来选择带有给定属性的元素。

① $("[href]") 选取所有带有href属性的元素；

② $("[href='#']") 选取所有带有href值等于"#"的

元素；

③ $("[href!='#']") 选取所有带有href值不等于"#"

的元素；

④ $("[href$='.jpg']") 选取所有href值以".jpg"结

尾的元素。

【4】jQuery CSS 选择器：jQuery CSS选择器可用

于改变HTML元素的CSS属性。

【5】【$(".test").hide()或$("").hide()：

隐藏所有 class="test" 的段落】

This is a heading

This is a paragraph.

This is another paragraph.

});

});

在上面的例子中，当按钮的点击事件被触发时会调

用一个函数：

$("button").click(function() {..some

}

该方法隐藏所有

元素：

$("p").hide();

【3】 单独文件中的函数 ：如果在网站包含许多

页面，并且你希望你的jQuery函数易于维护，那

么我们可以把jQuery函数放到独立的 .js 文件

中。然后我们可以通过 src 属性来引用文件：

【5】【更多选择器实例】

语法

$(this)

$("p")

$("")

$(".intro")

$("#intro")

$("ul li:first")

$("[href$=".jpg"]")

所有

元素

所有class="intro"的

元素

所有class="intro"的元素

id="intro"的第一个元素

每个

    的第一个
  • 元素

    所有带有以".jpg"结尾的属性值

    的href属性

    id="intro"的

    元素中的所有

    class="head"的元素

    描述

    当前HTML元素

    【4】 jQuery 名称冲突 ：

    ①jQuery 使用 $ 符号作为 jQuery 的简介方式；

    ②某些其他 JavaScript 库中的函数（比如

    Prototype）同样使用 $ 符号；

    ③jQuery 使用名为 noConflict() 的方法来解决

    该问题；

    ④ var jq=lict() ，帮助您使用自

    己的名称（比如 jq）来代替 $ 符号。

    【5】

    $("div#")

    第4讲 jQuery事件

    【1】jQuery 事件函数：jQuery 事件处理方法是

    jQuery 中的核心函数。事件处理程序指的是 当

    HTML中发生某些事件时所调用的方法 。术语由事

    件“触发”（或“激发”）经常会被使用。通常会

    把jQuery代码放到部分的事件处理方法中。

    【2】

    Morning-Sun - 领先的 Web 技术教程站点

    在 Morning-Sun ，你可以找到你所需要的所有网站建设

    教程。

    请点击这里

    第5讲 jQuery效果

    【1】jQuery可以创建 隐藏、显示、切换、滑动 以

    及 自定义动画 等效果。

    【2】【jQuery hide()：隐藏部分文本】

    Island Trading

    Contact: Helen Bennett

    Garden House Crowther Way

    London

    Paris Trading

    jQuery实战教程

    - 4 -

    【4】【jQuery fadeTo() ：淡出效果】

    style="background:yellow;width:300px;height:300px">

    两个函数，jQuery 支持对 HTML 元素的隐藏和显

    示。

    如果点击“隐藏”按钮，我就会消失。

    【5】【jQuery animate() ：动画效果】

    Start Animation

    style="background:#98bf21;height:100px;width:100px;

    position:relative">

    【7】hide() 和 show() 都可以设置两个可选参数：

    speed 和 callback。语法：

    $(selector).hide(speed, callback);

    $(selector).show(speed, callback);

    ①speed 参数规定 显示或隐藏的速度 。可以设

    置这些值："slow", "fast", "normal" 或毫秒；

    ②callback 参数是在 hide 或 show 函数完成之

    后被执行的函数名称（具体见后面章节）。

    例如： $("button").click(function () {

    $("p").hide(1000);

    });

    【8】 jQuery 切换 ：jQuery toggle() 函数 使用

    show() 或 hide() 函数来切换 HTML 元素的可见

    状态，隐藏显示的元素，显示隐藏的元素。语法：

    $(selector).toggle(speed, callback);

    例如： $("button").click(function () {

    $("p").toggle();

    });

    【6】jQuery 隐藏和显示：通过 hide() 和 show()

    【9】jQuery 滑动函数，jQuery拥有以下滑动函数：

    ① $(selector).slideDown(speed,callback);

    ② $(selector).slideUp(speed,callback);

    ③ $(selector).slideToggle(speed,callback);

    【10】 jQuery Fade 函数 ，jQuery 拥有以下 fade

    jQuery实战教程

    - 5 -

    函数：

    ① $(selector).fadeIn(speed,callback)

    ② $(selector).fadeOut(speed,callback)

    ③ $(selector).fadeTo(speed,opacity,callback)

    · speed 参数可以设置这些值："slow", "fast",

    "normal" 或 毫秒；

    · fadeTo() 函数中的 opacity 参数规定减弱到

    给定的不透明度；

    · callback 参数是在该函数完成之后被执行的

    函数名称。

    【11】 jQuery 自定义动画 ：jQuery 函数创建自

    定义动画的语法为

    $(selector).animate({params},[duration],[easing],[callback])

    【13】【jQuery 效果汇总】

    函数

    $(selector).hide()

    $(selector).show()

    $(selector).toggle()

    $(selector).slideDown()

    $(selector).slideUp()

    $(selector).slideToggle()

    $(selector).fadeIn()

    $(selector).fadeOut()

    $(selector).fadeTo()

    $(selector).animate()

    描述

    隐藏被选元素

    显示被选元素

    切换（在隐藏与显示之间）被选

    元素

    向下滑动（显示）被选元素

    向上滑动（隐藏）被选元素

    对被选元素切换向上滑动和向

    下滑动

    淡入被选元素

    淡出被选元素

    把被选元素淡出为给定的不透

    明度

    对被选元素执行自定义动画

    ①关键的参数是 params 。它定义产生动画的

    CSS 属性。可以同时设置多个此类属性：

    animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize

    :"3em"});

    ②第二个参数是 duration 。它定义用来应用到动

    画的时间。它设置的值是："slow", "fast", "normal"

    或毫秒。

    【12】【动画效果实例】

    Start Animation

    style="background:#98bf21;height:100px;width:200px;

    position:relative">

    HELLO

    第6讲 jQuery Callback 函数

    【1】Callback函数在当前动画100%完成之后执行。

    【2】jQuery 动画的问题：许多jQuery函数涉及

    动画。这些函数也许会将 speed 或duration

    作为可选参数。

    例子：$("p").hide("slow")

    speed 或 duration 参数可以设置许多不同的

    值，比如 "slow", "fast", "normal" 或毫秒。

    由于 JavaScript 语句（指令）是逐一执行 的，

    按照次序，动画之后的语句可能会产生错误或页面

    冲突，因为动画还没有完成。为了避免这个情况，

    我们可以以参数的形式添加 Callback 函数。

    【3】如果希望 在一个涉及动画的函数之后来执行

    语句 ，就需要使用 callback 函数。

    【4】【没有callback】

    $("p").hide(1000);

    alert("The paragraph is now hidden");

    【5】【有callback】

    $("p").hide(1000, function () {

    alert("The paragraph is now hidden");

    });

    （注意：HTML 元素默认是 静态定位 ，且无法移

    动。如需使元素可以移动，要把 CSS 的position

    设置为 relative 或 absolute 。）

    jQuery实战教程

    - 6 -

    第7讲 jQuery HTML 操作

    【1】jQuery 包含很多供 改变和操作 HTML 的强

    大函数。

    【2】【改变HTML内容】

    语法： $(selector).html(content)

    html() 函数改变所匹配的 HTML 元素的内容

    （innerHTML）。

    【3】

    This is a heading

    This is a paragraph.

    This is another paragraph.

    $("p").append(" W3School.");

    });

    });

    【6】

    【7】【jQuery HTML操作】

    函数

    $(selector).html(content)

    $(selector).append(content)

    $(selector).prepend(content)

    $(selector).after(content)

    $(selector).before(content)

    描述

    改变被选元素的（内部）HTML

    向被选元素的（内部）HTML

    追加内容

    向被选元素的（内部）HTML

    “预置”（Prepend）内容

    在被选元素之后添加 HTML

    在被选元素之前添加 HTML

    第8讲 jQuery CSS 函数

    【1】jQuery拥有三种用于CSS操作的重要函数：

    ① $(selector).css(name,value)

    ② $(selector).css({properties})

    ③ $(selector).css(name)

    【2】函数 css(name,value) 为所有匹配元素的给定

    CSS 属性设置值：

    【4】【添加HTML内容】

    语法：

    ① $(selector).append(content)

    append() 函数向所匹配的 HTML 元素内部追加内

    容；

    ② $(selector).prepend(content)

    prepend() 函数向所匹配的 HTML 元素内部预置

    （Prepend）内容；

    ③ $(selector).after(content)

    after() 函数在所有匹配的元素之后插入 HTML 内

    容；

    ④ $(selector).before(content)

    before() 函数在所有匹配的元素之前插入 HTML

    内容。

    【5】

    通过 AJAX 改变文本

    【3】函数 css({properties}) 同时为所有匹配元素

    的一系列 CSS 属性设置值。

    【4】函数 css(name) 返回指定的 CSS 属性的值。

    background:#ff0000">

    background:#ee44aa">

    Click in the box

    【5】 jQuery Size 操作 ，jQuery 拥有两种用于尺

    寸操作的重要函数：

    ① $(selector).height(value)

    ② $(selector).width(value)

    【6】函数height(value) 设置所有匹配元素的高度：

    $(selector).height(value)

    $("#id100").height("200px");

    【7】函数 width(value) 设置所有匹配元素的宽度：

    $(selector).width(value)

    $("#id200").width("300px");

    【8】【jQuery CSS 函数】

    CSS属性

    $(selector).css(name,value)

    描述

    匹配元素设置样式属性的值

    获得第一个匹配元素的样式

    属性值

    $(selector).css({properties}) 匹配元素设置多个样式属性

    $(selector).css(name)

    【3】什么是 AJAX？

    答：①AJAX = Asynchronous JavaScript and XML；

    AJAX 是一种 创建快速动态网页的技术 ；②AJAX

    通过在后台与服务器交换少量数据的方式，允许网

    页进行 异步更新 ；这意味着有可能在不重载整个

    页面的情况下，对网页的一部分进行更新。

    【4】AJAX 和jQuery ：①jQuery 提供了用于AJAX

    开发的丰富函数（方法）库；②通过jQuery AJAX，

    使用HTTP Get 和HTTP Post，您都可以从远程服

    务器请求TXT、HTML、XML或JSON；③而且您可以

    直接把 远程数据 载入网页的被选 HTML 元素中。

    【5】jQuery的 load 函数 是一种简单的（但很强

    大的）AJAX函数。它的语法如下：

    ·$(selector).load(url,data,callback)

    其中，使用

    selector

    来定义要改变的HTML元

    素，使用

    url 参数

    来指定数据的web地址。只有

    当您希望向服务器发送数据时，才需要使用

    data

    参数。只有当您需要在执行完毕之后触发一个函数

    时，您才需要使用

    callback

    参数。

    【6】Low Level AJAX：

    $.ajax(options)

    是低层级AJAX函数的语法，$.ajax

    jQuery实战教程

    - 8 -

    提供了比高层级函数更多的功能，但是同时也更难

    使用。

    option

    参数 设置的是 name|value 对，定

    义url数据、密码、数据类型、过滤器、字符集、

    超时以及错误函数。

    【1】【】

    Transitional//EN"

    "/TR/xhtml1/DTD/xhtml1-transitiona

    ">

    charset=gb2312" />

    JQuery实战1-用户名校验

    href="" />

    【7】【jQuery AJAX 请求】

    请求

    $(selector).load(url,data,callb

    ack)

    $.ajax(options)

    $.get(url,data,callback,type)

    $.post(url,data,callback,type)

    $.getJSON(url,data,callback)

    $.getScript(url,callback)

    ( url )

    ( data )

    ( callback )

    ( type )

    ( options )

    素中

    把远程数据加载到

    XMLHttpRequest 对象中

    使用 HTTP GET 来加载远

    程数据

    使用 HTTP POST 来加载远

    程数据

    使用 HTTP GET 来加载远

    程 JSON 数据

    加载并执行远程的

    JavaScript 文件

    描述

    把远程数据加载到被选的元

    请输入用户名：

    id="verifyButton"/>

    border="1px">Hello World

    【2】【】

    /*

    * 需要通过JavaScript代码来做两件事情

    * ①button被按下的时候，需要将文本框中的数据获取到

    * 然后发送给服务器端，最后接收服务器返回的数据，填充

    * 到我们预留的div中

    * ②文本框上，用户按键之后，需要判断文本框中的内容是

    * 否为空，如果不为空，红色的边框和背景图就应该取消，

    * 否则保留

    */

    $(document).ready(function () {

    //这里的内容是页面装载完成后要执行的代码

    //需要找到button按钮，注册事件

    var userNameNode = $("#userName");

    $("#verifyButton").click(function () {

    //①获取文本框的内容

    var userName = ();

    //②将这个内容发送给服务器

    if (userName == "") {

    alert("用户名不能为空");

    被加载的数据的 URL（地址）

    发送到服务器的数据的键/值对象

    当数据被加载时，所执行的函数

    被返回的数据的类型

    (html,xml,json,jasonp,script,text)

    完整 AJAX 请求的所有键/值对选项

    第二章 提高篇

    第10讲 用户名校验

    jQuery实战教程

    - 9 -

    } else {

    //$.get("?userName=" +

    encodeURI(encodeURI(userName)), function (response)

    {

    $.get("", function (response) {

    //③接收服务器端返回的数据，填充到div中

    $("#result").html(response);

    });

    }

    //需要找到文本框，注册事件

    $("#userName").keyup(function () {

    //获取当前文本框中的内容

    var value = ();

    if (value == "") {

    //让边框变成红色，并且带背景图

    ss("userText");

    } else {

    //去掉边框颜色与背景图

    Class("userText");

    }

    });

    });

    });

    鼠标点击表格项就可

    以编辑
    学号姓名
    000001张三
    000002李四
    000003王五
    000004赵六

    【2】【】

    //需要首先通过JavaScript来解决内容部分奇偶行的背

    景色不同

    //$(document).ready(function() {

    //

    //});

    //简化的ready写法

    $(function () {

    //找到表格的内容区域中所有的奇数行

    //使用even是为了把通过tbody tr返回的所有tr元

    素中，在数组里面下标是偶数的元素返回，因为这些元

    素，实际上才是我们期望的tbody里面的奇数行

    $("tbody tr:even").css("background-color",

    "#ece9d8");

    //我们需要找到所有的学号单元格

    var numTd = $("tbody td:even");

    //给这些单元格注册鼠标点击的事件

    (function () {

    //找到当前鼠标点击的td，this对应的就是响

    应了click的那个td

    var tdObj = $(this);

    if (en("input").length > 0) {

    //当前td中input，不执行click处理

    return false;

    }

    【3】【】

    #userName {

    }

    /*控制文本框的边框是红色的实线*/

    border:1px solid red;

    background-image:url("");

    background-repeat:repeat-x;

    background-position:bottom;

    第11讲 可以编辑的表格

    【1】【】

    Transitional//EN"

    "/TR/xhtml1/DTD/xhtml1-transitiona

    ">

    charset=gb2312" />

    JQuery实战2-可以编辑的表格

    href="" />

    jQuery实战教程

    - 10 -

    var text = ();

    //清空td中的内容

    ("");

    //创建一个文本框，去掉文本框的边框，设置

    文本框中的文字字体大小是16px，使文本框的宽度和td

    的宽度相同，设置文本框的背景色，需要将当前td中的

    内容放到文本框中，将文本框插入到td中

    var inputObj = $("

    type='text'>").css("border-width", "0")

    .css("font-size",

    "16px").width(())

    .css("background-color",

    ("background-color"))

    .val(text).appendTo(tdObj);

    //是文本框插入之后就被选中

    r("focus").trigger("select");

    (function () {

    return false;

    });

    //处理文本框上回车和Esc按键的操作

    (function (event) {

    //获取当前按下的键盘的键值

    var keycode = ;

    //处理回车的情况

    if (keycode == 13) {

    //获取当前文本框中的内容

    var inputtext = $(this).val();

    //将td的内容修改成文本框中的内容

    (inputtext);

    }

    //处理Esc的情况

    if (keycode == 27) {

    //将td中的内容还原成text

    (text);

    }

    });

    });

    });

    border:1px solid black;

    width:50%;

    }

    table th{

    border:1px solid black;

    width:50%;

    }

    tbody th{

    background-color:#a3bae9;

    }

    第12讲 横向纵向菜单

    【1】【】

    Transitional//EN"

    "/TR/xhtml1/DTD/xhtml1-transitiona

    ">

    charset=gb2312" />

    JQuery实战3-菜单效果

    href="css/" />




    }, function () {

    $(this).children("ul").slideUp();

    changeIcon($(this).children("a"));

    });

    });

    /*修改主菜单的指示图标*/

    function changeIcon(mainNode) {

    if (mainNode) {

    if

    (("background-image").indexOf("collapse

    ") >= 0) {

    ("background-image",

    "url('images/')");

    } else {

    ("background-image",

    "url(images/)");

    }

    }

    }

    【3】【】

    ul,li{

    /*清除ul和li上默认的小圆点*/

    list-style:none;

    }

    ul{

    /*清除子菜单的缩进值*/

    padding:0;

    margin:0;

    }

    .main,.hmain{

    background-image:url(../images/);

    background-repeat:repeat-x;

    width:120px;

    }

    li{

    background-color:#eeeeee;

    }

    a{

    /*取消所有的下划线*/

    text-decoration:none;

    padding-left:20px;

    display:block;

    display:inline-block;

    width:100px;

    padding-top:3px;

    padding-bottom:3px;

    【2】【】

    $(document).ready(function () {

    //页面中的DOM已经装载完成时，执行的代码

    $(".main>a").click(function () {

    //找到主菜单项对应的子菜单项

    var ulNode = $(this).next("ul");

    oggle();

    changeIcon($(this));

    });

    $(".hmain").hover(function () {

    $(this).children("ul").slideDown();

    changeIcon($(this).children("a"));

    jQuery实战教程

    - 12 -

    }

    .main a,.hmain a{

    color:White;

    background-image:url(../images/);

    background-repeat:no-repeat;

    background-position:3px center;

    }

    .main li a,.hmain li a{

    color:Black;

    background-image:none;

    }

    .main ul,.hmain ul{

    display:none;

    }

    .hmain{

    float:left;

    margin-right:1px;

    }*/

    我是内容2

    我是内容3




    • 装入完整页面

    • 装入部分页面

    • 从远程获取数据

    src="images/" />

    【2】【】

    var timoutid;

    $(document).ready(function () {

    //找到所有的标签

    $("#tabfirst li").each(function (index) {

    //每一个包装li的jquery对象都会执行function中的代码

    //index是当前执行这个function代码的li对应的

    所有li组成的数组中的索引值

    //有了index的值之后，就可以找到当前标签对应

    的内容区域

    $(this).mouseover(function () {

    var liNode = $(this);

    timoutid = setTimeout(function () {

    //将原来显示的内容区域进行隐藏

    $("tin").removeClass("contentin");

    //对有tabin的class定义的li清除tabin的class

    $("#tabfirst ").removeClass("tabin");

    //当前标签所对应的内容屈原显示出来

    //

    $("tfirst:eq(" + index +

    ")").addClass("contentin");

    ss("tabin");

    }, 300);

    }).mouseout(function () {

    clearTimeout(timoutid);

    });

    });

    //在整个页面装入完成后，标签效果2的内容区域需要

    装入静态的html页面内容

    $("#realcontent").load("");

    //找到标签2效果对应的三个标签，注册鼠标点击事件

    第13讲 标签页效果

    【1】【】

    Transitional//EN"

    "/TR/xhtml1/DTD/xhtml1-transitiona

    ">

    charset=gb2312" />

    JQuery实战4-标签页效果

    href="css/" />

    • 标签1

    • 标签2

    • 标签3

    我是内容

    1

    jQuery实战教程

    - 13 -

    $("#tabsecond li").each(function (index) {

    $(this).click(function () {

    $("#tabsecond

    ").removeClass("tabin");

    $(this).addClass("tabin");

    if (index == 0) {

    //装入静态完成页面

    $("#realcontent").load("");

    } else if (index == 1) {

    //装入动态部分页面

    $("#realcontent").load(" h2");

    } else if (index == 2) {

    //装入远程数据（这里也是一个动态页面输出的数据）

    $("#realcontent").load("");

    }

    });

    });

    //对于loading图片绑定Ajax请求开始和交互结束事件

    $("#contentsecond img").bind("ajaxStart",

    function () {

    //把div里面的内容清空

    $("#realcontent").html("");

    //整个页面中任意Ajax交互开始前，function中的

    内容会被执行

    $(this).show();

    }).bind("ajaxStop", function () {

    //整个页面中任意Ajax交互结束后，function中的

    内容会被执行

    $(this).slideUp("1000");

    });

    });

    background-color:#6e6e6e;

    border:1px splid #6e6e6e;

    }

    tfirst{

    clear:left;

    background-color:#6e6e6e;

    color:White;

    width:300px;

    height:100px;

    padding:10px;

    display:none;

    }

    tin{

    display:block;

    }

    #tabsecond li{

    float:left;

    background-color:White;

    color:Blue;

    padding:5px;

    margin-right:2px;

    cursor:pointer;

    }

    #tabsecond {

    background-color:#f2f6fb;

    border:1px solid black;

    border-bottom:100;

    z-index:100;

    position:relative;

    }

    #contentsecond{

    width:500px;

    height:200px;

    padding:10px;

    background-color:#f2f6fb;

    clear:left;

    border:1px solid black;

    position:relative;

    top:-1px;

    }

    img{

    display:none;

    }

    【3】【】

    ul,li{

    margin:0;

    padding:0;

    list-style:none;

    }

    #tabfirst li{

    float:left;

    background-color:#868686;

    color:white;

    padding:5px;

    margin-right:2px;

    border:1px solid white;

    }

    #tabfirst {

    第14讲 级联下拉框效果

    jQuery实战教程

    - 14 -

    （略）

    我是右边显示窗口的标题栏

    我是右边显示窗口的内容区

    第15讲 窗口效果

    【1】【】

    Transitional//EN"

    "/TR/html4/">

    JQuery实战-窗口效果

    src="js/">

    我是中间显示窗口的标题栏

    我是中间显示窗口的内容区

    " id="leftpop" />

    口" id="centerpop" />

    我是左边显示窗口的标题栏

    我是左边显示窗口的内容区