参考 http://www.w3school.com.cn/jquery/index.asp
fetch 替代 ajax
querySelectorAll 替代 $
用原生JavaScript代替jQuery
前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。
同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。
本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。
Query Selector
常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。
区别是
document.querySelector 返回第一个匹配的 Element
document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 [].slice.call() 把它转成 Array
如果匹配不到任何 Element,jQuery 返回空数组 [],但 document.querySelector 返回 null,注意空指针异常。
当找不到时,也可以使用 || 设置默认的值,
如 document.querySelectorAll(selector) || []
注意:document.querySelector 和 document.querySelectorAll 性能很差。
如果想提高性能,尽量使用 document.getElementById、document.getElementsByClassName 或 document.getElementsByTagName。
1.0 选择器查询
// jQuery
$('selector');
// Native
document.querySelectorAll('selector');
1.1 class 查询
// jQuery
$('.class');
// Native
document.querySelectorAll('.class');
// or
document.getElementsByClassName('class');
1.2 id 查询
// jQuery
$('#id');
// Native
document.querySelector('#id');
// or
document.getElementById('id');
1.3 属性查询
// jQuery
$('a[target=_blank]');
// Native
document.querySelectorAll('a[target=_blank]');
1.4 后代查询
// jQuery
$el.find('li');
// Native
el.querySelectorAll('li');
1.5 兄弟及上下元素
兄弟元素
// jQuery
$el.siblings();
// Native - latest, Edge13+
[...el.parentNode.children].filter((child) =>
child !== el
);
// Native (alternative) - latest, Edge13+
Array.from(el.parentNode.children).filter((child) =>
child !== el
);
// Native - IE10+
Array.prototype.filter.call(el.parentNode.children, (child) =>
child !== el
);
上一个元素
// jQuery
$el.prev();
// Native
el.previousElementSibling;
下一个元素
// next
$el.next();
// Native
el.nextElementSibling;
1.6 Closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString);
// Native - Only latest, NO IE
el.closest(selector);
// Native - IE10+
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
}
1.7 Parents Until
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
// jQuery
$el.parentsUntil(selector, filter);
// Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
// match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
}
1.8 Form
Input/Textarea
// jQuery
$('#my-input').val();
// Native
document.querySelector('#my-input').value;
获取 e.currentTarget 在 .radio 中的数组索引
// jQuery
$('.radio').index(e.currentTarget);
// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
1.9 Iframe Contents
jQuery 对象的 iframe contents() 返回的是 iframe 内的 document
Iframe contents
// jQuery
$iframe.contents();
// Native
iframe.contentDocument;
Iframe Query
// jQuery
$iframe.contents().find('.css');
// Native
iframe.contentDocument.querySelectorAll('.css');
1.10 获取 body
// jQuery
$('body');
// Native
document.body;
1.11 获取或设置属性
获取属性
// jQuery
$el.attr('foo');
// Native
el.getAttribute('foo');
设置属性
// jQuery, note that this works in memory without change the DOM
$el.attr('foo', 'bar');
// Native
el.setAttribute('foo', 'bar');
获取 data- 属性
// jQuery
$el.data('foo');
// Native (use `getAttribute`)
el.getAttribute('data-foo');
// Native (use `dataset` if only need to support IE 11+)
el.dataset['foo'];
CSS & Style
2.1 CSS
Get style
// jQuery
$el.css("color");
// Native
// 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
const win = el.ownerDocument.defaultView;
// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color;
Set style
// jQuery
$el.css({ color: "#ff0011" });
// Native
el.style.color = '#ff0011';
Get/Set Styles
注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法
Add class
// jQuery
$el.addClass(className);
// Native
el.classList.add(className);
Remove class
// jQuery
$el.removeClass(className);
// Native
el.classList.remove(className);
has class
// jQuery
$el.hasClass(className);
// Native
el.classList.contains(className);
Toggle class
// jQuery
$el.toggleClass(className);
// Native
el.classList.toggle(className);
2.2 Width & Height
Width 与 Height 获取方法相同,下面以 Height 为例:
Window height
// window height
$(window).height();
// 含 scrollbar
window.document.documentElement.clientHeight;
// 不含 scrollbar,与 jQuery 行为一致
window.innerHeight;
Document height
// jQuery
$(document).height();
// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
);
Element height
// jQuery
$el.height();
// Native
function getHeight(el) {
const styles = this.getComputedStyle(el);
const height = el.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 - border 值,content-box 时为 height + padding 值)
el.clientHeight;
// 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.getBoundingClientRect().height;
2.3 Position & Offset
Position
获得匹配元素相对父元素的偏移
// jQuery
$el.position();
// Native
{ left: el.offsetLeft, top: el.offsetTop }
Offset
获得匹配元素相对文档的偏移
// jQuery
$el.offset();
// Native
function getOffset (el) {
const box = el.getBoundingClientRect();
return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
2.4 Scroll Top
获取元素滚动条垂直位置。
// jQuery
$(window).scrollTop();
// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
DOM Manipulation
3.1 Remove
从 DOM 中移除元素。
// jQuery
$el.remove();
// Native
el.parentNode.removeChild(el);
// Native - Only latest, NO IE
el.remove();
3.2 Text
Get text
返回指定元素及其后代的文本内容。
// jQuery
$el.text();
// Native
el.textContent;
Set text
设置元素的文本内容。
// jQuery
$el.text(string);
// Native
el.textContent = string;
3.3 HTML
Get HTML
// jQuery
$el.html();
// Native
el.innerHTML;
Set HTML
// jQuery
$el.html(htmlString);
// Native
el.innerHTML = htmlString;
3.4 Append
Append 插入到子节点的末尾
// jQuery
$el.append("
hello
");
// Nat
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
本项目包括本人多年积累包括领域驱动设计,前端,后台,部署,操作系统等 适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习借鉴价值,也可直接拿来修改复现。可以在这些基础上学习借鉴进行修改和扩展,实现其它功能。 【无积分此资源可私信博主有偿获取】 可放心下载学习借鉴,你会有所收获。 —— 对于学习和实践,选择合适的项目和资源确实是一种有效的方式。 在进行毕业设计、课程设计或大作业时,选择具备学习借鉴价值的项目可以帮助你理解和应用所学知识,同时也可以通过修改和扩展来实现其他功能。 通过参与实际项目,你可以应用所学的理论知识,深入了解软件开发或其他领域的实践流程和技术要求。 可放心下载学习借鉴,你会有所收获。 【无积分此资源可私信博主有偿获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
资源推荐
资源详情
资源评论
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![circ](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOC.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOC.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOC.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/DOCX.png)
共 2001 条
- 1
- 2
- 3
- 4
- 5
- 6
- 21
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/9d00ed03164d412eb9f47cbf12565051_m0_61712829.jpg!1)
阿齐Archie
- 粉丝: 1w+
- 资源: 2303
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)