自制jQuery(3)

 1 (function( window, undefined ) {
 2     var jQuery = (function(){
 3         var jQuery = function(selector){
 4             return new jQuery.fn.init(selector);
 5         };
 6
 7         //这里fn是prototype的别名,后面的代码扩展fn就是扩展prototype,fn写起来简短
 8         //如果后面引用了大量的prototype,prototype因为是关键字,还不能被压缩
 9         jQuery.fn = jQuery.prototype = {
10             constructor: jQuery,
11             //这是一个构造函数
12             init: function(selector, context){
13                 var root;
14                 //如果没有root,就从document开始查找
15                 root = context || document;
16                 //
17                 var parts = selector.split(" "),                //以空格分离选择器
18                     query = parts[0],                           //取出第一段结果
19                     //slice返回从第1项到最后一项组成的一个新数组
20                     //join把数组中的每个元素转换为字符串,并且用空格连接起来,形成一个String对象
21                     rest = parts.slice(1).join(" "),
22                     elems = root.getElementsByTagName(query),   //查找匹配第一段选择器的元素
23                     results = [];                               //初始化一个数组,用于保存查询结果
24
25                     for(var i = 0; i < elems.length; i++){
26                         if(rest){
27                             //递归查找,以elems[i]为上下文,以rest为选择器表达式
28                             //concat会创建一个原数组的副本,并将find的结果添加到results末尾,,这里又将这个副本的引用存回results
29                             results = results.concat(find(rest, elems[i]));
30                         }
31                         else{
32                             //将查找到的元素保存在results数组上
33                             results.push(elems[i]);
34                         }
35                     }
36                 //真正的jQuery返回的是不是Array对象,是一个类数组对象
37                 return results;//返回Array对象
38
39             }
40         };
41         jQuery.fn.init.prototype = jQuery.fn;
42         jQuery.extend = jQuery.fn.extend = function(){
43             var ob = arguments[0];
44             for(var p in ob){
45                 if(ob.hasOwnProperty(p) && (!this.hasOwnProperty(p))){
46                     this[p]=ob[p];
47                 }
48             }
49         };
50
51         //用于扩展全局对象,所以不用jQuery.fn.extend
52         jQuery.extend({
53             isFunction: function () {
54                 if(typeof arguments[0] == "function")
55                     return true;
56                 else
57                     return false;
58             }
59         });
60
61         jQuery.extend({
62             isFrom:function(){
63             return argument[0].constructor == arguments[1];
64             //return arguments[0] instanceof arguments[1];
65         }});
66
67
68         jQuery.extend({
69             each:function(obj,callback){
70                 for(var i = 0; i < obj.length; i++){
71                     callback.call(obj || null, obj[i], i, obj);
72                 }
73             }
74         });
75 /*
76  对于HTML文档,getElementsByTagName返回的是一个HTMLCollection对象,该对象和NodeLIst对象很类似,该函数是用C++实现的
77  详见《JS高程》P257
78  return jQuery.makeArray(document.getElementsByTagName(selector));
79 */
80         jQuery.extend({
81             makeArray:function( array, results ){
82                 //array是HTMLCollection对像
83                 array = Array.prototype.slice.call( array, 0 );
84                 if ( results ) {
85                     results.push.apply( results, array );
86                     return results;
87                 }
88
89                 return array;
90             }
91         });
92         return jQuery;
93     })();
94     window.jQuery = window.$ = jQuery;
95 })(window);

目前仅支持标签选择器,如“div", "div p"。而且$("div")返回的是Array对象,和实际的jQuery不同

时间: 2024-11-06 01:50:04

自制jQuery(3)的相关文章

自制jquery可编辑的下拉框

昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致

自制jQuery焦点图切换简易插件

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s

自制jQuery标签插件

在项目中需要一个添加标签的小插件,查看了一些已有插件后,发现很现成的高级插件,也有比较简单的插件.最后还是决定自己来写,这样能控制代码,以后与其他插件结合使用的时候能更好的把控.初步在IE6 7 8,firefox,chrome中做了测试,可以通过. 我是仿照163邮箱中添加邮箱的方式写的,插件如下: 一.制作静态效果 先用html和css做出个样子出来,然后再根据样式来做动态效果. <h2 style="padding:10px">静态效果</h2> <

前端自制Jquery插件————轮播

昨天,自己心血来潮,弄了一个轮播图的插件,说来你们可能不信,这是我人生第一个插件,好,那我直接讲讲我的思路好了. 首先,我以开发者的角度来看,一个好的插件的使用方式应该简单可靠,因为我做的是Jquery插件,所以最好的使用方式我觉得应该是,$(DOM).carousel(config).其中DOM节点,用于填充轮播图片的地方,config是配置信息,包括是否循环,是否自动播放,播放时间间隔,图片地址等.因为时间短,我也只是简单实现了主要的功能. 我第一件事情做的就是布局,没错,我是先把CSS样式

自制Jquery下拉框插件

(function ($) { $.fn.select3 = function (option) { var _this = $(this); var isInit = _this.prev('div').hasClass('select3-parent'); if(isInit) return false; var _default = { className: 'select3-parent', //下拉框样式可自定义 width: '300px' }; //默认会根据元素设置的宽度给设置宽

覆盖alert对话框-自制Jquery.alert插件

Javascript 代码: (function ($) { 'use strict'; window.alert = $.alert = function (msg) { var defaultOpts = { bodyClass: 'body-cover', mainClass: 'main-cover', alertClass: 'alert-cover' }; var _body = $('body');//body var _wrap = $('<div></div>')

3kb jQuery代码搞定各种树形选择。

自制Jquery树形选择插件. 对付各种树形选择(省市,分类..)90行Jquery代码搞定,少说废话直接上插件代码.稍后介绍使用说明.是之前写的一个插件的精简版. 1.Jquery插件代码 /* * 2012年11月30日14:31:14 * haizi */ (function (j) { j.fn.attrs = function (option) { var root = this, data = []; //默认参数 var def = { url: '/ajax/GetSort/',

分享自制的13套 JQuery Mobile 界面主题

15套整合在一起的,其中2套官方+13套自制,款款精致,方便移动开发. 字体默认为微软雅黑. 适配于 JQuery Mobile 1.4.3 下载地址:http://files.cnblogs.com/SkyD/jquery-mobile-theme-155558-0.zip "少于200字的文章不允许发布到网站首页",博客园现在的这个限制真恶心,那么: 少于200字的文章不允许发布到网站首页少于200字的文章不允许发布到网站首页少于200字的文章不允许发布到网站首页少于200字的文章

JQuery 自制集团组织架构

先看效果图: 下面是代码: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content=&quo