学习jquery的简单方法
2010-11-10 13:25
441 查看
学习复杂代码的最好方法是简化:
测试页面:study-jquery-in-simplified-way.html (请在非 IE 浏览器下运行) :IE6,7不支持querySelectorAll方法;
源码:jquery~core.js
(function(win, undefined) { var jQuery = function(selector, context) { // jQuery 对象就是 init 函数的一个实例 return new jQuery.fn.init(selector, context); }, document = window.document, push = Array.prototype.push, slice = Array.prototype.slice; jQuery.fn = jQuery.prototype = { init: function(selector, context) { // 选择器 var ret = (context || document).querySelectorAll(selector); // 转换为普通数组 ret = slice.call(ret); // jQuery API 的奥妙全在下面这句,将选择器获取的元素添加到 jQuery 对象中 // 使用 push, 速度飞快(当年担心大量 jQuery 对象实例化的性能问题,根本就不是问题) // 使用 push, 还能自动更新 length 属性 push.apply(this, ret); return this; }, length: 0, // 实例方法 attr: function(name, value) { return access(this, name, value, jQuery.attr); } }; // 这句保证了 init 方法里的 this 拥有 jQuery 实例的方法 jQuery.fn.init.prototype = jQuery.fn; // 静态方法 jQuery.attr = function(elem, name, value) { if (value === undefined) { return elem.getAttribute(name); } return elem.setAttribute(name, value); }; // 神奇的 access, 在实例方法和静态方法中建立了一座桥梁 // 数组批次操作的实现也在这里 function access(elems, key, value, fn) { var length = elems.length; if (value !== undefined) { for (var i = 0; i < length; i++) { fn(elems[i], key, value); } return elems; } return length ? fn(elems[0], key) : null; } win.$ = win.jQuery = jQuery; })(window);
测试页面:study-jquery-in-simplified-way.html (请在非 IE 浏览器下运行) :IE6,7不支持querySelectorAll方法;
源码:jquery~core.js
相关文章推荐
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- JQuery学习笔记(二)——简单操作+data方法
- 简单工厂、工厂方法和抽象工厂的学习笔记
- 学习jQuery必须知道的几种常用方法
- jQuery获取对象简单实现方法小结
- JavaScript的jQuery库中ready方法的学习教程
- jQuery学习笔记--JqGrid相关操作 方法列表 备忘 重点讲解(超重要) .
- 简单认识JQuery的Ajax中的ajax()方法
- jQuery+ajax简单实现文件上传的方法
- 一个简单的jQuery插件制作 学习过程及实例
- 【04】jQuery事件的绑定、触发、及监听方法简单说明
- JQuery原理介绍及学习方法
- 利用JQuery直接调用asp.net后台的简单方法
- jquery 新手学习常见问题解决方法
- Jquery简单分页实现方法
- JQuery学习笔记-JQuery的html()方法和val()方法
- node.js学习之用路由方法获取简单的图文html页面
- JQUERY常用效果简单实现方法淡入淡出,隐藏等
- 【前端学习笔记】JQuery的基本思想、常用方法
- 学习jQuery必须知道的几种常用方法