每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
jquery、js的dom操作方法区别以及ajax使用方法
发布时间:2018-12-12 13:17:11 修改时间:2018-12-12 13:23:55 阅读:6380 评论: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}
回复列表
关键字词:style,margin-left,80px,.el,40px,h2
上一篇:css常用属性