首页 > Web > 写jQuery的时候别忘了原生写法
2015
03-27

写jQuery的时候别忘了原生写法

选择器

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
//----Get all divs on page---------
 
  /* jQuery */
  $("div")
 
  /* native equivalent */
  document.getElementsByTagName("div")
 
  //----Get all by CSS class---------
 
  /* jQuery */
  $(".my-class")
 
  /* native equivalent */
  document.querySelectorAll(".my-class")
 
  /* FASTER native equivalent */
  document.getElementsByClassName("my-class")
 
  //----Get by CSS selector----------
 
  /* jQuery */
  $(".my-class li:first-child")
  /* native equivalent */
  document.querySelectorAll(".my-class li:first-child")
 
  //----Get first by CSS selector----
  /* jQuery */
  $(".my-class").get(0)
 
  /* native equivalent */
  document.querySelector(".my-class")

DOM操作

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
//----Append HTML elements----
/* jQuery */
$(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");
/* CRAPPY native equivalent */
document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";
/* MUCH BETTER native equivalent */
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document.createElement("img");
im.src = "im.gif";
 
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
 
//----Prepend HTML elements----
 
// same as above except for last line
document.body.insertBefore(frag, document.body.firstChild);

CSS类

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
  // get reference to DOM element
  var el = document.querySelector(".main-content");
  //----Adding a class------
  /* jQuery */
  $(el).addClass("someClass");
  /* native equivalent */
  el.classList.add("someClass");
  //----Removing a class-----
  /* jQuery */
  $(el).removeClass("someClass");
  /* native equivalent */
  el.classList.remove("someClass");
  //----Does it have class---
  /* jQuery */
  if($(el).hasClass("someClass"))
  /* native equivalent */
  if(el.classList.contains("someClass"))

修改CSS属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// get reference to a DOM element
var el = document.querySelector(".main-content");
 
//----Setting multiple CSS properties----
/* jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
});
/* native equivalent */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

转至：http://www.leebrimelow.com/native-methods-jQuery/

最后编辑：
作者：7iang
做自己
站内专栏

您可能还会对这些文章感兴趣！