jQuery 的核心方法就是 $(),成为了 jQuery 的强大工具,在各大网站和项目中都得到了广泛的应用。
那么,$() 的实现原理是什么呢?
// 原先的写法 window.onload = function() { var ele = document.getElementById("id"); ele.style.color = "red"; } // 使用 $() 的写法 $(document).ready(function() { var ele = $("#id"); ele.css("color", "red"); });
从上面的示例代码可以看出,$() 看似只是一个函数名或者语法糖,但它实际上是 jQuery 的核心方法。
在 jQuery 中,$() 的实现原理其实就是一个工厂函数,就像这样:
// 声明一个 $() 工厂函数 function $(selector) { // 返回一个实例对象 return new jQuery(selector); } // 声明一个 jQuery 构造函数 function jQuery(selector) { // 初始化选中的元素 this.selected = document.querySelectorAll(selector); } // 向原型链(prototype)中添加一些方法 jQuery.prototype.css = function(key, value) { // 循环遍历选中的所有元素 for (var i = 0; i < this.selected.length; i++) { // 设置元素的样式 this.selected[i].style[key] = value; } // 返回 this,保证方法的链式调用 return this; }
从上面的代码中可以看出,$() 工厂函数实际上就是一个简单的封装,它返回了一个 jQuery 的实例对象。这个实例对象基于选择器选中 DOM 元素后,添加了一些 jQuery 特有的方法,例如 css()、html()、val() 等,这样就可以在实例对象上直接调用这些方法。
在 jQuery 中,这其实就是一种“包装”的思想。通过封装并扩展现有的 DOM API,实现了快捷、高效的 DOM 操作。
总之,$() 是 jQuery 的核心方法,实现了基于选择器选中 DOM 元素后,通过实例对象直接调用 jQuery 特有的方法,快速、高效地操作 DOM。