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 ...
随机推荐
- highstock禁用UTC
xAxis: { labels: { format: '{value:%Y-%m-%d}', /* * 也可以用 formatter 格式化函数,时间格式化说明如下: * %Y 年 * %m 月 * ...
- spring事务——try{...}catch{...}中事务不回滚的几种处理方式
当希望在某个方法中添加事务时,我们常常在方法头上添加@Transactional注解 @ResponseBody @RequestMapping(value = "/payment" ...
- java面试题--实现一个百亿的计算器
看了网上很多说法,没有具体把它实现的,我试了一下其实还是比较简单的. 直接看代码: package com.infomorrow; import java.math.BigInteger; impor ...
- 【Oracle】Oracle自定义的函数与过程
本篇主要内容如下: 6.1 引言 6.2 创建函数 6.3 存储过程 6.3.1创建过程 6.3.2调用存储过程 6.3.3 AUTHID 6.3.4 PRAGMA AUTONOMOUS_TRANSA ...
- Swift 类型检查与类型转换
前言 在 Swift 语言中一般使用 is 关键字实现类型检查,使用 as 关键字实现类型转换,除此之外还可以通过构造器和方法来实现类型转换. 1.类型检查 1.1 使用 is 检查 类型检查操作符 ...
- Android上面通过URL来启动本地应用
<application android:allowBackup="true" android:icon="@drawable/ic_launcher" ...
- linux arm的高端内存映射
linux arm的高端内存映射(1) vmalloc 高端内存映射 与高端映射对立的是低端映射或所谓直接映射,内核中有关变量定义它们的它们的分界点,全局变量high_memory,该变量定义在m ...
- Linux设备驱动Hello World程序介绍
自古以来,学习一门新编程语言的第一步就是写一个打印“hello world”的程序(可以看<hello world 集中营>这个帖子供罗列了300个“hello world”程序例子)在本 ...
- SharePoint自动化部署，利用PowerShell 导出/导入AD中的用户
这几个月一直在帮客户改需求,部署.我已经心力憔悴,经过一段时间的摸索,我对用PowerShell实现自动化部署也有了一些心得,比如说利用PowerShell导出导入AD中的User.在基于ShareP ...
- js 获取元素所有兄弟节点实例
比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li——不包括红的li——的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你 ...