自己mini版jquery编写

(function(){
    var jq = function(selector){
        //selector = "#apple";
        return new jq.fn.init(selector);
    }

    jq.fn = {
        init:function(selector){
            //选择器设置: #id  和 tag标签 选择器两种
            if(selector.substr(0,1)===‘#‘){//判断是否有"#号"
                //去除selector的“#号”
                var flag = selector.substr(1,selector.length-1);
                var elem = document.getElementById(flag);
                //this代表jquery实例化出来的对象
                //jquery对象 与 dom对象 做合并
                this.length = 1;
                this[0] = elem;
            }else{
                var elems = document.getElementsByTagName(selector);
                //遍历elems,获得每个dom对象分别存储this里边
                for(var i=0; i<elems.length; i++){
                    this[i] = elems[i];
                }
                this.length = elems.length;
            }
        },
        css:function(k,v){
            //this代表调用该方法的当前对象(jquery对象)
            //this[0].style[k] = v;
            //遍历当前的jquery对象,为每个具体dom对象设置css样式
            for(var i=0; i<this.length; i++){
                this[i].style[k] = v;
            }
        },
        attr:function(k,v){
            for(var i=0; i<this.length; i++){
                this[i].setAttribute(k,v);
            }
        },
        each:function(callback){
            //遍历jquery对象,使得每个dom对象都执行一次callback
            for(var i=0; i<this.length; i++){
                //this[i]
                //callback();
                //callback.call(函数内部this的指引,函数形参,形参,形参);

                //callback函数随着for循环执行了多次,
                //每次执行的时候内部this都指向“this[i]的dom对象”
                callback.call(this[i],i,this[i]);
            }
        }
    }

    //设置init()构造函数通过原型prototype方式继承jq.fn()
    //这样new init()的对象不仅可以方法init内部成员,还可以方法fn的成员
    jq.fn.init.prototype = jq.fn;

    //给jquery声明外部使用接口变量
    window.$ = jq;
})();
时间: 2024-10-31 10:30:30

自己mini版jquery编写的相关文章

迷你版jQuery——zepto核心源码分析

前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQuery,小钗暂时没有那个本事分析jQuery,这里就恬不知耻说说自己对zepto的源码理解,希望对各位有用 首先zepto的出现其实还是很讨巧的,他看见了巨人jQuery在移动浪潮来临时的转身慢.牵挂多的问题 马上搞出了一套轻量级类jQuery框架代码,核心代码1000行不到,快速占领了移动端的市场,

用JQuery编写textarea,input,checkbox,select

今天学习怎样用JQuery编写一些小的代码,小小的试了一下编写一个textarea,代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="screen"> *{ marg

jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

相当精简的CentOS个人桌面版--从CentOS6.3 32b-mini版開始(mini版过程略)

利用网络实现相当精简的CentOS个人桌面版--从CentOS6.3 32位mini版開始(mini版过程略).升级后即是CENTOS6.5. 特别感谢163网易的镜像空间[http://mirrors.163.com].搜狐的镜像空间[http://mirrors.sohu.com]提供的CENTOS安装光盘镜像. 详细的32位MINI版安装过程因为不是太特别.网上也有不少安装步骤可看.这里就不写了,仅仅写安装好以后要做的,以下是步骤: yum install wget cd /etc/yum

再谈:jquery编写插件的方法

版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2.使用$.extend(obj) 3.使用命名空间 类级别开发插件(用的非常少,1%) 分别举例: //1.直接给jquer添加全局函数 jQuery.myAlert=function (str) { alert(str); }; //2.用extend()方法.extend是jquery提供的一个方

cocos2dx游戏开发&mdash;&mdash;捕鱼达人mini版学习笔记(一)&mdash;&mdash;FishAchor的搭建

一.创建文件·         FishAchor.h还有FishAchor.cpp.    主要就是创建每种鱼的类,方便以后的取用~,很多是重复性的操作,然后我们是mini版,暂时也就加入大概6钟鱼就好= =,然后我们现在就来搭建~. 二.鱼的基类 1.定义~ class FishActor : public Sprite //继承精灵类,然后作为各种鱼的基类,有最基本的属性 { public: enum class FishActorType //首先在这里需要得知,鱼的类型 { Small

安装MySQL5.7 安装环境:CentOS7 64位 MINI版,

安装环境:CentOS7 64位 MINI版,安装MySQL5.7 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads/repo/yum/ # 下载mysql源安装包 shell> wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm # 安装mysql源 shell> yum localinstall mysql57-commun

Java(随笔)——利用HTML,CSS,JavaScript,JQuery编写的简易计算器

一.利用刚学过的前端知识做一个简易的计算器里边使用到了HTML,CSS,JavaScript以及JQuery的知识代码如下:(1)利用CSS设计了计算器外形样式:(2)利用JavaScript实现了建议计算器的功能:代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <link rel="styl

JQuery编写自己的插件(七)

一:jQuery插件的编写基础1.插件的种类编写插件的目的是给一系列已经方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率.常见的种类有以下三种:封装对象方法的插件 二:编写自己的插件1.封装jQuery对象方法的插件Step1:框架;(    function($) {    $.fn.extend({        ….        });    })(jQuery) 实例:改变背景色 ;( function($) { $.fn.extend({ "color&quo