1. Ajax
function get(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
}
function post(url, params) {
var xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({ data: params });
}
2. 常用
// 选择 var ele = document.querySelectorAll('#id.class'); // 属性 ele.setAttribute('key', 'value'); ele.getAttribute('key'); // 样式 ele.classList.add('class'); ele.classList.remove('class'); ele.classList.toggle('class'); // 创建 var newEle = document.createElement('div'); // 添加 ele.appendChild(newEle); // clone var cloneEle = ele.cloneNode(true); // 移除 ele.removeChild(newEle); // 父级, 上一个, 下一个 var parent = ele.parentNode; var prev = ele.previousElementSibling; var next = ele.nextElementSibling; // 事件1 var evt = document.createEvent('HTMLEvents'); //创建 evt.initEvent('click', false, false); // initEvent不加后两个参数, FF会报错 ele.dispatchEvent(evt); // 触发 // 事件2 ele.addEventListener('click', function(){ }, false);
3. Demo
// 图片下载
// 页面地址: http://demo.htmleaf.com/1501/201501071637/index.html
// 自动下载图片
function download(url , name){
// 创建超链接a
var a = document.createElement('a');
a.href = url;
a.download = name; // 设置download, 则hmlt5下,点击a时自动下载
// 创建点击事件
var evt = document.createEvent('HTMLEvents');
evt.initEvent('click', false, false);
a.dispatchEvent(evt); // 触发a的点击事件实现自动下载
}
var imgs = document.querySelectorAll('ul > li > img');
for (var i = 0; i < imgs.length; i++){
var img = imgs[i];
var url = img.src;
var strs = url.split('/');
var name = strs[strs.length - 1];
download(url, name);
}