-
今天开始我们的jquery学习了
-
目标：使用jQuery设计常见的效果 掌握jQuery的思想设计与理念
-
学习路线：jQuery的基本概念、选择器、DOM操作、动画、事件以及扩展。
-
为什么要学习jQuery？
使用javascript开发过程中，有许多的缺点：
1. 查找元素的方法太少，麻烦。
2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。
-
什么是jQuery？（理解）
jquery的官网：http://jquery.com/
说白了：jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
-
jquery:简单、粗暴
//jq和js的关系 //js是什么？ js是一门编程语言 //jq仅仅是基于js的一个库，jq可理解为就是开发js的一个工具。 -
概念 //1. 为什么要学jquery ？ 简单，粗暴 没有兼容性问题 //2. 什么是jquery？js库，说白了就是js文件，里面有一大堆的方法 //3. 使用jquery的步骤： 1. 引入jquery文件 2. 入口函数 功能实现 //4. 版本：1.x 2.x 3.x 1.x 压缩版和未压缩版 //5. 入口函数： $(document).ready(function) $(function(){}) //6. jQuery对象与DOM对象 //区别：方法不能混用 //联系： DOM-->jq 花钱 jq-->dom [0] get(0) -
怎样使用jQuery？（重点）
使用jQuery的三个基本步骤：
1) 引包（引入jQuery文件）
<script src="jquery-1.11.1.js"></script>2) 入口函数
$(document).ready(function () { });3) 功能实现
$("#btnShowDiv").click(function () { $("div").show(1000); }); -
div动态展示案例中JavaScript与jquery的对比
JavaScript
jquery
入口函数
只能有一个，如果有多个，后面的会覆盖前面
可以有多个，并且不会发生覆盖的情况
代码容错性
代码容错性差，代码出现错误，会影响到后面代码的运行。
代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性
兼容性差，比如火狐不支持innerText
对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性
DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦
DOM操作简单，支持隐式迭代，实现动画非常简单。
-
jQuery详细解释
版本介绍
下载jquery
官网下载地址：http://jquery.com/download/
大版本分类
jquery大版本分为1.x和2.x和3.x
区别：2.x3.x版本不再支持IE6/7/8，在中国，用的最多的还是1.x版本
同一版本分类
jQuery每一个版本又分为压缩版和未压缩版：
jquery.js：未压缩版本（开发版本），代码可读性高，推荐在开发和学习阶段使用，方便查看源代码。
jquery.min.js：压缩版本，去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符，基本没有可读性，推荐在项目生产环境使用，因为文件较小，减少网络压力。
关于jquery3.0
翻译：jquery3.0现在发布了，这个版本自从2014年10月就开始测试了，我们的目标是创建一个更苗条、更快的jquery版本（并且能向后兼容）。我们已经移除了IE旧版本的解决方案，并且带来了一些较为现代的web API，但这是有道理的。3.0是2.x分支的延续，但是有一些突破性的改变。但是1.12和2.2分支将会在同一时间继续获得关键性的支持补丁。但是他们不会再有任何新的功能和重大的修订。jQuery3是jQuery的未来，如果你需要兼容IE6-8，你可以继续使用1.12版本。 -
jQuery入口函数的两种写法
//第一种写法 $(document).ready(function() { }); //第二种写法 $(function() { });对比JavaScript的入口函数jQuery的入口函数,执行时机
1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。 -
了解jQuery的$符号 $是什么
其实$就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：
$(function() {});//参数是function，说明是入口函数 $(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素 $(“div”);//查找所有的div元素 $(document).ready(funciton(){})//将document转换成jQuery对象补充
$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。 -
jQuery对象与DOM对象之间的转换（难点）
Ø 什么是DOM对象（js对象）？
使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
dom对象只可以使用dom对象的方法和属性
Ø 什么是jquery对象？
jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jquery对象只能使用jquery对象的方法
Ø 深入了解jQuery对象
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
联想记忆：衣服和洗衣机的关系
Ø jQuery对象和DOM对象的相互转换
1. jquery对象转DOM对象
var $li = $(“li”); //第一种方法（推荐使用） $li[0] //第二种方法 $li.get(0)2. DOM对象转jquery对象（联想记忆：我有钱[美元]，所以我的功能就更强大）
var $obj = $(domObj); // $(document).ready(function(){});就是典型的DOM对象转jQuery对象 - 区分jQuery和JavaScript，JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发。
- jQuery选择器（重点）
jQuery选择器概述
什么是jQuery选择器？
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】
jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 - 基本选择器
总结：跟css的选择器用法一模一样。名称
用法
描述
ID选择器
$(“#id”);
获取指定ID的元素
类选择器
$(“.class”);
获取同一类class的元素
标签选择器
$(“div”);
获取同一类标签的所有元素
并集选择器
$(“div,p,li”);
使用逗号分隔，只要符合条件之一就可。获取所有的div、p、li元素
交集选择器（标签指定式选择器）
$(“div.redClass”);
注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。
- 层级选择器
跟CSS的选择器一模一样。名称
用法
描述
子代选择器
$(“ul>li”);
使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器
$(“ul li”);
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
- 过滤选择器
这类选择器都带冒号：
用法
描述
:eq（index）
$(“li:eq(2)”).css(“color”, ”red”);
获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd
$(“li:odd”).css(“color”, ”red”);
获取到的li元素中，选择索引号为奇数的元素
:even
$(“li:even”).css(“color”, ”red”);
获取到的li元素中，选择索引号为偶数的元素
- 筛选选择器(方法)
筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
用法
说明
children(selector)
$(“ul”).children(“li”)
相当于$(“ul>li”)，子类选择器
find(selector)
$(“ul”).find(“li”);
相当于$(“ul li”),后代选择器
siblings(selector)
$(“#first”).siblings(“li”);
查找兄弟节点，不包括自己本身。
parent()
$(“#first”).parent();
查找父亲
eq(index)
$(“li”).eq(2);
相当于$(“li:eq(2)”),index从0开始
next()
$(“li”).next()
找下一个兄弟
prev()
$(“li”).prev()
找上一次兄弟
- jquery操作样式（重点）
- css操作
功能：设置或者修改样式，操作的是style属性。
Ø 设置单个样式
//name：需要设置的样式名称 //value：对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色Ø 设置多个样式
//参数是一个对象，对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "width":"400px", "height":"200px" });Ø 获取样式
//name:需要获取的样式名称 css(name); //案例 $("div").css("background-color");注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
1. 设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。 -
class操作 Ø 添加样式类
//name：需要添加的样式类名，注意参数不要带点. addClass(name); //例子,给所有的div添加one的样式。 $(“div”).addClass(“one”);Ø 移除样式类
//name:需要移除的样式类名 removeClass(“name”); //例子，移除div中one的样式类名 $(“div”).removeClass(“one”);Ø 判断是否有样式类
//name:用于判断的样式类名，返回值为true false hasClass(name) //例子，判断第一个div是否有one的样式类 $(“div”).hasClass(“one”);Ø 切换样式类
//name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。 toggleClass(name); //例子 $(“div”).toggleClass(“one”); -
属性操作
操作属性 //2.1 attr //设置单个属性 //设置多个属性 //获取属性 //2.2 prop //对于布尔类型的属性，disabled，selected，checked，只能用prop //2.3 removeAttr(name):移除某个属性 -
操作节点(10) //4.1 创建节点: $("<span></span>") //4.2 添加节点 append appendTo prepend prependTo after before //4.3 清空内容 empty //4.4 删除节点 remove //4.5 克隆节点 clone -
jQuery特殊属性操作
## val方法
> val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值 $("#name").val(“张三”); //获取值 $("#name").val();## html方法与text方法
> html方法相当于innerHTML text方法相当于innerText
//设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。## width方法与height方法
> 设置或者获取高度
//带参数表示设置高度
$(“img”).height(200); //不带参数获取高度 $(“img”).height();获取网页的可视区宽高
//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height();## scrollTop与scrollLeft
> 设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft();## offset方法与position方法
> offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position(); -
jQuery事件机制
> JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
## jQuery事件发展历程(了解)
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
> 简单事件注册
click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件> bind方式注册事件
//第一个参数：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法 });
缺点：不支持动态事件绑定> delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });缺点：只能注册委托事件，因此注册时间需要记得方法太多了
> on注册事件
## on注册事件(重点)> jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
>
> 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。 $(selector).on( "click", function() {});on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定 $(selector).on( "click",“span”, function() {});on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,selector][,data],handler);## 事件解绑
> unbind方式（不用）
$(selector).unbind(); //解绑所有的事件 $(selector).unbind("click"); //解绑指定的事件> undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( “click” ); //解绑所有的click事件> off方式（推荐）
// 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click");## 触发事件
$(selector).click(); //触发 click事件 $(selector).trigger("click");## jQuery事件对象jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation() 阻止事件冒泡行为 //event.preventDefault() 阻止浏览器默认行为 //return false:既能阻止事件冒泡，又能阻止浏览器默认行为。 -
jQuery补充知识点
## 链式编程
> 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。## each方法
> jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function(index,element){});## 多库共存
> jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c -
插件
## 常用插件
> 插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
>
> jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。### jquery.color.js
> animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
1. 引入jQuery文件 2. 引入插件（如果有用到css的话，需要引入css） 3. 使用插件### jquery.lazyload.js
懒加载插件
### jquery.ui.js插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：[http://api.jqueryui.com/category/all/](http://api.jqueryui.com/category/all/)
其他教程：[jQueryUI教程](http://www.runoob.com/jqueryui/jqueryui-tutorial.html)
基本使用:
2. 1. 引入jQueryUI的样式文件 2. 引入jQuery 3. 引入jQueryUI的js文件 4. 使用jQueryUI功能使用jquery.ui.js实现新闻模块的案例
## 制作jquery插件
> 原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象 $.fn. pluginName = function() {}; -
动画 //show/hide slideDown/slideUp/slideToggle fadeIn/fadeOut/fadeToggle //animate(prop, [speed], [swing/linear], [callback]) //stop() - 动画效果
基本效果
匹配元素从左上角开始变浓变大或缩小到左上角变淡变小
①隐藏元素
除了可以设置匹配元素的display:none外,可以用以下函数
hide(speed,[callback]) 返回值:jQuery 参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number callback:在完成动画时执行的函数,每个匹配元素执行一次
slow=600毫秒 normal=400毫秒 fast=200毫秒
以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。
②显示元素
show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。
③交替显示隐藏
toggle(speed,[callback]) 以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。
$(function(){ $("#hide1").click(function(){$("#1").hide(700)}); $("#show1").click(function(){$("#1").show(700)}); $("#toggle1").click(function(){$("#1").toggle(700)}); })2.滑动效果
①向上收缩效果
slideUp(speed,[callback]) 通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。
②向下展开效果
slideDown(speed,[callback]) 通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。
③交替伸缩效果
slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。
$("#slideup1").click(function(){$("#1").slideUp(700)}); $("#slidedown2").click(function(){$("#1").slideDown(700)}); $("#slidetoggle").click(function(){$("#1").slideToggle(700)});3.淡入淡出效果
通过控制匹配元素的不透明度来实现元素的显示与隐藏
①淡入效果
fadeIn(speed,[callback]) 通过不透明度的变化逐渐将匹配元素显现出来
$("#fadein").click(function(){$("#1").fadeIn("slow")});②淡出效果
fadeOut(speed,[callback]) 通过不透明度的变化逐渐将匹配元素隐藏起来
③自定义不透明度
淡入或淡出的最终结果为自定义的透明度
fadeTo(speed,opacity,[callback]) opacity的值域是0～1之间
4.自定义动画效果
①自定义动画
animate(params,duration,[easing],[callback]) 返回值:jQuery 参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:"100%",width:"70%",fontSize:"4em",color:"white"}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String callback：回调函数，表示函数结束后执行什么
$(function(){ $("#3").mouseover(function(){$(this).stop().animate({left:"0px"}) }).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)}) })以上实现了我们经常在网页上见的滑动框的效果,一开始框在浏览器左侧露出20px,当鼠标滑到上面时框全部露出,鼠标滑出框时框又只露出20px, 我们看到params中的样式属性都出现在了"原来的样子中-style属性中"。另外对于位置变化的动画效果,要先给元素定位,如本处的position:absolute。这个例子中另外一个需要注意的是stop()函数:停止所有在指定元素上正在运行的动画。
$("#3").mouseover(function(){$(this).stop().animate({height:"toggle","width:"toggle"})})如上样式属性值设成toggle的话表示在有和无之间进行切换
②jQuery动画队列
把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行
如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示
$("#id").animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})以上俩动画会同时执行,总耗时1秒,而
$("#id").animate(parmas,{duration:1000}).animate(parmas,{duration:1000})这俩动画会一个一个执行,总耗时2秒
以上所讲的所有动画函数均属于动画队列函数
它们可以被队列控制函数所控制
当然队列控制函数不仅仅只能控制动画队列函数,也能控制其他普通函数
如队列控制函数queue()函数
- 阻止事件冒泡，也能阻止浏览器的默认行为
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://web.itcast.cn" id="link">呵呵</a> <script src="jquery-1.12.4.js"></script> <script> $(function () { $("#link").on("click", function (e) { //阻止 默认 //e.preventDefault(); //e.stopPropagation(); //alert("呵呵"); //return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。 //console.log(e.cancelBubble); //alert("呵呵"); }); $("body").on("click", function () { alert("嘻嘻"); }) }); </script> </body> </html> - 手风琴案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } div { width: 1000px; height: 300px; border: 2px solid #000; margin: 100px auto; overflow: hidden; } ul { width: 1100px; } li { width: 100px; height: 300px; float: left; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="jquery-1.12.4.js"></script> <script src="jquery.accordion.js"></script> <script> $(function () { var colors = ["red","yellow","green", "cyan", "pink","hotpink", "blue", "yellowgreen","greenyellow", "skyblue"]; $("#box").accordion(colors, 20); }); </script> </body> </html> - 新闻模块
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="jquery-ui.css"> <style type="text/css"> * { margin: 0; padding: 0; } .drag-wrapper { width: 400px; margin: 50px auto 0; /*border: 10px solid #000;*/ } .drag-bar { height: 40px; font-size: 20px; font-weight: bold; line-height: 40px; text-align: center; background-color: #E6E6E6; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: move; } .resize-item { height: 212px; border: 1px solid #e6e6e6; } .sort-wrapper { height: 100%; overflow: hidden; } .sort-item { list-style: none; padding-top: 10px; } .sort-item li { height: 40px; line-height: 40px; padding-left: 20px; cursor: pointer; } .sort-item li:hover { background-color: #e6e6e6; } </style> </head> <body> <div class="drag-wrapper"> <div class="drag-bar">可拖动、排序、变形的新闻模块</div> <div class="resize-item"> <div class="sort-wrapper"> <ul class="sort-item"> <li>这是第1条新闻!</li> <li>这是第2条新闻!</li> <li>这是第3条新闻!</li> <li>这是第4条新闻!</li> <li>这是第5条新闻!</li> <li>这是第6条新闻!</li> <li>这是第7条新闻!</li> <li>这是第8条新闻!</li> <li>这是第9条新闻!</li> <li>这是第10条新闻!</li> </ul> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script src="jquery-ui.js"></script> <script> $(function () { $(".drag-wrapper").draggable({ handle:".drag-bar" }); $(".sort-item").sortable({ opacity:0.3 }); $(".resize-item").resizable({ handles:"s" }); }); </script> </body> </html>
-
今天的jquery就学到这儿了