用 JS 原生方法实现 jQuery 的 append, prepend, before, after

相当于 $(el).before('html' | element)

el.insertAdjacentHTML('beforeBegin', 'html');
el.insertAdjacentElement('beforebegin', element)

相当于 $(el).prepend('html' | element)

el.insertAdjacentHTML('afterBegin', 'html');
el.insertBefore(element, el.firstChild)

相当于 $(el).append('html' | element)

el.insertAdjacentHTML('beforeEnd', 'html');
el.appendChild(element)

相当于 $(el).after('html' | element)

el.insertAdjacentHTML('afterEnd', 'html');
el.insertAdjacentElement('afterend', element)

相当于 $(el).addClass(className)

el.classList.add(className)

相当于 $(el).removeClass(className)

el.classList.remove(className)

相当于 $(el).toggleClass(className)

el.classList.toggle(className)

相当于 $(el).offset()

var rect = el.getBoundingClientRect();{top: rect.top + document.body.scrollTop,left: rect.left + document.body.scrollLeft
}

相当于 $(el).remove()

el.parentNode.removeChild(el)

相当于 $(el).on(eventName, eventHandler)

el.addEventListener(eventName, eventHandler)

相当于 $(el).off(eventName, eventHandler)

el.removeEventListener(eventName, eventHandler)

相当于 $(document).on(eventName, elementSelector, handler)

document.addEventListener(eventName, function(e) {const handler = function(e) {console.log(this)console.log(e)}for (var target = e.target; target && target != this; target = target.parentNode) {if (target.matches(elementSelector)) {handler.call(target, e);break;}}
}, false);

用 JS 原生方法实现 jQuery 的 append, prepend, before, after相关推荐

JS原生方法实现jQuery的ready()
浏览器加载页面的顺序: 1. 解析HTML结构 2. 加载外部脚本和样式表文件 3. 解析并执行脚本代码 4. 构造HTML DOM模型==ready() 5. 加载图片等组件 6. 页面加载完毕== ...
JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式掌握json数据格式方式掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
js 原生方法 -- 模拟浏览器的点击事件
js 原生方法 – 模拟浏览器的点击事件 1. 创建自定事件并监听可看看 MDN 的 Evnet, CustomEvent 对象 <!DOCTYPE html> <html la ...
html中prependid的作用,jQuery中append(),prepend()与after(),before()的区别
在jQuery中,添加元素的方法有append(),prepend和 after(),before()两种共四个.但很多人对他们的使用有点混淆,今天就来分析一下.append()和prepend()的 ...
js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
js原生方法传参的细节（面试必问）
废话不说,直接上题. slice(),接收两个参数,第一个为开始index(从0开始),第二个为结束的index(也是从0开始,但是不包括index本身,只到index-1).返回值是截取的数组,原数 ...
js 原生将元素插入到父元素首位，jquery和原生两种方式
一般来说我们新加的元素会放置到父元素的首位但也有放到首位的那种可能,每次追加元素放到最前面业务还是有这种需求的可能用jquery的童鞋会对 append 这个方法很熟悉当然用框架 ...
原生javascript取代jquery的一些方法（jQuery-free）
转自:http://www.qingdou.me/2687.html jQuery是最流行的JavaScript工具库.据统计,目前全世界57.3%的网站使用它.也就是说,10个网站里面,有6个使用j ...
js原生、jquery单选框radio总结（获取值、设置默认选中值、样式）
单选框 radio总结: 一.页面样式截图: <div class="radio-inline"><input type="radio" na ...

用 JS 原生方法实现 jQuery 的 append, prepend, before, after

用 JS 原生方法实现 jQuery 的 append, prepend, before, after相关推荐

最新文章

热门文章