jQuery的原生替代,参考自你不需要jQuery,对其进行了更清晰的总结与分类,现代游览器基本都支持(ie10+以上),只整理了最简洁实用的原生代码,过分累赘的实现没有加入
元素获取
jQuery |
原生 |
$(selector) |
document.querySelectorAll(selector) |
$(el).find(selector) |
el.querySelectorAll(selector) |
$(el).prev() |
el.previousElementSibling |
$(el).next() |
el.nextElementSibling |
$(el).first() |
el.firstElementChild |
$(el).last() |
el.lastElementChild |
$(el).parent() |
el.parentNode |
$(el).offsetParent() |
el.offsetParent |
$(el).children() |
el.children |
$(el).siblings() |
Array.prototype.filter.call(el.parentNode.children, child => child !== el) |
dom操作
jQuery |
原生 |
$(el).before(htmlString) |
el.insertAdjacentHTML('beforebegin', htmlString) => el.before(string) |
$(el).after(htmlString) |
el.insertAdjacentHTML('afterend', htmlString) => el.after(string) |
$(parent).prepend(el) |
parent.insertBefore(el, parent.firstChild) => el.prepend(htmlString) |
$(parent).append(el) |
parent.appendChild(el) => el.append(htmlString) |
$(el).remove() |
el.parentNode.removeChild(el) => el.remove() |
$(el).clone() |
el.cloneNode(true) |
$(el).empty() |
el.innerHTML = '' |
$(el).replaceWith(string) |
el.outerHTML = string |
$(el).html(string) |
el.innerHTML = string |
$(el).text(string) |
el.textContent = string |
$(el).val(string) |
el.value = string |
$(el).html() |
el.innerHTML |
$(el).text() |
el.textContent |
$(el).val() |
el.value |
样式操作
jQuery |
原生 |
$(el).hasClass(className) |
el.classList.contains(className) |
$(el).addClass(className) |
el.classList.add(className) |
$(el).removeClass(className) |
el.classList.remove(className) |
$(el).toggleClass(className) |
el.classList.toggle(className) |
$(el).css(ruleName) |
getComputedStyle(el)[ruleName] |
$(el).css('width', '20px') |
el.style.width = '20px' |
属性操作
jQuery |
原生 |
$(el).attr('title') |
el.getAttribute('title') |
$(el).attr('title', string) |
el.setAttribute('title', string) |
位置/尺寸
jQuery |
原生 |
$(el).position() |
{ left: el.offsetLeft, top: el.offsetTop } |
$(el).offset() |
el.getBoundingClientRect() |
$(el).outerWidth() |
el.offsetWidth |
$(el).outerHeight() |
el.offsetHeight |
$(el).scrollTop() |
el.scrollTop |
$(el).scrollLeft() |
el.scrollLeft |
特效
jQuery |
原生 |
$(el).hide() |
el.style.display = 'none' |
$(el).show() |
el.style.display = '' |
dom载入完毕
jQuery |
原生 |
$(方法) |
document.addEventListener('DOMContentLoaded', 方法) |
最新文章
- python标准模块(os及sys模块)
- 修改WAMP中mysql默认空密码
- Replication-Replication Distribution Subsystem: agent xxxxxx failed. Column names in each table must be unique
- 【SSM 7】Mybatis底层封装思路
- net对XML增删改查
- Mahout之Navie Bayesian命令端运行
- RESTLET开发实例(三)基于spring的REST服务
- HDU 2069 Coin Change
- Silk Icons —— 再来 700 个免费小图标
- MySQL优化之推荐使用规范
- 接口自动化框架(Pytest+request+Allure)
- Edge Deletion CodeForces - 1076D(水最短路)
- 把MP3保存到数据库中
- 限制SSH用户访问Linux中指定的目录
- Deep learning with Python 学习笔记(5)
- linux服务器---安装swat
- volatile特性
- ORM的补充
- mybatis学习之高级映射
- 【读书笔记】思维导图 Talk Like Ted
热门文章
- [python]兔子问题,斐波那契数列 递归&;非递归
- Android Studio [Toast]
- 品Spring:注解之王@Configuration和它的一众“小弟们”
- Spring Boot(三) 使用Lombok
- Robot Framework自定义测试库的作用域的理解
- Sentinel Cluster流程分析
- You can't specify target table 'sys_user_function' for update in FROM clause
- .net core 3.0 Signalr - 09 待改进&;交流
- 【线性表基础】顺序表和单链表的插入、删除等基本操作【Java版】
- Cocos Creator实现左右跳游戏,提供完整游戏代码工程