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 ...
随机推荐
- hdu 4122 Alice's mooncake shop (线段树)
题目大意: 一个月饼店每一个小时做出月饼的花费不一样. 储存起来要钱.最多存多久.问你把全部订单做完的最少花费. 思路分析: ans = segma( num[]*(cost[] + (i-j)*s) ...
- 邮件相关协议及JavaMail 包简介
1. 邮件服务器 按功能划分,邮件服务器可以划分为两种类型: SMTP邮件服务器:用于替用户发送邮件和接收外面发送给本地用户的邮件,相当于现实生活中邮局的邮件接收部门(可接收普通用户要投出的邮件和其他 ...
- 阿里云k8s私有仓库registry操作管理
1. 登录阿里云Docker Registry $ sudo docker login --username=*****技 registry.cn-hangzhou.aliyuncs.com 用于登录 ...
- 内存问题排查工具 --- valgrind
1. 概述 2. Valgrind 3. 内存泄漏监测 3.1. 示例代码 3.2. 编译它 3.3. 用Valgrind监测进程的内存泄漏 4. 悬挂指针 4.1. 示例代码 4.2. Valgri ...
- mysql--SQL编程(关于mysql中的日期) 学习笔记2
一.mysql数据库中的date1.DATETIME和DATE:DATETIME占用8个字节,日期范围为"1000-01-01 00:00:00"到"9999-12-31 ...
- ios 协议分析
1 基本用途 可以用来声明一大堆方法(不能声明成员变量) 只要某个类遵守了这个协议,就相当于拥有了这个协议中的所有方法声明 只要父类遵守了某个协议,就相当于子类也遵守了 2 格式 协议的编写 @pro ...
- Java中Map相关的快速查找算法与唯一性（转载）
原文地址:http://blog.csdn.net/chuyuqing/article/details/19629229 在对<Set和hashCode()>的一篇原创文章写完后,由于对自 ...
- sql server 2008评估期已到的解决办法
点击开始-所有程序-Microsoft SQL Server 2008-配置工具-SQL Server 安装中心然后点击左侧的维护,在点击右侧的版本升级,接着按照提示一直点下一步,到产品密钥的时候输入 ...
- MongoDB学习笔记（11） --- 聚合
MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*) aggregate() 方法 MongoDB中聚 ...
- 第2章 Python基础-字符编码&数据类型 字符编码&字符串 练习题
1.简述位.字节的关系 位(bit)是计算机中最小的表示单元,数据传输是以“位”为单位的,1bit缩写为1b 字节(Byte)是计算机中最小的存储单位,1Byte缩写为1B 8bit = 1Byte ...