jQuery非常之经典实战教程(可拷贝源码)

j Q u e r y非常经典实战教

程

第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】【点击后隐藏的效果】

If you click on me, I will disappear.

【6】jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数，可以通过下面的标记把jQuery添加到网页中：

第2讲jQuery语法

【1】jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

·美元符号定义jQuery

·选择符selector“查询”和“查找”HTML元素·jQuery 的action()执行对元素的操作

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

Click me

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

This is a heading

This is a paragraph.

This is another paragraph.

Click me

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

This is a heading

This is a paragraph.

This is another paragraph.

Click me

【5】【$(".test").hide()或$("p.test").hide()：隐藏所有 class="test" 的段落】

This is a heading

This is a paragraph.

This is another paragraph.

Click me

【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") 选取

元素；

②$("p.intro") 选取所有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属性。

This is a heading

This is a paragraph.

This is another paragraph.

Click me

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

语法描述

$(this) 当前HTML元素

$("p") 所有

元素

$("p.intro") 所有class="intro"的

元素$(".intro") 所有class="intro"的元素$("#intro") id="intro"的第一个元素$("ul li:first") 每个

的第一个
• 元素

  $("[href$=".jpg"]") 所有带有以".jpg"结尾的属性值的href属性

  $("div#intro.head") id="intro"的

  元素中的所有class="head"的元素

  第4讲jQuery事件

  【1】jQuery 事件函数：jQuery 事件处理方法是jQuery 中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把jQuery代码放到部分的事件处理方法中。【2】

  在上面的例子中，当按钮的点击事件被触发时会调用一个函数： $("button").click(function() {..some code... }

  该方法隐藏所有

  元素： $("p").hide(); 【3】单独文件中的函数：如果在网站包含许多页面，并且你希望你的jQuery函数易于维护，那么我们可以把jQuery函数放到独立的 .js 文件中。然后我们可以通过 src 属性来引用文件：

  【4】jQuery 名称冲突：

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

  ②某些其他 JavaScript 库中的函数（比如Prototype）同样使用 $ 符号；

  ③jQuery 使用名为 noConflict() 的方法来解决该问题；

  ④ var jq=jQuery.noConflict() ，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

  【5】

  【6】由于jQuery 是为处理HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

  ①把所有jQuery 代码置于事件处理函数中；

  ②把所有事件处理函数置于文档就绪事件处理器中；

  ③把jQuery 代码置于单独的 .js 文件中；

  ④如果存在名称冲突，则重命名jQuery 库。【7】【jQuery 事件】

  Event 函数绑定函数至

  $(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）

  $(selector).click(function)触发或将函数绑定到被选元素的点击事件

  $(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件

  $(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件

  $(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

  第5讲jQuery效果

  【1】jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。

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

  Island Trading

  Hide me

  Contact: Helen Bennett
  

  Garden House Crowther Way
  

  London

  Paris Trading

  Hide me

  Contact: Marie Bertrand
  

  265, Boulevard Charonne
  

  Paris

  【3】【 jQuery slideToggle() ：简单的slide panel滑动效果】

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

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

  请点击这里

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

  style="background:yellow;width:300px;height:300px"> 点击这里查看淡出效果

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

  Start Animation

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

  【6】jQuery 隐藏和显示：通过hide() 和show() 两个函数，jQuery 支持对HTML 元素的隐藏和显示。

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

  隐藏

  显示

  【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();

  });

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

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

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

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

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

  ①$(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])

  ①关键的参数是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

  （注意：HTML 元素默认是静态定位，且无法移动。如需使元素可以移动，要把CSS 的position 设置为relative 或absolute 。）

  【13】【jQuery 效果汇总】

  函数描述$(selector).hide()隐藏被选元素$(selector).show()显示被选元素

  $(selector).toggle()

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

  元素

  $(selector).slideDown()向下滑动（显示）被选元素$(selector).slideUp()向上滑动（隐藏）被选元素$(selector).slideToggle()

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

  下滑动

  $(selector).fadeIn()淡入被选元素$(selector).fadeOut()淡出被选元素$(selector).fadeTo()

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

  明度

  $(selector).animate()对被选元素执行自定义动画

  第6讲jQuery Callback 函数【1】Callback函数在当前动画100%完成之后执行。【2】j Query 动画的问题：许多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");

  });

  第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.

  请点击这里

  【4】【添加HTML内容】

  语法：

  ①$(selector).append(content)

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

  ②$(selector).prepend(content)

  prepend() 函数向所匹配的HTML 元素内部预置（Prepend）内容；

  ③$(selector).after(content)

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

  ④$(selector).before(content)

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

  【5】

  【6】

  【7】【jQuery HTML操作】

  函数描述$(selector).html(content)改变被选元素的（内部）HTML

  $(selector).append(content)

  向被选元素的（内部）HTML

  追加内容

  $(selector).prepend(content)

  向被选元素的（内部）HTML

  “预置”（Prepend）内容$(selector).after(content)在被选元素之后添加HTML $(selector).before(content)在被选元素之前添加HTML

  第8讲jQuery CSS 函数

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

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

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

  ③$(selector).css(name)

  【2】函数css(name,value) 为所有匹配元素的给定CSS 属性设置值：

  This is a heading

  This is a paragraph.

  This is another paragraph.

  Click me

  【3】函数css({properties}) 同时为所有匹配元素的一系列CSS 属性设置值。

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

  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)获得第一个匹配元素的样式

  属性值

  $(selector).height(value)设置匹配元素的高度

  $(selector).width(value)设置匹配元素的宽度

  第9讲jQuery AJAX 函数

  【1】jQuery拥有供 AJAX 开发的丰富函数（方法）

  库。

  【2】【点击按钮，通过Ajax改变文本内容】

  通过 AJAX 改变文本

  改变内容

  【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

  提供了比高层级函数更多的功能，但是同时也更难使用。option参数设置的是name|value 对，定义url数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

  【7】【jQuery AJAX 请求】

  请求描述

  $(selector).load(url,data,callb ack)把远程数据加载到被选的元素中

  $.ajax(options)把远程数据加载到XMLHttpRequest 对象中

  $.get(url,data,callback,type)使用HTTP GET 来加载远程数据

  $.post(url,data,callback,type)使用HTTP POST 来加载远程数据

  $.getJSON(url,data,callback)使用HTTP GET 来加载远程JSON 数据

  $.getScript(url,callback)加载并执行远程的JavaScript 文件

  ( url ) 被加载的数据的URL（地址）

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

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

  ( type ) 被返回的数据的类型

  (html,xml,json,jasonp,script,text) ( options ) 完整AJAX 请求的所有键/值对选项

  第二章提高篇

  第10讲用户名校验

  【1】【userVerify.html】

  "https://www.360docs.net/doc/413134803.html,/TR/xhtml1/DTD/xhtml1-transitiona l.dtd">

  href="userVerify.css"/>

  请输入用户名：

  id="verifyButton"/>

  border="1px">Hello World

  【2】【userVerify.js】

  /*

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

  * ①button被按下的时候，需要将文本框中的数据获取到* 然后发送给服务器端，最后接收服务器返回的数据，填充* 到我们预留的div中

  * ②文本框上，用户按键之后，需要判断文本框中的内容是* 否为空，如果不为空，红色的边框和背景图就应该取消，* 否则保留

  */

  $(document).ready(function () {

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

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

  var userNameNode = $("#userName");

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

  //①获取文本框的内容

  var userName = userNameNode.val();

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

  if (userName == "") {

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

  } else {

  //$.get("UserVerify.js?userName=" + encodeURI(encodeURI(userName)), function (response) {

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

  //③接收服务器端返回的数据，填充到div中 $("#result").html(response);

  });

  }

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

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

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

  var value = userNameNode.val();

  if (value == "") {

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

  userNameNode.addClass("userText"); } else {

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

  userNameNode.removeClass("userText");

  }

  });

  });

  });

  【3】【userVerify.css】

  #userName {

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

  border:1px solid red;

  background-image:url("userVerify.gif");

  background-repeat:repeat-x;

  background-position:bottom;

  }

  第11讲可以编辑的表格

  【1】【editTable.html】

  "https://www.360docs.net/doc/413134803.html,/TR/xhtml1/DTD/xhtml1-transitiona l.dtd">

  href="editTable.css"/>

  鼠标点击表格项就可以编辑
  学号	姓名
  000001	张三
  000002	李四
  000003	王五
  000004	赵六

  【2】【editTable.js】

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

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

  //

  //});

  //简化的ready写法

  $(function () {

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

  //使用even是为了把通过tbody tr返回的所有tr元素中，在数组里面下标是偶数的元素返回，因为这些元素，实际上才是我们期望的tbody里面的奇数行

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

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

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

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

  numTd.click(function () {

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

  var tdObj = $(this);

  if (tdObj.children("input").length > 0) { //当前td中input，不执行click处理

  return false;

  }

  var text = tdObj.html();

  //清空td中的内容

  tdObj.html("");

  //创建一个文本框，去掉文本框的边框，设置文本框中的文字字体大小是16px，使文本框的宽度和td 的宽度相同，设置文本框的背景色，需要将当前td中的内容放到文本框中，将文本框插入到td中

  var inputObj = $("

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

  .css("font-size",

  "16px").width(tdObj.width())

  .css("background-color",

  tdObj.css("background-color"))

  .val(text).appendTo(tdObj);

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

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

  inputObj.click(function () {

  return false;

  });

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

  inputObj.keyup(function (event) {

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

  var keycode = event.which;

  //处理回车的情况

  if (keycode == 13) {

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

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

  //将td的内容修改成文本框中的内容 tdObj.html(inputtext);

  }

  //处理Esc的情况

  if (keycode == 27) {

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

  tdObj.html(text);

  }

  });

  });

  });

  【3】【editTable.css】

  table{

  border:1px solid black;

  /*修正单元格之间的边框不能合并*/

  border-collapse:collapse;

  width:400px;

  }

  table td{

  border:1px solid black;

  width:50%;

  }

  table th{

  border:1px solid black;

  width:50%;

  }

  tbody th{

  background-color:#a3bae9;

  }

  第12讲横向纵向菜单

  【1】【menu.html】

  "https://www.360docs.net/doc/413134803.html,/TR/xhtml1/DTD/xhtml1-transitiona l.dtd">

  href="css/menu.css"/>

  • 菜单项1

    • 子菜单项11
    • 子菜单项12

  • 菜单项2

    • 子菜单项21
    • 子菜单项22

  • 菜单项3

    • 子菜单项31
    • 子菜单项32

  
  
  
  

  • 菜单项1

    • 子菜单项11
    • 子菜单项12

  • 菜单项2

    • 子菜单项21
    • 子菜单项22

  • 菜单项3

    • 子菜单项31
    • 子菜单项32

  【2】【menu.js】

  $(document).ready(function () {

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

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

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

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

  ulNode.slideToggle();

  changeIcon($(this));

  });

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

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

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

  }, function () { $(this).children("ul").slideUp();

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

  });

  });

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

  function changeIcon(mainNode) {

  if (mainNode) {

  if

  (mainNode.css("background-image").indexOf("collapse d.gif") >= 0) {

  mainNode.css("background-image",

  "url('images/expanded.gif')");

  } else {

  mainNode.css("background-image",

  "url(images/collapsed.gif)");

  }

  }

  }

  【3】【menu.css】

  ul,li{

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

  list-style:none;

  }

  ul{

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

  padding:0;

  margin:0;

  }

  .main,.hmain{

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

  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;

  }

  .main a,.hmain a{

  color:White;

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

  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;

  }*/

  第13讲标签页效果

  【1】【tab.html】

  "https://www.360docs.net/doc/413134803.html,/TR/xhtml1/DTD/xhtml1-transitiona l.dtd">

  href="css/tab.css"/>

  • 标签1
  • 标签2
  • 标签3

  我是内容

  1

  我是内容2

  我是内容3

  
  
  
  

  • 装入完整页面
  • 装入部分页面
  • 从远程获取数据

  src="images/img-loading.gif"/>

  【2】【tab.js】

  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 () {

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

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

  //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin");

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

  //

  $("div.contentfirst:eq(" + index + ")").addClass("contentin");

  liNode.addClass("tabin");

  }, 300);

  }).mouseout(function () {

  clearTimeout(timoutid);

  });

  });

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

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

  //找到标签2效果对应的三个标签，注册鼠标点击事件 $("#tabsecond li").each(function (index) {

  $(this).click(function () {

  $("#tabsecond

  li.tabin").removeClass("tabin");

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

  if (index == 0) {

  //装入静态完成页面

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

  } else if (index == 1) {

  //装入动态部分页面

  $("#realcontent").load("TabLoad.asp h2"); } else if (index == 2) {

  //装入远程数据（这里也是一个动态页面输出的数据） $("#realcontent").load("TabData.asp");

  }

  });

  });

  //对于loading图片绑定Ajax请求开始和交互结束事件 $("#contentsecond img").bind("ajaxStart", function () {

  //把div里面的内容清空

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

  //整个页面中任意Ajax交互开始前，function中的内容会被执行

  $(this).show();

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

  //整个页面中任意Ajax交互结束后，function中的内容会被执行

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

  });

  });

  【3】【tab.css】

  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 li.tabin{

  background-color:#6e6e6e;

  border:1px splid#6e6e6e;

  }

  div.contentfirst{

  clear:left;

  background-color:#6e6e6e;

  color:White;

  width:300px;

  height:100px;

  padding:10px;

  display:none;

  }

  div.contentin{

  display:block;

  }

  #tabsecond li{

  float:left;

  background-color:White;

  color:Blue;

  padding:5px;

  margin-right:2px;

  cursor:pointer;

  }

  #tabsecond li.tabin{

  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;

  }

  第14讲级联下拉框效果（略）

  第15讲窗口效果

  【1】【window.html】

  "https://www.360docs.net/doc/413134803.html,/TR/html4/loose.dtd">

  content="text/html; charset=gb2312">

  

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

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

  

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

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

  

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

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

  【2】【window.js】

  $(document).ready(function () {

  //1.点击按钮可以在屏幕中间显示一个窗口

  //2.点击按钮2可以在屏幕的左下角显示一个窗口

  //3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出

  /*

  *$(".title img").click(function(){

  * //关闭按钮点击之后，关闭窗口

  * $(this).parent().parent().hide("slow");

  *});

  */

  var centerwin = $("#center");

  var leftwin = $("#left");

  var rightwin = $("#right");

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

  //鼠标点击按钮之后，把id为center的窗口显示在页面中间//计算位于屏幕中间的窗口的左边界和上边界的值

  //浏览器可视区域的宽和高，当前窗口的宽和高

  //需要考虑到横向滚动条的当前左边界值以及纵向滚动条

  的当前上边界值

  centerwin.show("slow");

  });

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

  leftwin.slideDown("slow");

  });

  setTimeout(function () {

  centerwin.mywin({ left: "center", top: "center"}); leftwin.mywin({ left: "left", top: "bottom"}, function () { leftwin.slideUp("slow"); });

  var windowobj = $(window);

  var cwinwidth = rightwin.outerWidth(true);

  var cwinheight = rightwin.outerHeight(true);

  var browserwidth = windowobj.width();

  var browserheight = windowobj.height();

  var scrollLeft = windowobj.scrollLeft();

  var scrollTop = windowobj.scrollTop();

  var rleft = scrollLeft + browserwidth - cwinwidth; if ($.browser.safari) {rleft = rleft - 15;}

  if ($.browser.opera) {rleft = rleft + 15;}

  if ($.browser.msie &&

  $.browser.version.indexOf("8") >= 0) {

  rleft = rleft - 20;

  }

  rightwin.mywin({ left: "right", top: "bottom" }, function () {

  rightwin.hide();

  }, { left: rleft, top: scrollTop + browserheight }).fadeOut(15000).dequeue();

  }, 500);

  });

  /*

  *$.fn.hello = function() {

  * alert("hello:" + this.val());

  * return this;

  *}

  */

  /**

  *@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top

  *@param hidefunc表示执行窗口隐藏的方法

  *@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top

  */

  $.fn.mywin = function(position, hidefunc, initPos) { if (position && position instanceof Object) { var positionleft = position.left;

  var positiontop = position.top;

  var left;

  var top;

  var windowobj = $(window);

  var currentwin = this;

  var cwinwidth;

  var cwinheight;

  var browserwidth;

  var browserheight;

  var scrollLeft;

  var scrollTop;

  //计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值

  function getBrowserDim() {

  browserwidth = windowobj.width();

  browserheight = windowobj.height();

  scrollLeft = windowobj.scrollLeft();

  scrollTop = windowobj.scrollTop(); }

  //计算窗口真实的左边界值

  function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {

  if(positionleft && typeof positionleft == "string") {

  if (positionleft == "center") {

  left = scrollLeft + (browserwidth - cwinwidth) / 2; } else if (positionleft == "left") { left = scrollLeft;

  } else if(positionleft == "right") { left = scrollLeft + browserwidth - cwinwidth;

  if ($.browser.safari) {

  left = left - 15;

  }

  if ($.browser.opera) {

  left = left + 15;

  }

  if ($.browser.msie &&

  $.browser.version.indexOf("8") >= 0) {

  left = left - 20;

  }

  } else {

  left = scrollLeft + (browserwidth - cwinwidth) / 2; }

  } else if (positionleft && typeof positionleft == "number") {

  left = positionleft;

  } else {

  left = 0;

  }

  }

  //计算窗口真实的上边界值

  function calTop(positiontop, scrollTop, browserheight, cwinheight) {

  if (positiontop && typeof positiontop == "string") {

  if (positiontop == "center") {

  top = scrollTop + (browserheight - cwinheight) / 2; } else if (positiontop == "top") { top = scrollTop;

  } else if(positiontop == "bottom") { top = scrollTop + browserheight - cwinheight;

  if ($.browser.opera) {

  top = top - 25;

  }

  } else {

  top = scrollTop + (browserheight - cwinheight) / 2;

  }

  } else if (positiontop && typeof positiontop == "number") {

  top = positiontop;

  } else {

  top = 0;

  }

  }

  //移动窗口的位置

  function moveWin() {

  calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);

  calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);

  currentwin.animate({

  left: left,

  top: top

  }, 600);

  }

  //定义关闭按钮的动作

  currentwin.children(".title").children("img").click (function () {

  if (!hidefunc) {currentwin.hide("slow");}

  else {hidefunc(); }

  });

  if (initPos && initPos instanceof Object) { var initLeft = initPos.left;

  var initTop = initPos.top;

  if (initLeft && typeof initLeft == "number") { currentwin.css("left", initLeft);

  } else { currentwin.css("left", 0); } if (initTop && typeof initTop == "number") {

  currentwin.css("top", initTop);

  } else { currentwin.css("top", 0); }

  currentwin.show();

  }

  cwinwidth = currentwin.outerWidth(true);

  cwinheight = currentwin.outerHeight(true); currentwin.data("positionleft", positionleft); currentwin.data("positiontop", positiontop);

  getBrowserDim();

  moveWin();

  var scrollTimeout;

  //浏览器滚动条滚动时，移动窗口的位置

  $(window).scroll(function () {

  //判断一下当前窗口是否可见

  if (!currentwin.is(":visible")) {

  return;

  }

  clearTimeout(scrollTimeout);

  scrollTimeout = setTimeout(function () { getBrowserDim();

  moveWin();

  }, 300);

  });

  //浏览器大小改变时，移动窗口的位置

  $(window).resize(function () {

  //判断一下当前窗口是否可见

  if (!currentwin.is(":visible")) { return; }

  getBrowserDim();

  moveWin();

  });

  //返回当前对象，以便可以级联的执行其他方法

  return currentwin;

  }

  }

  【3】【window.css】

  .window {

  background-color: #D0DEF0;

  width: 250px;

  /*padding: 2px;*/

  margin: 5px;

  /*控制窗口绝对定位*/

  position: absolute;

  display: none;

  }

  .content {

  height: 150px;

  background-color: white;

  border: 2px solid#D0DEF0;

  padding: 2px;

  /*控制区域内容超过指定高度和宽度时显示滚动条*/

  overflow: auto;

  }

  .title {

  padding: 4px;

  font-size: 14px;

  }

  .title img {

  width: 14px;

  height: 14px;

  float: right;

  cursor: pointer; }

  附录1 jQuery 参考手册 - 选择器

  选择器实例选取

  *$("*") 所有元素

  #id$("#lastname") id="lastname" 的元素

  .class$(".intro") 所有class="intro" 的元素

  element$("p") 所有

  元素

  .class.class$(".intro.demo") 所有class="intro" 且class="demo" 的元素

  :first$("p:first") 第一个

  元素

  :last$("p:last") 最后一个

  元素

  :even$("tr:even") 所有偶数 元素

  :odd$("tr:odd") 所有奇数 元素

  :eq(index)$("ul li:eq(3)") 列表中的第四个元素（index 从0 开始）:gt(no)$("ul li:gt(3)") 列出index 大于3 的元素

  :lt(no)$("ul li:lt(3)") 列出index 小于3 的元素

  :not(selector) $("input:not(:empty)") 所有不为空的input 元素

  :header$(":header") 所有标题元素

  -

  :animated所有动画元素

  :contains(text)$(":contains('W3School')") 包含指定字符串的所有元素

  :empty$(":empty") 无子（元素）节点的所有元素

  :hidden $("p:hidden") 所有隐藏的

  元素

  :visible$("table:visible") 所有可见的表格

  s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素

  [attribute]$("[href]") 所有带有href 属性的元素

  [attribute=value]$("[href='#']") 所有href 属性的值等于"#" 的元素[attribute!=value]$("[href!='#']") 所有href 属性的值不等于"#" 的元素[attribute$=value]$("[href$='.jpg']") 所有href 属性的值包含".jpg" 的元素

  :input$(":input") 所有 元素

  :text$(":text") 所有type="text" 的 元素

  :password$(":password") 所有type="password" 的 元素:radio$(":radio") 所有type="radio" 的 元素

  :checkbox$(":checkbox") 所有type="checkbox" 的 元素:submit$(":submit") 所有type="submit" 的 元素

  :reset$(":reset") 所有type="reset" 的 元素

  :button$(":button") 所有type="button" 的 元素

  :image$(":image") 所有type="image" 的 元素

  :file$(":file") 所有type="file" 的 元素

  :enabled$(":enabled") 所有激活的input 元素

  :disabled$(":disabled") 所有禁用的input 元素

  :selected$(":selected") 所有被选取的input 元素

  :checked$(":checked") 所有被选中的input 元素

  附录2 jQuery 参考手册 - 事件

  方法描述

  bind()向匹配元素附加一个或更多事件处理器

  blur()触发、或将函数绑定到指定元素的blur 事件

  change()触发、或将函数绑定到指定元素的change 事件

  click()触发、或将函数绑定到指定元素的click 事件

  dblclick()触发、或将函数绑定到指定元素的double click 事件

  delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器

  jquery Treetable例子

  <%@page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

  jQuery前端开发实战教程

  《jQuery前端开发实战教程》试卷 得分 单选题（每题2分，共计30分） 1．页面中存在可见元素div，代码“if( $("div").show().is(:animated) ){ $("div").hide(1000); }” 的执行效果是（） A、元素以动画效果隐藏 B、元素没有任何变化 C、元素无动画效果隐藏 D、元素先以动画效果隐藏，再无动画形式显示 2．关于代码“$.fn.test = function() { };”，下列说法错误的是（） A、test方法可以被jQuery对象调用 B、test方法被jQuery对象调用时，this指向调用该方法的jQuery对象 C、在test方法中可以书写代码“return this”来实现链式编程 D、$.fn是jQuery原型对象jQuery.prototype的简写3．jQuery Mobile选择菜单中，当选择菜单中含有多个类别时，可添加（）元素，让jQuery Mobile根据此元素中label属性的文本创建含有分割项的选项。 A、label B、optgroup C、select D、option 4．在使用tree组件时，dnd属性和lines属性设置为true分别代表（）含义。 A、显示横线条显示竖线条 B、显示竖线条显示横线条 C、表示可拖动表示可拖拽 D、表示可拖动表示显示竖线条 5．下列哪种方法不可以让元素设置为不可见（） A、fadeIn B、fadeOut C、fadeTo D、hide 总分题型单选题多选题填空题简答题题分 得分

  6．在jQuery Mobile列表视图中，可以将任意大小的图片自动缩放到（）像素，展示到列表中。 A、60 B、70 C、80 D、90 7．跟jQuery相继诞生的JavaScript库还有很多，不包括（） A、Prototype B、ExtJS C、YUI D、node.js 8．下面选项中this的使用说法正确的是（） A、this指向当前元素 B、this可以用来绑定事件 C、this可以获取到所有元素 D、this是一种方法9．使用animate方法实现与代码$("div").fadeIn(600)相同效果的代码写法是（） A、$("div").animate({"opacity":"1"}) B、$("div").animate({"opacity":"1"},"fast") C、$("div").animate({"opacity":"1"},600) D、$("div").animate({"opacity":"1"},"normal") 10．从EasyUI网站下载到的“jquery-easyui-1.5.4.2.zip”压缩包解压，保存到“chapter08\ easyui-1.5.4.2”目录中下面说法错误的是（） A、locale目录是国际化资源文件包 B、plugins是插件包目录 C、jsrc是源码包目录 D、demo和demo-mobile目录都是样例，没有区别 11．在jQuery事件中，当调整浏览器窗口时触发的事件是（）事件。 A、resize() B、change() C、scroll() D、select()

  50个实用的JQUERY案例

  jquery案例 jquery案例1.如何创建嵌套的过滤器： 1.//允许你减少集合中的匹配元素的过滤器， 2.//只剩下那些与给定的选择器匹配的部分。在这种情况下， 3.//查询删除了任何没（:not）有（:has） 4.//包含class为“selected”（.selected）的子节点。 5..filter(":not(:has(.selected))") jquery案例2.如何重用元素搜索 1.var allItems=$("div.item"); 2.var keepList=$("div#container1div.item"); 3.//现在你可以继续使用这些jQuery对象来工作了。例如， 4.//基于复选框裁剪“keep list”，复选框的名称 5.//符合 6.

  class names: 7.$(formToLookAt+"input:checked").each(function(){ 8.keepList=keepList.filter("."+$(this).attr("name")); 9.}); 10.

  jquery案例3.任何使用has()来检查某个元素是否包含某个类或是元素： 1.//jQuery1.4.*包含了对这一has方法的支持。该方法找出 2.//某个元素是否包含了其他另一个元素类或是其他任何的 3.//你正在查找并要在其之上进行操作的东东。 4.$("input").has(".email").addClass("email_icon"); jquery案例4.如何使用jQuery来切换样式表 1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 2.$('link[media='screen']').attr('href','Alternative.css'); jquery案例5.如何限制选择范围（基于优化目的）： 1.//尽可能使用标签名来作为类名的前缀， 2.//这样jQuery就不需要花费更多的时间来搜索 3.//你想要的元素。还要记住的一点是， 4.//针对于你的页面上的元素的操作越具体化， 5.//就越能降低执行和搜索的时间。

  jQuery入门教程(很不错)

  jQuery入门[1]－构造函数 https://www.360docs.net/doc/413134803.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小（v1.2.3 15kb） ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera） ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展，插件丰富 jQuery的构造函数接收四种类型的参数： jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/413134803.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">