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 ...
随机推荐
- Gerrit最简工作流
Gerrit最简工作流: git clone ... //注意clone with commit-msg hook,否则push可能失败(ERROR: missing Change-Id in c ...
- PL/SQL Developer 中文乱码问题的解决
分三个步骤解决: 1.检查server编码: 运行SQL语法: select * from v$nls_parameters; 2.设置本地client编码: 进入 ...
- springmvc概述及框架原理
一. 前言 MVC不是框架而是一种设计模式. MVC的全名Model View Controller,即模型-视图-控制器的缩写,这是一种设计模式,而非架构.MVC它强制的使用应用程序的输入.处理.和 ...
- std::thread 不 join
std::thread 构造之后 使用 detach.就可以了
- Weex开发之路（1）：开发环境搭建
一.Weex介绍 Weex是阿里巴巴在2016年6月份对外开源的一款移动端跨平台的移动开发工具,Weex的出现让我们的应用既有了Native的性能和H5的动态性,只要通过前端JS语法就能写出同时兼容i ...
- BAT面试的准备—iOS篇
本文主要用于记录在准备BAT面试中关于iOS遇到的问题和做一些相关面试题的笔记 iOS网络层设计 1.网络层和业务层的对接设计 使用哪种交互模式来和业务层对接 : 使用Delegate为主,目的是为了 ...
- STRTOK函数和STRTOK_R函数
STRTOK函数和STRTOK_R函数 注:本文转载自博客园,感谢作者整理! 1.一个应用实例 网络上一个比较经典的例子是将字符串切分,存入结构体中.如,现有结构体 typedef struct pe ...
- 运维自动化之Cobbler系统安装使用详解[good]
一.简介 Cobbler是一个快速网络安装linux的服务,而且在经过调整也可以支持网络安装windows.该工具使用python开发,小巧轻便(才15k行python代码),使用简单的命令即可完成P ...
- 安装cacti
操作介绍如下: http://foreveryan.blog.51cto.com/3508502/775558 安装如下: 英文地址:http://www.cyberciti.biz/faq/fedo ...
- centos 6&7 升级openssh
1.查看现在的版本 # rpm -qa | grep openssh openssh-clients-6.6.1p1-22.el7.x86_64 openssh-server-6.6.1p1-22.e ...