获得网站所有关键字,网站按照谁建设 谁负责,秀山网站建设公司,高端大气网站模板oneuijs/You-Dont-Need-jQuery https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.mdYou Dont Need jQuery 前端发展很快#xff0c;现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React… oneuijs/You-Dont-Need-jQuery https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README.zh-CN.md You Dont Need jQuery 前端发展很快现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行直接操作 DOM 不再是好的模式jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法暂时只支持 IE10 以上浏览器。 Translations Query Selector 常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是 document.querySelector 返回第一个匹配的 Elementdocument.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array如果匹配不到任何 ElementjQuery 返回空数组 []但 document.querySelector 返回 null注意空指针异常。当找不到时也可以使用 || 设置默认的值如 document.querySelectorAll(selector) || [] 注意document.querySelector 和 document.querySelectorAll 性能很差。如果想提高性能尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。 1.0 Query by selector // jQuery
(selector);// Native
document.querySelectorAll(selector); 1.1 Query by class // jQuery
();// Native
document.querySelectorAll();document.getElementsByClassName(); 1.2 Query by id // jQuery
();// Native
document.querySelector();document.getElementById(); 1.3 Query by attribute // jQuery
(a[target_blank]);// Native
document.querySelectorAll(a[target_blank]); 1.4 Find sth. Find nodes // jQuery
.();// Native
.querySelectorAll(); Find body // jQuery
();// Native
document.; Find Attribute // jQuery
.();// Native
.getAttribute(); Find data attribute // jQuery
.();// Native
// using getAttribute
.getAttribute(data-foo);
// you can also use dataset if only need to support IE 11
.dataset[]; 1.5 Sibling/Previous/Next Elements Sibling elements // jQuery
.siblings();// Native
[].filter.(.parentNode.children, function(child) {return child el;
}); Previous elements // jQuery
.();// Native
.previousElementSibling;Next elements // next
.();
.nextElementSibling; 1.6 Closest Closest 获得匹配选择器的第一个祖先元素从当前元素开始沿 DOM 树向上。 // jQuery
.closest(queryString);// Native
function closest(, selector) {const matchesSelector .matches .webkitMatchesSelector .mozMatchesSelector .msMatchesSelector;while (el) {(matchesSelector.(el, selector)) {return el;} {el .parentElement;}}return ;
} 1.7 Parents Until 获取当前每一个匹配元素集的祖先不包括匹配元素的本身。 // jQuery
.parentsUntil(selector, filter);// Native
function parentsUntil(, selector, filter) {const result [];const matchesSelector .matches .webkitMatchesSelector .mozMatchesSelector .msMatchesSelector;// match start from parentel .parentElement;while (el matchesSelector.(el, selector)) {(filter) {result.(el);} {(matchesSelector.(el, filter)) {result.(el);}}el .parentElement;}return result;
} 1.8 Form Input/Textarea // jQuery
(#my-input).();// Native
document.querySelector(#my-input).value; Get index of e.currentTarget between .radio // jQuery
(.currentTarget).index(.radio);// Native
[].indexOf.(document.querySelectorAll(.radio), .currentTarget); 1.9 Iframe Contents jQuery 对象的 iframe contents() 返回的是 iframe 内的 document Iframe contents // jQuery
$iframe.contents();// Native
iframe.contentDocument; Iframe Query // jQuery
$iframe.contents().();// Native
iframe.contentDocument.querySelectorAll(); ⬆ 回到顶部 CSS Style 2.1 CSS Get style // jQuery
.(color);// Native
// 注意此处为了解决当 style 值为 auto 时返回 auto 的问题
const .ownerDocument.defaultView;
// null 的意思是不返回伪类元素
.getComputedStyle(el, ).color; Set style // jQuery
.({ color #ff0011 });// Native
.style.color #ff0011; Get/Set Styles 注意如果想一次设置多个 style可以参考 oui-dom-utils 中 setStyles 方法 Add class // jQuery
.addClass(className);// Native
.classList.(className); Remove class // jQuery
.removeClass(className);// Native
.classList.remove(className); has class // jQuery
.hasClass(className);// Native
.classList.contains(className); Toggle class // jQuery
.toggleClass(className);// Native
.classList.toggle(className); 2.2 Width Height Width 与 Height 获取方法相同下面以 Height 为例 Window height // jQuery
(window).height();// Native
// 不含 scrollbar与 jQuery 行为一致
window.document.documentElement.clientHeight;
// 含 scrollbar
window.innerHeight; Document height // jQuery
(document).height();// Native
document.documentElement.scrollHeight; Element height // jQuery
.height();// Native
// 与 jQuery 一致一直为 content 区域的高度
function getHeight() {const styles .getComputedStyle(el);const height .offsetHeight;const borderTopWidth parseFloat(styles.borderTopWidth);const borderBottomWidth parseFloat(styles.borderBottomWidth);const paddingTop parseFloat(styles.paddingTop);const paddingBottom parseFloat(styles.paddingBottom);return height borderBottomWidth borderTopWidth paddingTop paddingBottom;
}
// 精确到整数border-box 时为 height 值content-box 时为 height padding border 值
.clientHeight;
// 精确到小数border-box 时为 height 值content-box 时为 height padding border 值
.getBoundingClientRect().height; Iframe height $iframe .contents() 方法返回 iframe 的 contentDocument // jQuery
(iframe).contents().height();// Native
iframe.contentDocument.documentElement.scrollHeight; 2.3 Position Offset Position // jQuery
.position();// Native
{ left .offsetLeft, top .offsetTop } Offset // jQuery
.offset();// Native
function getOffset () {const .getBoundingClientRect();return {top . window.pageYOffset document.documentElement.clientTop,left . window.pageXOffset document.documentElement.clientLeft}
} 2.4 Scroll Top // jQuery
(window).scrollTop();// Native
(document.documentElement document.documentElement.scrollTop) document..scrollTop; ⬆ 回到顶部 DOM Manipulation 3.1 Remove // jQuery
.remove();// Native
.parentNode.removeChild(el); 3.2 Text Get text // jQuery
.();// Native
.textContent; Set text // jQuery
.(string);// Native
.textContent string; 3.3 HTML Get HTML // jQuery
.();// Native
.innerHTML; Set HTML // jQuery
.(htmlString);// Native
.innerHTML htmlString; 3.4 Append Append 插入到子节点的末尾 // jQuery
.append(div idcontainerhello/div);// NativenewEl document.createElement();
newEl.setAttribute(, container);
newEl.innerHTML hello;
.appendChild(newEl); 3.5 Prepend // jQuery
.prepend(div idcontainerhello/div);// NativenewEl document.createElement();
newEl.setAttribute(, container);
newEl.innerHTML hello;
.insertBefore(newEl, .firstChild); 3.6 insertBefore 在选中元素前插入新节点 // jQuery
$newEl.insertBefore(queryString);// Native
const target document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target); 3.7 insertAfter 在选中元素后插入新节点 // jQuery
$newEl.insertAfter(queryString);// Native
const target document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling); ⬆ 回到顶部 用 fetch 和 fetch-jsonp 替代 ⬆ 回到顶部 Events 完整地替代命名空间和事件代理链接到 https://github.com/oneuijs/oui-dom-events 5.1 Bind an event with on // jQuery
.(eventName, eventHandler);// Native
.addEventListener(eventName, eventHandler); 5.2 Unbind an event with off // jQuery
.(eventName, eventHandler);// Native
.removeEventListener(eventName, eventHandler); 5.3 Trigger // jQuery
(el).trigger(custom-event, {key1 });// Native(window.CustomEvent) {const event CustomEvent(custom-event, {detail {key1 }});
} {const event document.createEvent(CustomEvent);event.initCustomEvent(custom-event, , , {key1 });
}.dispatchEvent(event); ⬆ 回到顶部 Utilities 6.1 isArray // jQuery
.isArray(range);// Native
Array.isArray(range); 6.2 Trim // jQuery
.(string);// Native
string.(); 6.3 Object Assign 继承使用 object.assign polyfill https://github.com/ljharb/object.assign // jQuery
.extend({}, defaultOpts, opts);// Native
Object.assign({}, defaultOpts, opts); 6.4 Contains // jQuery
.contains(el, child);// Native
el child .contains(child); ⬆ 回到顶部 Alternatives 你可能不需要 jQuery (You Might Not Need jQuery) - 如何使用原生 JavaScript 实现通用事件元素ajax 等用法。npm-dom 以及 webmodules - 在 NPM 上提供独立 DOM 模块的组织Browser Support Latest ✔Latest ✔10 ✔Latest ✔6.1 ✔License转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6137041.html
