编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3
事件处理
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
