javascript原生api

最新推荐文章于 2024-04-22 08:48:53 发布

原创最新推荐文章于 2024-04-22 08:48:53 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Ajax和DOM操作的基本概念、核心函数及应用实例。包括如何使用Ajax进行异步数据请求，以及如何通过DOM操作实现网页元素的选择、属性修改、样式更改、创建、添加、克隆、删除等常见操作。

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);
}