|
|
楼主 |
发表于 2018-7-31 09:57:13
|
显示全部楼层
原生 ECMAScript 替代 JQuery
JQuery：
$(document).ready(function() {
// Code
});
ECMAScript：
document.addEventListener("DOMContentLoaded", function() {
// Code
}, false);
-------
JQuery：
var element = $("div")
;ECMAScript：
var element = document.querySelector("div");
var elements = document.querySelectorAll(".container div");
var navigation = document.querySelector("nav");
var links = navigation.querySelectorAll("a");
// Getting the parent node
var parent = document.querySelector("div").parentNode;
// Getting the next node
var next = document.querySelector("div").nextSibling;
// Getting the previous node
var next = document.querySelector("div").previousSibling;
// Getting the first child element
var child = document.querySelector("div").children[0];
// Getting the last child
var last = document.querySelector("div").lastElementChild;
-------
// Select an element
var element = document.querySelector(".some-class");
// Give class "foo" to the element
element.className = "foo";
element.className += " foo";
// removeClass, takes two params: element and classname
function removeClass(el, cls) {
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}
removeClass(element, "foo");
// hasClass, takes two params: element and classname
function hasClass(el, cls) {
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}
-------
// Adding a class
element.classList.add("bar");
// Removing a class
element.classList.remove("foo");
// Checking if has a class
element.classList.contains("foo");
// Toggle a class
element.classList.toggle("active");
var element = document.querySelector("#test");
element.classList.add("two");
element.classList.remove("four");
-------
图片原始宽度
var maxWidth = img.naturalWidth;
|
|
发表于 2018-6-7 10:29:54