jQuery and un-jQuery

jQuery

$el.append(htmlString)
$el.prepend(htmlString)

$newEl.insertBefore(queryString)
$newEl.insertAfter(queryString)

un-jQuery

DOM 操作

选择器可以使用 querySelector 和 querySelectorAll, 但是这两个的性能太差了,最好使用 getElementById, getElementsByTagName, getElementsByClassName

$el.val() 对应 el.value

获取 attr

$el.attr('id');
el.getAttribute('id);
el.setAttribute(attr, value)

parent and children

$el.children
$el.parent()
el.children
el.parentNode

设置 css

$el. css({color: '#000'});
el.style.color = '#000';
$el.css('color');
window.getComputedStyle(el)['color'];

特别地
$(el).hide(); // jQuery
el.style.display = ‘none’; // native
$(el).show(); // jQuery
el.style.dispaly = ”

设置 class

$el.addClass(className) // remove, has, toggle
el.classList.add(className) // remove, contains, toggle

设置 text
Get text
// jQuery
$el.text();
// Native
el.textContent;

Set text
// jQuery
$el.text(string);

// Native
el.textContent = string;

设置 html

Get HTML
// jQuery
$el.html();

// Native
el.innerHTML;
Set HTML
// jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;

inserting html fragment to document

Have a look at insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>
position is the position relative to the element you are inserting adjacent to:

beforebegin Before the element itself

afterbegin Just inside the element, before its first child

beforeend Just inside the element, after its last child

afterend After the element itself

事件

绑定事件
$el.on(eventName, eventHandler); // jQuery
el.addEventListener(eventName, eventHandler); // Native

解绑事件
$el.off(eventName, eventHandler); // jQuery
el.removeEventListener(eventName, eventHandler); // Native

触发事件
// 用户事件
$(el).trigger(‘custom-event’, {key1: ‘data’}); // jQuery
// Native, note that
const event = new CustomEvent(‘custom-event’, {detail: {key1: ‘data’}});
el.dispatchEvent(event);

// 原生事件
$(el).trigger(‘change’);
var ev = new Event(“look”, {“bubbles”:true, “cancelable”:false});
document.dispatchEvent(ev);

ajax

getJSON
jQuery
$.getJSON(‘/my/url’, function(data) {
});
IE9+
var request = new XMLHttpRequest();
request.open(‘GET’, ‘/my/url’, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
Post
jQuery
$.ajax({
type: ‘POST’,
url: ‘/my/url’,
data: data
});
IE8+
var request = new XMLHttpRequest();
request.open(‘POST’, ‘/my/url’, true);
request.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8’);
request.send(data);
Request
jQuery
$.ajax({
type: ‘GET’,
url: ‘/my/url’,
success: function(resp) {
},
error: function() {
}
});
IE9+
var request = new XMLHttpRequest();
request.open(‘GET’, ‘/my/url’, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();

DOM Ready

https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md
http://youmightnotneedjquery.com/

及时获取更新,请关注公众号“爬虫技术学习(spider-learn)”

公众号“爬虫技术学习(spider-learn)”

About 逸飞

后端工程师

发表评论

电子邮件地址不会被公开。 必填项已用*标注