JavaScript使用的三种方式：事件定义式、嵌入式、文件调用式。
JavaScript数据类型：（变量无类型，数据有类型。）
- 特殊类型：null / undefined
- 内置对象（基本类型）：
- String：特殊字符需转义，常用：\n，\\，\'，\"。单双引号嵌套时无需转义。
- Number：64位，不区分整数和浮点数。默认10进制，16进制0x开头，8进制0开头。
- Boolean：
- Array：
- Math：
- Date：
- RegExp：
- Function：
- 外部对象：window / document
- 自定义对象：Object
自动类型转换：不同数据类型数据相加时自动类型转换：
数字+字符串：数字转字符串；
数字+布尔值：布尔值转数字true=1，false=0；
字符串+布尔值：布尔值转字符串true或false；
布尔值+布尔值：布尔值转数字1或0。
数据类型转换函数：
toString(Object)：所有类型转String。
parseInt(Object)：取整函数，不能取整则返回NaN。
parseFloat(Object)：强制转换成浮点数，不能转换则返回NaN。
typeof(Object)：查询当前类型，返回 string / number / boolean / object / function / undefined 。
isNaN(Object)：判断是否非数字，是非数字则返回true，不是非数字则返回false。
运算符：
赋值运算：=
算术运算：+ - * / % ++ --
关系运算：> < >= <= == != ===（全等：类型相同，数值相同） !==（不全等）
逻辑运算：|| && ！
条件运算（三目运算/三元运算）：表达式 ? 表达式1 : 表达式2
流程控制：if语句、switch-case语句、for语句、while语句、do-while语句。
与Java的区别：JS的条件表达式可以是任意表达式，即可以返回任何类型的值：返回true和“非空值”时，条件为真；返回false和“空值”时，条件为假。空值有：0 / null / "" / undefined / NaN 。
String对象：
创建String对象两种方式：var str1 = "Hello World"; var str2 = new String("Hello World";
String对象的属性：str.length
String对象常用方法：
str.toLowerCase()：转小写。
str.toUpperCase()：转大写。
str.charAt(index)：返回指定位置的字符。
str.charCodeAt(index)：返回指定位置字符的Unicode编码。
str.indexOf(findstr, [index])：返回指定子串首现之索引[从index处开始查找]，若无则返回-1。
str.lastIndexOf(findstr, [index])：返回指定子串最后出现之索引[从index处开始查找]，若无则返回-1。
str.substring(start, [end])：返回指定下标（含）至末尾，[或指定区间（含头不含尾）]之子串。
str.replace(findstr, tostr)：替换子字符串，将str中的findstr替换为tostr，返回替换后的str。
str.split(bystr, [howmany])：拆分字符串，用bystr分割，[指定返回数组的最大长度]，返回拆分后的字符数组。
Number对象：
创建Number对象：var num = 1234.567;
Number对象常用方法：
num.toFixed(n)：转换为字符串，并保留n位小数（如有必要，舍入或补0）。
Boolean对象：
true / false。参与运算时自动转型true=1，false=0。
Array对象：
创建Array对象四种方式：
var arr1 = new Array();
var arr2 = new Array(3);
var arr3 = new Array(1, "a", true);
var arr4 = [1, "a", true];（一个数组可装任意类型数据）
Array对象的属性：arr.length （数组的长度可变）
访问数组元素：arr[i]
Array对象常用方法：
arr.reverse()：反转数组。
arr.sort([sortfunc])：数组排序[按函数]。无参则按Unicode编码排序。Number类型会先转化成字符串再排序，欲按Number类型排序则需传入参数（整个函数或函数名）：
function sortfunc(a, b){return a-b;}
Math对象：
无需创建对象：直接把Math作为对象使用就可以调用其所有属性和方法！
Math对象常用属性：Math.PI、Math.E
Math对象常用方法：
三角函数：Math.sin(x)、Math.cos(x)、Math.tan(x)等。
计算函数：Math.sqrt(x)、Math.log(x)、Math.exp(x)等。
比较函数：Math.abs(x)、Math.max(x, y, …)、Math.random()、Math.round(x)等。
Date对象：
创建Date对象两种方式：var now = new Date(); var date = new Date("2008/8/8 08:08");
Date对象常用方法：
读写时间毫秒数：date.getTime()、date.setTime(毫秒)
读写时间分量：date.getDate()、date.getDay()、date.getMonth() + 1、date.getFullYear()等；
date.setDate(1~31)、date.setMonth(0~11)、date.setFullYear(y, [m, [d]])等。
转换为字符串：date.toString()、date.toLocaleTimeString()、 date.toLocaleDateString()
RegExp对象：
创建RegExp对象两种方式：var reg1 = /pattern/flags; var reg2 = new RegExp("pattern", ["flags"]); flags为g时，设置当前匹配为全局模式；flags为i时，忽略匹配中的大小写检测。
RegExp对象常用方法：
reg.exec(str)：检索str中指定的值，返回找到的值。
reg.test(str)：检索str中指定的值，返回true或false。
String对象与正则表达式：
str.replace(regexp, tostr)：返回替换后的结果。
str.match(regexp)：返回匹配字符串的数组。
str.search(regexp)：返回匹配字符串的首字符位置索引。
Function对象：
创建Function对象：function 函数名([参数]) {函数体; return 返回值;}
使用Function对象直接创建函数：
var functionName = new Function(arg1, …, argN, functionBody);
例子：var add = new Function("x", "y", "return(x+y);");
创建匿名函数：
var func = function(arg1, …, argN) {func_body; return value;}
例子：var add = function(x, y) {return x + y;};
与Java函数的区别：
- 函数返回值：若未写return语句，默认返回undefined；
- 没有重载：只要函数名一样，无论传入多少参数，都是调用同一函数；未接收到实参的参数值是undefined；所有参数传递给arguments数组对象，在函数中可使用arguments访问所有参数（arguments.length：参数个数；arguments[i]：第i个参数）。
常用的全局函数：parseInt / parseFloat / isNaN / eval
eval函数：用于计算表达式字符串，或者用于执行字符串中的JS代码。只接受原始字符串作为参数；如果参数中没有合法的表达式或语句，则抛出异常。例子：eval(1+1);
BOM：Browser Object Model 浏览器对象模型
DOM：Document Object Model 文档对象模型
window对象：表示浏览器窗口或框架，在 <body> 或 <frameset> 出现时自动创建。所有JS全局对象、函数、变量均自动成为window对象成员。
常用属性：document对象、history对象、location对象、screen对象、navigator对象。
常用方法：
alert()：提示对话框。
confirm()：确认对话框。按“确定”返回true，其他操作返回false。
setTimeout(exp, time)：一次性定时器。一次性触发代码exp，等待时间为time毫秒。返回已启动的定时器对象。例子：var tID = setTimeout("alert('Hello!');", 3000);
clearTimeout(tID)：停止启动的定时器tID。
setInterval(exp, time)：周期性定时器。周期性触发代码exp，周期为time毫秒。返回已启动的定时器对象。例子：var tID = setInterval("alert('Hello!');", 3000);
clearInterval(tID)：停止启动的定时器tID。
history对象：
常用属性：length：浏览器历史列表中url的数量。
常用方法：back()、forward()、go(num) （num负数为back，正数为forward）
location对象：
常用属性：href：当前网页地址。常用于获取或改变当前地址：location.href="http://www.google.com";
比较：
window.location.href="https://www.google.com"; //在当前窗口中打开
window.open("https://www.google.com"); //在新窗口中打开
常用方法：reload()
screen对象：
常用属性：width / height / availWidth / availHeight
navigator对象：
常用属性：userAgent：浏览器用于 HTTP 请求的用户代理头的值。
document对象：
| 类型 | nodeName值 | nodeType值 |
| 元素节点 | 标签名 | 1 |
| 属性节点 | 属性名 | 2 |
| 文本节点 | #text | 3 |
| 注释节点 | 8 | |
| 文档节点 | #document | 9 |
修改节点：
读写节点内容：（只有双标签元素有内容）
innerText：元素双标签之间的文本（不含子标签名）
innerHTML：元素双标签之间的HTML（含有子标签名）
读写节点值：只有除label外的表单控件有值（input / select / textarea）：节点.value
读写属性值：
读：节点.getAttribute("属性名");
写：节点.setAttribute(”属性名”,”属性值”);
删：节点.removeAttribute("属性名");
或者：节点.属性名; 节点.属性名 = ""; （此方式不正规）
document.title = ""：设置网页标题
读写元素节点的样式：node.style.color = ""; node.style.fontSize = ""; node.className = "";
查询节点：
通过id查找：document.getElementById("id名"); （如果id名错误，返回null）
通过name查找：document.getElementsByName("name名"); 返回节点列表（常用于取单选框、多选框）
通过标签名查找：document或指定节点.getElementsByTagName("标签名"); 返回节点列表（节点列表长度属性：length；定位具体元素：节点列表[index]）
通过层次（节点关系）查找：
查询单个父节点：parentNode
查询多个子节点：node.getElementsByTagName(“...”); 不推荐childNodes，因其返回值带文本节点（空格、换行）。
增加节点：
快捷方法：用innerText和innerHTML。
创建新节点：document.createElement(elementName); 返回新创建的节点
追加子节点：node.appendChild(newNode); newNode位于node下所有子节点之后
插入子节点：node.insertBefore(newNode, refNode); newNode位于node下refNode前
删除节点：
删除子节点：node.removeChild(childNode);
删除同级目标节点：node.parentNode.removeChild(destNode);
创建对象：
| 直接创建对象 | 使用构造器创建对象：function objName(args…){} |
| function TestObject() { //创建对象 var personObj = new Object(); //添加属性 personObj.name = "John"; personObj.age = 50; //添加方法 personObj.say = new Function("alert('Hello!');"); //测试 personObj.say(); //Hello! alert(personObj.age); //50 } | function Person(n, a) { //定义name和age属性 this.name = n; this.age = a; //定义方法showName this.showName = function() { alert("My Name is " + this.name); }; //定义方法introduceSelf this.introduceSelf = introFunc; } function introFunc() { alert(this.name + ":" + this.age); } //测试 function test() { var o1 = new Person("Mary", 18); alert(o1.age); o1.showName(); o1.introduceSelf(); } |
| 使用JSON创建对象： | |
| var obj = {"name" : "Jerry", "age" : 29}; |
JavaScript事件
鼠标事件：onclick / ondblclick / onmousedown / onmouseup / onmouseover / onmouseout
键盘事件：onkeydown / onkeyup
状态事件：onload / onchange / onblur / onfocus / onsubmit
事件定义：
在HTML属性定义中直接处理事件：οnclick="method();"
JS代码中动态定义：btnObj.onclick = method; 或者：btnObj.onclick = function(){…};
取消事件：onXXX = "return false;"
例子：
HTML代码：<input type="submit" value="删除" οnclick="return deleteData();" />
JS代码：function deleteData(){return confirm("确定要删除吗？");} （两处都要return）
event对象：任何事件触发后都会产生一个event对象，event对象记录事件触发时的鼠标位置、键盘按键状态和触发对象等信息。
常用属性：clientX / clientY / cancelBubble
获取鼠标位置：
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取鼠标位置</title> <script> //非火狐浏览器（火狐JS中不能直接使用event关键字） function mouseinfoNotForFirefox() { alert(event.clientX + ":" + event.clientY); } //所有浏览器 function mouseinfoForAllBrowser(e) { alert(e.clientX + ":" + e.clientY); } </script> </head> <body> <p onclick="alert(event.clientX + ':' + event.clientY);">点我获取鼠标位置</p> <p onclick="mouseinfoNotForFirefox();">非火狐浏览器点我获取鼠标位置</p> <p onclick="mouseinfoForAllBrowser(event);">所有浏览器点我获取鼠标位置</p> </body> </html> |
获取事件源（事件源：触发事件的元素/事件的目标节点）：
非火狐浏览器：event.srcElement 所有浏览器：event.target
| <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取事件源</title> <script> //非火狐浏览器（火狐浏览器不识别e.srcElement） function getEventSrcElementNotForFirefox(e) { alert(e.srcElement.nodeName); //DIV } //所有浏览器 function getEventSrcElementForAllBrowser(e) { alert(e.target.nodeName); //DIV } //牛逼的写法，所有浏览器 function getEventSrcElement(e) { var obj = e.srcElement || e.target; alert(obj.nodeName); //DIV } </script> </head> <body> <div onclick="getEventSrcElement(event);">获取事件源</div> <div onclick="getEventSrcElementNotForFirefox(event);">非火狐浏览器</div> <div onclick="getEventSrcElementForAllBrowser(event);">所有浏览器</div> </body> </html> |
取消事件冒泡机制：event.stopPropagation(); / event.cancelBubble = true;
冒泡机制：底部对象事件发生时会依次激活所有父层对象定义的同类事件。
| <div style="border: 1px solid black; height: 100px;" onclick="alert('div');"> <p style="border: 1px solid red; height: 50px;" onclick="alert('p'); event.stopPropagation();"> <input type="button" value="button" onclick="alert('button'); event.cancelBubble = true;" /> </p> </div> |
使链接成为按钮：<a href=”javascript:void(0)” οnclick=”del();”>
-
- 奇技淫巧
屏幕录制（无声音）
将下列代码粘贴到浏览器控制台后按Enter键：
| var body = document.body; body.addEventListener("click",async function(){ var stream = await navigator.mediaDevices.getDisplayMedia({video: true}); var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9") ?"video/webm; codecs=vp9" :"video/webm"; var mediaRecorder = new MediaRecorder(stream, {mimeType: mime}); //录制 var chunks = []; mediaRecorder.addEventListener('dataavailable', function(e) { chunks.push(e.data) }) //停止 mediaRecorder.addEventListener('stop', function(){ var blob = new Blob(chunks, {type: chunks[0].type}); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'video.webm'; a.click(); }) //手动启动 mediaRecorder.start() }); |
jQuery简介
什么是jQuery
jQuery是一个开源的JavaScript框架，一个轻量级的JS库。
它封装了JS、CSS、DOM，提供了一致的、简洁的API。
兼容CSS3，及各种浏览器。
使用户更方便地处理HTML、Events、实现动画效果，并且方便地为网站提供AJAX交互。
使用户的HTML页面保持代码和HTML内容分离。
核心理念：write less, do more。
2006年1月发布。
注：jQuery 2.x开始不再支持IE6,7,8。
jQuery使用步骤
引入jQuery的js文件
使用选择器定位节点
调用jQuery方法操作节点
jQuery对象
什么是jQuery对象
jQuery为了解决浏览器兼容问题而提供的一种统一封装后的对象描述，通过jQuery选择器选中的对象即为jQuery对象。
jQuery方法为jQuery对象所特有，大部分方法返回值类型也是jQuery对象，所以方法可以连缀调用：jQuery对象.方法().方法().方法()......
jQuery对象与DOM对象的关系
jQuery对象本质为DOM对象数组，它在该数组上扩展了操作数组元素的方法：
obj.length 获取数组长度
obj.get(index) / obj[index] 获取数组中某DOM对象
DOM对象转换为jQuery对象
$(DOM对象)
什么是jQuery选择器
定位元素，施加行为，将内容与行为分离。
类似于CSS选择器（定位元素，施加样式，将内容与样式分离）。
jQuery选择器的种类（基本选择器/层次选择器/过滤选择器/表单选择器）
| 选择器 | 实例 | 选取 |
| 基本选择器 | ||
| * | $("*") | 所有元素 |
| element | $("p") | 所有 <p> 元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | class="intro" 的所有元素 |
| element,#id,.class | $("p,#lastname,.intro") | 标签为 <p> 或 id 为 "lastname" 或 class 为 "intro" 的所有元素 |
| 层次选择器 | ||
| parent > child | $("div > p") | <div> 元素的直接子元素的所有 <p> 元素 |
| parent descendant | $("div p") | <div> 元素的后代的所有 <p> 元素 |
| element + next | $("div + p") | 每个 <div> 元素相邻的下一个 <p> 元素 |
| element ~ siblings | $("div ~ p") | <div> 元素同级的后面所有 <p> 元素 |
| 基本过滤选择器 （常用于表格和列表） | ||
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |
| href="javascript:if(confirm('http://www.w3cschool.cc/jquery/xml-elements.html%20%20\n\n���ļ�����%20Teleport%20Ultra%20����,%20��Ϊ%20������,%20�����������,%20����Ŀ����ֹͣ��%20%20\n\n�����ڷ������ϴ���?'))window.location='http://www.w3cschool.cc/jquery/xml-elements.html'" :root | $(":root") | 文档的根元素 |
| :header | $(":header") | 所有标题元素 <h1>, <h2> ... |
| :animated | $(":animated") | 所有动画元素 |
| :focus | $(":focus") | 当前具有焦点的元素 |
| 内容过滤选择器 | ||
| :empty | $(":empty") | 所有空元素 |
| href="javascript:if(confirm('http://www.w3cschool.cc/jquery/xml-usage.html%20%20\n\n���ļ�����%20Teleport%20Ultra%20����,%20��Ϊ%20������,%20�����������,%20����Ŀ����ֹͣ��%20%20\n\n�����ڷ������ϴ���?'))window.location='http://www.w3cschool.cc/jquery/xml-usage.html'" :parent | $(":parent") | 所有非空元素 |
| :contains(text) | $(":contains('Hello')") | 所有包含文本 "Hello" 的元素 |
| :has(selector) | $("div:has(p)") | 所有包含有 <p> 元素在其内的 <div> 元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的输入元素 |
| 可见性过滤选择器 | ||
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素（另见隐藏框） |
| :visible | $("table:visible") | 所有可见的表格 |
| 属性过滤选择器 | ||
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='default.htm']") | 所有带有 href 属性且值等于 "default.htm" 的元素 |
| [attribute!=value] | $("[href!='default.htm']") | 所有带有 href 属性且值不等于 "default.htm" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有带有 href 属性且值以 ".jpg" 结尾的元素 |
| [attribute|=value] | $("[title|='Tomorrow']") | 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串 |
| [attribute^=value] | $("[title^='Tom']") | 所有带有 title 属性且值以 "Tom" 开头的元素 |
| [attribute~=value] | $("[title~='hello']") | 所有带有 title 属性且值包含单词 "hello" 的元素 |
| [attribute*=value] | $("[title*='hello']") | 所有带有 title 属性且值包含字符串 "hello" 的元素 |
| 表单选择器 | ||
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 匹配文本框 |
| :password | $(":password") | 匹配密码框 |
| :radio | $(":radio") | 匹配单选框 |
| :checkbox | $(":checkbox") | 匹配多选框 |
| :submit | $(":submit") | 匹配提交按钮 |
| :reset | $(":reset") | 匹配重置按钮 |
| :button | $(":button") | 匹配普通按钮 |
| :image | $(":image") | 匹配图像形式的提交按钮 |
| :file | $(":file") | 匹配文件框 |
| :hidden | $(":hidden") | 匹配隐藏框（另见不可见元素） |
| :enabled | $(":enabled") | 所有启用的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有选定的 input 元素 |
| :checked | $(":checked") | 所有选中的 input 元素 |
| 其他选择器 | ||
| :first-child | $("p:first-child") | 属于其父元素的第一个子元素的所有 <p> 元素 |
| :first-of-type | $("p:first-of-type") | 属于其父元素的第一个 <p> 元素的所有 <p> 元素 |
| :last-child | $("p:last-child") | 属于其父元素的最后一个子元素的所有 <p> 元素 |
| :last-of-type | $("p:last-of-type") | 属于其父元素的最后一个 <p> 元素的所有 <p> 元素 |
| :nth-child(n) | $("p:nth-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素 |
| :nth-last-child(n) | $("p:nth-last-child(2)") | 属于其父元素的第二个子元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :nth-of-type(n) | $("p:nth-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素 |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | 属于其父元素的第二个 <p> 元素的所有 <p> 元素，从最后一个子元素开始计数 |
| :only-child | $("p:only-child") | 属于其父元素的唯一子元素的所有 <p> 元素 |
| :only-of-type | $("p:only-of-type") | 属于其父元素的特定类型的唯一子元素的所有 <p> 元素 |
| href="javascript:if(confirm('http://www.w3cschool.cc/jquery/xml-attributes.html%20%20\n\n���ļ�����%20Teleport%20Ultra%20����,%20��Ϊ%20������,%20�����������,%20����Ŀ����ֹͣ��%20%20\n\n�����ڷ������ϴ���?'))window.location='http://www.w3cschool.cc/jquery/xml-attributes.html'" :lang(language) | $("p:lang(de)") | 所有带有以 "de" 开头的 lang 属性值的 <p> 元素 |
文档加载后运行：$(function(){...}); 简写自：$(document).ready(function(){...}); // document可省略
注：与window.οnlοad=function(){};的区别：
| $(function(){...}); | window.οnlοad=function(){}; | |
| 何时执行 | DOM加载后就执行 | 所有内容（包括图片等媒体资源）加载后才执行 |
| 执行几个 | 有多少个就执行多少个 | 有多个只执行最后一个 |
读写节点
读写
读写节点的HTML内容： obj.html() / obj.html("<span>123</span>")
读写节点的文本内容： obj.text() / obj.text("123")
读写节点的value属性值： obj.val() / obj.val("abc")
读写节点的属性值： obj.attr("属性名") / obj.attr("属性名","属性值")
增删节点
创建节点： $("节点内容") 例：$("<span>abc</span>")
追加幼子： parent.append(obj)
插入长子： parent.prepend(obj)
追加弟弟： parent.after(obj)
插入哥哥： parent.before(obj)
删除节点： obj.remove()
删除指定节点： obj.remove(selector)
清空节点： obj.empty()
样式操作
追加指定样式： addClass("")
移除指定样式： removeClass("")
移除所有样式： removeClass()
切换样式： toggleClass("")
判断是否有某样式： hasClass("")
读取css值： css("")
设置多个样式： css("","")
遍历节点
直接子节点： children() / children(selector)
下一个兄弟节点： next() / next(selector)
上一个兄弟节点： prev() / prev(selector)
所有兄弟： siblings() / siblings(selector)
查找指定所有后代： find(selector)
父节点： parent()
事件处理
实现事件绑定
语法： $obj.bind(事件类型, 事件处理函数);
如： $obj.bind("click", fn);
简写形式： $obj.click(fn);
注： $obj.click()则代表触发了click事件。
获取事件对象event
只需为事件处理函数传递任意一个参数
如：$obj.click(function(e){...})
e是事件对象，但已经经过jQuery对底层事件对象的封装
封装后的事件对象可以方便地兼容各浏览器
事件对象的常用属性
获取事件源： e.target，返回值是DOM对象
获取鼠标点击的坐标： e.pageX / e.pageY
事件冒泡
什么是事件冒泡：子节点产生的事件会依次向上抛给父节点
如何取消事件冒泡：在事件处理函数中添加：e.stopPropagation();
合成事件
模拟光标悬停事件： hover(mouseenter, mouseleave)
在多个事件响应中切换： toggle()
模拟操作
语法: $obj.trigger(事件类型);
如： $obj.trigger("focus");
简写形式： $obj.focus();
显示、隐藏的动画效果
show() / hide()
作用：通过同时改变元素宽高来实现显示或隐藏
用法：$obj.show(执行时间, 回调函数);
执行时间：slow，normal，fast或毫秒数
回调函数：动画执行完毕后要执行的函数
上下滑动式的动画效果
slideDown() / slideUp()
作用：通过改变高度来实现显示或隐藏
用法同show()/hide()
淡入淡出式的动画效果
fadeIn() / fadeout()
作用：通过改变不透明度opacity来实现显示或隐藏
用法同show()/hide()
自定义动画效果
animate(偏移位置, 执行时间, 回调函数);
偏移位置：{}描述动画执行之后元素的样式
执行时间：毫秒数
回调函数：动画执行完毕后要执行的函数
示例：
$("div).click(function(){
$(this).animate({"left":"500px"}, 4000);
$(this).animate({"top":"300px"}, 2000);
});
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
