事件处理
onmouseover
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function bigImg(x){
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x){
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>函数 bigImg() 在鼠标指针移动到笑脸图片是触发。</p>
<p>函数 normalImg() 在鼠标指针移出笑脸图片是触发.</p>
</body>
</html>
onmouseout
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function bigImg(x){
x.style.height="64px";
x.style.width="64px";
}
function normalImg(x){
x.style.height="32px";
x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>函数 bigImg() 在鼠标指针移动到笑脸图片是触发。</p>
<p>函数 normalImg() 在鼠标指针移出笑脸图片是触发.</p>
</body>
</html>
onload
脚本执行完后执行事件，如加载图片后弹窗
加载图片
<html>
<head>
<script>
function loadImage()
{
alert("图片加载完成");
}
</script>
</head>
<body>
<img src="w3javascript.gif" onload="loadImage()">
</body>
</html>
addEventListener
添加事件句柄
onfocus
改变文本框颜色
<html>
<head>
<script type="text/javascript">
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text" onfocus="setStyle(this.id)" id="fname">
<br />
Last name: <input type="text" onfocus="setStyle(this.id)" id="lname">
</body>
</html>
字符处理
str->Unicode
取字符串中单个字符的Unicode值charCodeAt()取字符串中所有字符的Unicode值Array.prototype.map.call
indexOf
字符首次出现在字符串中的位置
substr/substring
var str=“Olive”；
Str.substring(3,4);
Str.substring(3,2);
结果：1) “v” 2) 0
说明：当substring有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取到字符串的第几位
var str=“Olive”；
Str.substr(3,2);
Str.substr(3,4);
结果：1) “ve” 2) “ve”
说明：substr有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取多少位字符串
对象处理 - 对象创建
对象字面量和使用new表达式 "var o1 = {}
var o2 = new Object();"
通过函数对象创建 "function f1(){}
var o3 = new f1();"
对象处理 - 修改对象值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改 id="demo" 的 p 元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>
对象处理 - 向HTML对象输入内容
document.getElementById("demo").innerHTML
<p id="demo"></p>
<script>
var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');
document.getElementById("demo").innerHTML = obj.name + "：" + obj.site;
</script>
性能分析 - 页面加载时间
performance类的timing属性
function dosomething() {
var a = 1;
var b = 2;
return a+b;
};
let t0 = window.performance.now();
alert(dosomething());
let t1 = window.performance.now();
console.log(t1-t0);
原型链
继承
function Father() {
this.first_name = 'Donald'
this.last_name = 'Trump'
}
function Son() {
this.first_name = 'Melania'
}
Son.prototype = new Father()
let son = new Son()
console.log(`Name: ${son.first_name} ${son.last_name}`)
Son类继承了Father类的last_name属性，最后输出的是Name: Melania Trump
随机数
Math.random()
<img src="Handler/ValidCode.ashx" onclick="this.src='Handler/ValidCode.ashx?flag=' + Math.random()" title="看不清换一张" /> 标红的参数（随机数）目的是为了让每次访问的地址不一样，这样浏览器就不会读取本地缓存的数据
文件处理 - 文件上传
使用ajax上传 使用formdata上传--可实现异步上传二进制文件
重定向
history.back()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> JSONP </title>
</head>
<body>
<div id = "divCustomers"></div>
<button onclick="logout()">点击我</button>
<script language="javascript">
function logout(){
alert("你确定要注销身份吗？");
window.location.href="logout.asp?act=logout"
}
</script>
</body>
</html>
Jquery相关
事件处理 - Dom操作
document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件
一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）
二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
用jQ的人很多人都是这么开始写脚本的：
$(function(){
// do something
});
其实这个就是jq ready()的简写，他等价于：
$(document).ready(function(){
//do something
})
//或者下面这个方法，jQuer的默认参数是：“document”；
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是：域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom
元素操作 - 通过<button>改变<p>元素内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ss</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello world!");
});
});
</script>
</head>
<body>
<button>设置所有p元素的文本内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
改变元素内容 - .html()
Jquery库地址
baidu - <script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
google - http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
对象操作 - 数组合并
<script>
$(function () {
var arr = $.merge( [0,1,2], [2,3,4] );
$("span").text(arr.join(","));
})
</script>
序列化 - 表单 - .serialize()
表单-》a=1&b=2&c=3&d=4&e=5
Ajax相关
读取txt文件并显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","tt.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
<div id="myDiv"></div>
</body>
</html>
读取json文件并显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function showJson(){
var test;
if(window.XMLHttpRequest){
test = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
test = new window.ActiveXObject();
}else{
alert("请升级至最新版本的浏览器");
}
if(test !=null){
test.open("GET","test.json",true);
test.send(null);
test.onreadystatechange=function(){
if(test.readyState==4&&test.status==200){
document.write(test.responseText);
// var obj = JSON.parse(test.responseText);
// for (var name in obj){
// alert(obj[name].sex);
// }
}
};
}
}
window.onload=function(){
showJson();
};
</script>
</head>
<body>
<div id="myDiv"></div>
<button name="button">Click Me!</button>
</body>
</html>
属性 - async
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行
属性 - data
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
属性 - dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
"xml": 返回 XML 文档，可用 jQuery 处理。
"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
"text": 返回纯文本字符串
属性 - error
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。
这是一个 Ajax 事件
属性 -jsonp
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器
属性 -jsonpCallback
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名
属性 - success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件
属性 - type
类型：String
默认值: ""GET"")。请求方式 (""POST"" 或 ""GET"")， 默认为 ""GET""。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
属性 - url
类型：String
默认值: 当前页地址。发送请求的地址。
属性 - xhr
类型：Function
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。"
函数
回调函数 如果要处理 $.ajax() 得到的数据，则需要使用回调函数：beforeSend、error、dataFilter、success、complete
error 在请求出错时调用。传入 XMLHttpRequest 对象，描述错误类型的字符串以及一个异常对象（如果有的话）
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串
XML相关
从服务器去XML数据展示在前台页面
<html>
<head>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for IE7, Firefox, Opera, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('A1').innerHTML=xmlhttp.status;
document.getElementById('A2').innerHTML=xmlhttp.statusText;
document.getElementById('A3').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving XML data:" + xmlhttp.statusText);
}
}
}
</script>
JSON相关
数组-》Json json_encode echo json_encode($result_set,JSON_UNESCAPED_UNICODE); --JSON_UNESCAPED_UNICODE中文不转换为Unicode
ActionScript3相关
事件包 flash.events.MouseEvent 文件读写包 flash.net.URLLoader 加载文本文件、二进制数据或外部变量的值 flash.net.URLRequest flash.net.URLLoaderDataFormat flash.net.FileReference