javascript基础拾遗(十一)

2023-08-17 10:32:10

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已被淘汰)

码农公寓

相关文章