jquery源码的理解（一）

最新推荐文章于 2023-10-09 20:17:40 发布

岁月如歌_

最新推荐文章于 2023-10-09 20:17:40 发布

阅读量3.5k

点赞数 1

分类专栏： jquery

本文链接：https://blog.csdn.net/namechenfl/article/details/82287221

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

//jquery源码解析 
(function(ROOT) {

    // 构造函数
    var jQuery = function(selector) {

        // 在jQuery中直接返回new过的实例，这里的init是jQuery的真正构造函数
        return new jQuery.fn.init(selector)
    }

    jQuery.fn = jQuery.prototype = {
        constructor: jQuery,

        version: '1.0.0',

        init: function(selector) {
            // 在jquery中这里有一个复杂的判断，但是这里我做了简化
            var elem, selector;
             elem = document.querySelector(selector);
            this[0] = elem;

            // 在jquery中返回一个由所有原型属性方法组成的数组，我们这里简化，直接返回this即可
            // return jQuery.makeArray(selector, this);
            return this;
        },

        // 在原型上添加一堆方法
        toArray: function() {},
        get: function() {},
        each: function() {},
        ready: function() {},
        first: function() {},
        slice: function() {}
        // ... ...
    }

    jQuery.fn.init.prototype = jQuery.fn;

    // 实现jQuery的两种扩展方式
    jQuery.extend = jQuery.fn.extend = function(options) {

        // 在jquery源码中会根据参数不同进行很多判断，我们这里就直接走一种方式，所以就不用判断了
        var target = this;
        var copy;

        for(name in options) {
            copy = options[name];
            target[name] = copy;
        }
        return target;
    }

    // jQuery中利用上面实现的扩展机制，添加了许多方法，其中

    // 直接添加在构造函数上，被称为工具方法
    jQuery.extend({
        isFunction: function() {},
        type: function() {},
        parseHTML: function() {},
        parseJSON: function() {},
        ajax: function() {}
        // ...
    })

    // 添加到原型上
    jQuery.fn.extend({
        queue: function() {},
        promise: function() {},
        attr: function() {},
        prop: function() {},
        addClass: function() {},
        removeClass: function() {},
        val: function(v) {
        	//自写方式，原生方式实现
        	  v=this[0].defaultValue
        	  return v;
        },
        css: function() {},
        html:function(el){
        	//自写方式，原生方式实现
        	console.log(this);
        	el=this[0].innerText;
        	return el
        }
        // ...
    })

    // $符号的由来，实际上它就是jQuery，一个简化的写法，在这里我们还可以替换成其他可用字符
    ROOT.jQuery = ROOT.$ = jQuery;

})(window);

给自己封装的jquery实现方法的方式，

在原型上添加，也就是系统方法，

扩展方法， jQuery.extend 和 jQuery.fn.extend

以上中添加了两个方法的实现，

val和html

其中console.log(this)是获取节点，查看里边信息，便于进行操作

引入js获取后代码及显示结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="b.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<input id="cc" value="你好" name="aa">

		</input>
		<div id="aa">
			aaa
		</div>
	</body>
	<script type="text/javascript">
		console.log($("#cc").val());
		console.log($("#aa").html());
	</script>
</html>

输出如下：

岁月如歌_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery源码的理解（一）

//jquery源码解析 (function(ROOT) { // 构造函数 var jQuery = function(selector) { // 在jQuery中直接返回new过的实例，这里的init是jQuery的真正构造函数 return new jQuery.fn.init(selector) } jQuery....
复制链接

扫一扫

专栏目录