手写简易jQuery，考虑插件和扩展性

最新推荐文章于 2024-03-23 11:52:57 发布

前端小兔子

最新推荐文章于 2024-03-23 11:52:57 发布

阅读量395

点赞数

分类专栏： Javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_33084055/article/details/103825099

版权

Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html

<body>
	<p>这是一段文字1</p>
    <p>这是一段文字2</p>
    <p>这是一段文字3</p>
    <p>这是一段文字4</p>
</body>

js

<script>
	class jQuery{
		constructor(selector){
		    const result = document.querySelectorAll(selector);
		    const length = result.length;
		
		    for(let i = 0; i < length; i++){
		        this[i] = result[i];
		    }
		    this.length = length;
		    this.selector = selector;
		}
		get(index){
		    return this[index]
		}
		each(fn){
		    for(let i = 0; i < this.length; i++){
		        const elem = this[i];
		        fn(elem);
		    }
		}
		on(type, fn){
		    return this.each(elem => {
		        elem.addEventListener(type, fn, false);
		    })
		}
		
		// 扩展更多DOM API
		}
		
		const $p = new jQuery('p');
		$p.get(0);
		$p.each((elem) => console.log(elem.nodeName))
		$p.on('click', () => {
		alert('点击');
		})
		
		// 插件
		jQuery.prototype.dialog = function(info){
		alert(info);
		}
		
		// 造轮子
		class myJQuery extends jQuery{
		constructor(selector){
		    super(selector);
		}
		//扩展自己的方法
		addClass(className){
		
		}
	}
</script>