选择元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// jQuery
var
els = $(
'.el'
);
// Native
var
els = document.querySelectorAll(
'.el'
);
// Shorthand
var
$ =
function
(el) {
return
document.querySelectorAll(el);
}
var
els = $(
'.el'
);
// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries
|
创建元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// jQuery
var
newEl = $(
'<div/>'
);
// Native
var
newEl = document.createElement(
'div'
);
Add event listener
// jQuery
$(
'.el'
).on(
'event'
,
function
() {
});
// Native
[].forEach.call(document.querySelectorAll(
'.el'
),
function
(el) {
el.addEventListener(
'event'
,
function
() {
},
false
);
});
|
Set/get属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// jQuery
$(
'.el'
).filter(
':first'
).attr(
'key'
,
'value'
);
$(
'.el'
).filter(
':first'
).attr(
'key'
);
// Native
document.querySelector(
'.el'
).setAttribute(
'key'
,
'value'
);
document.querySelector(
'.el'
).getAttribute(
'key'
);
Add/remove/toggle class
// jQuery
$(
'.el'
).addClass(
'class'
);
$(
'.el'
).removeClass(
'class'
);
$(
'.el'
).toggleClass(
'class'
);
// Native
document.querySelector(
'.el'
).classList.add(
'class'
);
document.querySelector(
'.el'
).classList.remove(
'class'
);
document.querySelector(
'.el'
).classList.toggle(
'class'
);
|
附加
1
2
3
4
5
|
// jQuery
$(
'.el'
).append($(
'<div/>'
));
// Native
document.querySelector(
'.el'
).appendChild(document.createElement(
'div'
));
|
克隆
1
2
3
4
5
|
// jQuery
var
clonedEl = $(
'.el'
).clone();
// Native
var
clonedEl = document.querySelector(
'.el'
).cloneNode(
true
);
|
移除
1
2
3
4
5
6
7
8
9
10
11
|
// jQuery
$(
'.el'
).remove();
// Native
remove(
'.el'
);
function
remove(el) {
var
toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}
|
父元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
// jQuery
$(
'.el'
).parent();
// Native
document.querySelector(
'.el'
).parentNode;
Prev/next element
// jQuery
$(
'.el'
).prev();
$(
'.el'
).next();
// Native
document.querySelector(
'.el'
).previousElementSibling;
document.querySelector(
'.el'
).nextElementSibling;
XHR aka AJAX
// jQuery
$.get(
'url'
,
function
(data) {
});
$.post(
'url'
, {data: data},
function
(data) {
});
// Native
// 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});
|