编程语言 - 脚本编程 - 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="" src="smiley.gif" alt="Smiley" width="" height="">
<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="" src="smiley.gif" alt="Smiley" width="" height="">
<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(,);
Str.substring(,);
结果：) “v” )
说明：当substring有两个参数时，第一个参数表示从字符串的第几位开始截取，第二个参数表示截取到字符串的第几位
var str=“Olive”；
Str.substr(,);
Str.substr(,);
结果：) “ve” ) “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 = ;
var b = ;
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( [,,], [,,] );
$("span").text(arr.join(","));
})
</script> 序列化 - 表单 - .serialize()
表单-》a=&b=&c=&d=&e=
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== && xmlhttp.status==){
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==&&test.status==){
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 = "loaded"
if (xmlhttp.status==)
{// 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
编程语言 - 脚本编程 - JavaScript/Jquery/Ajax/XML/JSON/ActionScript3的更多相关文章
- Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- Spring MVC Controller与jquery ajax请求处理json
在用 spring mvc 写应用的时候发现jquery传递的[json数组对象]参数后台接收不到,多订单的处理,ajax请求: "}]}]} $.ajax({ url : url, typ ...
- Jquery Ajax 和json用法
向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuery 添加到网页中: <head& ...
- Jquery Ajax 提交json数据
在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...
- jQuery.ajax() datatype:“json" 转换失败
当使用jQuery.ajax() 时,如果设置dataType:"json",如果返回的字符转换出错则不会调用success方法,而进入error方法,控制台中也不会出现错误信息 ...
- jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
- JQuery ajax返回JSON时的处理方式
最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...
- Django & JavaScript 用Ajax实现JSON数据的请求和响应
[描述] 1.Server端定义了两个字段:Article.title 和 Article.content 2.客户端用JavaScript Ajax异步加载请求服务器的JSON数据 效果是点击按钮从 ...
随机推荐
- 给定两个list A ,B，请用找出 A ,B中相同的元素，A ,B中不同的元素 ？？
A.B 中相同元素:print(set(A)&set(B)) A.B 中不同元素:print(set(A)^set(B))
- 说明一下 os.path 和 sys.path 分别代表什么？
os.path 主要是用于对系统路径文件的操作. sys.path 主要是对Python解释器的系统环境参数的操作(动态的改变Python解释器搜索路径).
- asp.net 关于SessionId
原文:https://www.cnblogs.com/zhang1999/p/7278020.html 登陆页面使用Session存储验证码,导致会话产生SessionId,从而导致会话固定,登陆后用 ...
- lLinux的常用命令
命令基本格式: 命令提示符:[root@localhost ~]# root 代表当前的登录用户(linux当中管理员账号是root) @ 无实际意义 localhost ...
- openstack stein部署手册 4. glance
# 建立数据库用户及权限 create database glance; grant all privileges on glance.* to glance@'localhost' identifi ...
- [BJWC2010]严格次小生成树（LCA，最小生成树）
[BJWC2010]严格次小生成树 题目描述 小C最近学了很多最小生成树的算法,Prim算法.Kurskal算法.消圈算法等等.正当小C洋洋得意之时,小P又来泼小C冷水了.小P说,让小C求出一个无向图 ...
- jmeter性能工具 之监控cpu，内存等信息（四）
1.jmeter 本身不支持直接监控 cpu,内存等信息,需要去官网下载控件 JMeterPlugins-Standard-1.4.0.zip 解压好将其中\lib\ext\JMeterPlug ...
- 启动模式：uefi, legacy，以及GRUB命令使用
机器启动模式:uefi, legacy 设置入口:BIOS:boot mode 磁盘分区表格式: gpt uefi所使用(此种模式下,grub只能识别gpt格式的boot引导项) mbr legacy ...
- 玩转MaxCompute studio SQL编辑器
SQL因其简单易学的特点,是用户与MaxCompute服务交互的主要手段.如何帮助用户高效愉快的编写SQL是MaxCompute studio的核心使命,下面就让我们来一探究竟: 忘记语法 相信大家都 ...
- centos 配置vlan
https://access.redhat.com/documentation/zh-cn/red_hat_enterprise_linux/7/html/networking_guide/sec-c ...