网站首页 极客学院 视频课堂 极客论坛 下载专区 行业新闻 欢迎光临极客研究院,今天是2019-10-18 星期五
会员面板
帐号:
密码:
验证码:
极客学院
教程搜索
输入要搜索的内容:

下载专区
精品教程
   网站首页 > WEB开发 > JavaScript教程 > 金极客干货教学之:打造自己的jquery

金极客干货教学之:打造自己的jquery

编者注:本文并不是Jquery教学使用教程,而且由浅到深,打造一个自己的jquery,目的也并不是替代或超越Jquery,而且通过自己开发类似功能,能更好的理解和使用Jquery

重要:本文教程默认大家已经掌握了JS的闭包和继承机制,如果没有这方面的基础,请一定要先学习我的另一篇教程文章:

金极客干货教学之:JS高阶知识点  http://www.kimgeek.com/article_detail_345.html  

下面我们实过实例一步一步来探讨Jquery的底层运行原理。
我们都知道,$(选择器)是Jquery常用指定元素的功能,这个功能是怎么实现的呢?我们来先看个例子
<script>
function $()
{
    alert("run");
}
$();
</script>

上例是不是看到有点怪,没错,在JS中,允许拿个$来做函数名的。所以,平时我们使用Jquery的$其实是在调用一个函数

下一步我们再来一例,假如有一个如下的输入框

<input type="text" id="box" value="this is a test" />
我们在用Jquery时要取到这个输入框的值,是用如下方法:

$("#box").val("hello");

要取到这个输入框的值可以像下面一样

var sname=$("#box").val();

Jquery是如何实现在这些功能的呢?

假如我们要实现这个功能可以这样:

<input type="text" id="d1" value="" />

<script>
function $(selector){    
    tag=selector.substring(0,1);
    ele_id="";
    if(tag=="#")
    {
        ele_id=selector.substr(1);
    }
    this.obj=document.getElementById(ele_id);
    this.val=function(content="")
    {
        if(content!="")
        {
            this.obj.value=content;
        }
        return this.obj.value;    
    }
    return this;
};
$("#d1").val("this is a test");
</script>

现在我们就实现的Jquery的根据ID的选择器,并且实现了val功能。

以后我们可以慢慢扩展$这个函数里面的功能

再把$()这个函数的代码放到 myjquery.js中,使用时引用进来,我们就拥有自己开发的Jquery框架了,cool吧?


  相关文章
本文标题:金极客干货教学之:打造自己的jquery
对本文有疑问?现在就进入论坛提问>>
 
粤ICP备18090445号