javascript基础拾遗(十一)
1.DOM操作
1）查找
//根据id查找
document.getElementById()
//根据html标签查找
documnet.getElementByTagName()
//根据样式class查找
document.getElementsByClassName()
2)更新
DOM元素的innerHTML,innerText,textContent属性
var p = document.getElementById("p-id")
p.innerHTML = 'ABC'
P.innerHTML = '<div>ABC</div>'
3)插入
appendChild,insertBefore
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);
var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
4)删除
removeChild,children
2.html输入控件
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="hidden">
<select>
获取值
<input type="text" id="email">
var input = document.getElementById('email');
input.value;
设置值
<input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com';
HTML5新增控件
date,datetime,datetime-local,color
<input type="date" value="2017-12-08">
<input type="datetime-local" value="2017-12-08T14:53:00">
<input type="color" value="#ff0000">
canvas是HTML5新增的组件，它就像一块幕布，可以用javascript在上面绘制各种2D,3D的图形和动画。
优化了以前只能借助Flash和Javascript绘图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form onsubmit="return login()">
<canvas id="canvas_test" width="200" height="200">
你的浏览器不支持canvas
</canvas>
</form>
<script type="text/javascript">
var canvas = document.getElementById("canvas_test")
var context = canvas.getContext('2d')
context.clearRect(0, 0, canvas.width, canvas.height);
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.shadowBlur = 2;
context.shadowColor = '#666666';
context.font = '24px Arial';
context.fillStyle = '#333333';
context.fillText('带阴影的文字', 20, 40);
</script>
</body>
</html>
3.提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form onsubmit="return login()">
<input type="text" id="username" name="username">
<!--没有name属性的控件不会被提交，使用hidden保存md5加密后的密码，并提交-->
<input type="password" id="password">
<input type="hidden" id="md5-pasword" name="md5-pasword" >
<button type="submit"></button>
</form>
<script type="text/javascript">
function login() {
var password = document.getElementById("password")
//密码不明文传输
var md5_password = document.getElementById("md5-password")
md5_password.value = toMd5(password)
return true
}
</script>
</body>
</html>
4.操作文件
上传文件必须使用控件
上传文件必须使用multipart-data编码方式
文件上传后有服务端处理，JavaScript可以再提交文件时，对扩展进行检查，防止文件类型不对。
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}
在HTML5中，定义了两个对象，File,FileReader，用来读取文件内容。
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
reader.readAsDataURL执行的结果为一个base64编码的字符串，解码就可以得到图片二进制数据。
reader.onload定义了reader.readAsDataURL执行完毕的回调函数。
5.AJAX异步网络请求
AJAX用于一个网络请求，是异步的，需要注册回调函数
jquery框架ajax请求方式
$.ajax({
url: "http://localhost:20000/icba/sentencees",
type: 'GET',
success: function(data) {
},
error: function() {
console.log(data);
}
})
javascript ajax请求方式
var request = new XMLHttpRequest()
request.onreadystatechange = function () {
if(request.readyState == 4){
if(request.status == 200){
alert(request.responseText)
return request.responseText
}
else{
return request.status
}
}
else{
//fail
}
}
request.open('GET','http://localhost:20000/yh_test')
request.send()
访问安全限制
javascript在发送ajax请求时，请求地址url域名必须和当前页面域名完全一致，
这是因为浏览器的同源策略导致的，解决方法有四个：
1)在同源域名下架设代理服务器转发，通过后台服务器请求，避免了前端ajax直接请求（这是最常用的方法）
2)服务端响应允许跨域(较多使用)
在response的headers中添加
self.set_header("Access-Control-Allow-Origin", "*")
self.set_header("Access-Control-Allow-Headers", "Content-Type, Authorization")
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PATCH, DELETE')
self.set_header("Access-Control-Max-Age", "1728000")
3)JSONP的方式
JSONP的原理在http://www.cnblogs.com/shijingjing07/p/5929016.html一文已有阐述
4)使用flash插件发送http请求，可以绕过浏览器限制(flash已被淘汰)
javascript基础拾遗(十一)的更多相关文章
- javascript基础拾遗(十三)
1.jQuery的特点 jQuery是目前非常流行的javascript库,理念是"Write Less,Do More" 1)消除浏览器差异 2)简洁的操作DOM方法 3)轻松实 ...
- javascript基础拾遗(十二)
1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...
- javascript基础拾遗(十)
1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...
- javascript基础拾遗(七)
1.对象的继承__proto__ var Language = { name: 'program', score: 8.0, popular: function () { return this.sc ...
- javascript基础拾遗(六)
1.Date内置对象 获取系统时间 var now = new Date() console.log(now) console.log(now.getDate()) console.log(now.g ...
- javascript基础拾遗(五)
1.什么是箭头函数 ES6引入的一种新的函数,类似匿名函数,x=>xx 箭头左端为函数参数,右端为函数体 相当于 function (x){ retutn xx } 2.箭头函数的特点 更简洁 ...
- javascript基础拾遗(二)
1.对象定义 定义属性 var language = { name:'javascript', score:9.0 }; console.log(language.name) console.log( ...
- javascript基础拾遗(一)
1.判断变量类型 var num = '123'; if(typeof num == 'number'){ alert('this is a number'); } else{ throw 'this ...
- javascript基础拾遗(九)
1.class关键字 ES6引入了新的class关键字编写对象 function Language(name){ this.name = name this.score = 8.0 } Languag ...
随机推荐
- asyncsocket的用法
更多参考文章 http://blog.csdn.net/zltianhen/article/details/6560322 http://www.cnblogs.com/bucengyongyou/a ...
- Java6 WebService的发布(转)
Java6 WebService的发布 转:http://lavasoft.blog.51cto.com/62575/227988/ WebService服务发布往往比较混乱,Axis2的 ...
- MATLAB 的函数
[需要注意]MATLAB函数不能先定义后调用! 如下为先定义后调用,结果报错: 错误: 文件:justTest2.m 行:88 列:5脚本中的函数定义必须出现在文件的结尾.请将 "mymax ...
- ReactiveCocoa 5.0 初次了解
RAC 5.0 相比于 4.0 有了巨大的变化,不仅是受 swift 3.0 大升级的影响,RAC 对自身项目结构的也进行了大幅度的调整.这个调整就是将 RAC 拆分为四个库:ReactiveCoco ...
- 自动化运维之Cobbler自动化部署安装操作系统
Cobbler概述: Cobbler可以用来快速建立 Linux 网络安装环境,它已将 Linux 网络安装的技术门槛,从大专以上文化水平,成功降低到初中以下,连补鞋匠都能学会. 在生产环境中,经常批 ...
- 【转】windows平台多线程同步之Mutex的应用
线程组成: 线程的内核对象,操作系统用来管理该线程的数据结构. 线程堆栈,它用于维护线程在执行代码时需要的所有参数和局部变量. 操作系统为每一个运行线程安排一定的CPU时间 —— 时间片.系统通 ...
- RSA加密异常
在利用RSA进行数据加密时,出现如下异常: Exception bytes at com.sun.crypto.provider.RSACipher.a(DashoA13*..) at com.sun ...
- MongodDB---初识
NoSQL介绍 一.NoSQL简介 NoSQL,全称是”Not Only Sql”,指的是非关系型的数据库. 非关系型数据库主要有这些特点:非关系型的.分布式的.开源的.水平可扩展的. 原始的目的是为 ...
- 兼容chrome和ie的wav音乐播放(Ie7 Ie8 Ie9 均测试过 )
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 认识LINQ的第一步---从查询表达式开始
学习和使用C#已经有2个月了,在这两个月的学习中,深刻体会到,C#这门语言还真不适合编程初学者学习,因为它是吸取了很多其他语言,不仅是面向对象,还包括函数式语言的很多特性,导致它变成特性大爆炸的语言. ...