jquery、js的dom操作方法区别以及ajax使用方法

发布时间：2018-12-12 13:17:11 修改时间：2018-12-12 13:23:55 阅读：6333 评论：0 0

选择元素

//jq

$('.el');

//js   

document.querySelector("div");

div.querySelectorAll('.el');

附：//mui        mui(".el")[0];

父、兄弟元素

//jq

$('.el').parent();

$('.el').prev();

$('.el').next();

$('.el').last();

$('.el').first();

//js

document.querySelector('.el').parentNode;

document.querySelector('.el').previousElementSibling;

document.querySelector('.el').nextElementSibling; 

document.querySelector(".el").lastElementChild;

document.querySelector(".el").children[0];

获取元素文本

//jq

$('.el').html();

$('.el').val();

$('.el').text();

$(el).replaceWith(string);

//js

document.getElementById('el').innerHTML;

document.getElementById('el').value;

document.getElementById('el').textContent

document.getElementById('el').outerHTML = string;

创建元素

//jq

var newEl = $('');//js

var newEl = document.createElement('div');

Set/get属性

//jq

$('.el').filter(':first').attr('key', 'value');

$('.el').filter(':first').attr('key');

$('.el').addClass('class');

$('.el').removeClass('class');

$('.el').toggleClass('class');

$(el).css('border-width', '20px');

//js

document.querySelector('.el').setAttribute('key', 'value');

document.querySelector('.el').getAttribute('key');

document.querySelector('.el').classList.add('class');

document.querySelector('.el').classList.remove('class');

document.querySelector('.el').classList.toggle('class');

document.querySelector('.el').style.borderWidth = '20px';

附加

//jq

$('.el').append($(''));

//js 

document.querySelector('.el').appendChild(document.createElement('div'));

克隆

//jq

var clonedEl = $('.el').clone();

//js

var clonedEl = document.querySelector('.el').cloneNode(true);

移除

//jq

$('.el').remove();

// js

var toRemove = document.querySelector(el);

toRemove.parentNode.removeChild(toRemove);

ajax

//jq

$.get('url', function (data) {});

$.post('url', {data: data}, function (data) {});

//js

// get

var xhr = new XMLHttpRequest();

xhr.open('GET', url);

xhr.onreadystatechange = function (data) {

}

xhr.send();

// post

var xhr = new XMLHttpRequest()

xhr.open('POST', url);

xhr.onreadystatechange = function (data) {

}

xhr.send({data: data}

---