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 ...
随机推荐
- U盘安装win10
1. 下载win10的安装ISO, 这里使用的是 LENOVO_Win10_multiple_editions_x64_zh-cn_DV5.iso 2. 准备一个大小不低于8G的U盘, 因为ISO文件 ...
- ZOJ 1457 Prime Ring Problem（dfs+剪枝）
Prime Ring Problem Time Limit: 10 Seconds Memory Limit: 32768 KB A ring is compose of n circ ...
- jdbc连接Oracle连接字符串方法
- uitextview根据内容算高度
UITextView根据内容自动改变frame 分类: iOS2013-03-08 07:27 190人阅读 评论(0) 收藏 举报 注意点: 在textview中计算string占据的高度不能使用[ ...
- cmd下查看端口被某程序占用命令
经常,我们在启动应用的时候发现系统需要的端口被别的程序占用,如何知道谁占有了我们需要的端口,很多人都比较头疼,下面就介绍一种非常简单的方法,希望对大家有用 假如我们需要确定谁占用了我们的9050端口 ...
- [SQL Server]从 varchar 数据类型到 datetime 数据类型的转换产生一个超出范围的值。
见下图sql, 使用dateadd()转换时报如题错误, 原因是数据库表中存入的数据格式不正确, 数据格式不正确, 数据格式不正确, 重要的事情讲3遍!! ca.batch_no的前8位必须是日 ...
- aaronyang的百度地图API之LBS云 笔记[位置数据 geotable]
位置数据表 geotable DEMO下载 我们再创建一个 leverTerminal表 添加 手机价格,手机型号,手机唯一码,用户id 新建一个html页面,引入最新的jquery包,1.8.2以 ...
- Android 自定义可拖拽View，界面渲染刷新后不会自动回到起始位置
以自定义ImageView为例: /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class FloatingImageVi ...
- java设置配置session过期时间的方法
1) Timeout in the deployment descriptor (web.xml)以分钟为单位 代码如下 复制代码 <web-app ...> <session-co ...
- 【转】java io 流 设计模式
知识点:什么是装饰模式: http://wenku.baidu.com/view/ad4eac9f51e79b896802263b.html(原理讲的很清楚) http://wenku.baidu.c ...