码迷,mamicode.com
首页 > Web开发 > 详细

学习jquery源码架构(-)

时间:2017-10-31 20:00:23      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:callback   函数   书籍   对象   contain   call   sele   mem   nta   

当看不懂时,可先看看这两本书《JavaScript高级程序设计》和《悟透JavaScript》。

电子书籍 http://eloquentjavascript.net/全英文的。

列出JQ里的类数组对象
1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)

接着以下博客链接来练习Jquery 的javascript的构造函数、实现jquery 定义$,$("#ID").val()方法。

http://www.cnblogs.com/cx709452428/p/5771982.html(参考博客)

接下来练习代码

 实现构造函数

<script type="text/javascript">
var person = function (name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
person.fn = person.prototype = {
        say: function () {
            alert(‘My name is ‘ + this.name + ‘,I am a little ‘ + this.sex + ‘, my age is ‘ + this.age + ‘ years old.‘);
        }
}
var perpsonYunYun = new person(‘yunyun‘,30,‘girl‘);
perpsonYunYun.say();
</script>

实现jQuery(‘#myid‘).someMethod();的定义

<script type="text/javascript">
var person = function (name, sex, age) { return new person.fn.init(name, sex, age); };
    person.fn = person.prototype = {
        init: function (name, sex, age) {
            this.name = name;
            this.sex = sex;
            this.age = age;
            return this;
        },
        say: function (name, sex, age) {
            alert(‘My name is ‘ + this.name + ‘,I am a little ‘ + this.sex + ‘, my age is ‘ + this.age + ‘ years old.‘);
        }
};
person.fn.init.prototype = person.fn;
person(‘yunyun‘,‘girl‘, 30).say();

实现Jquery中的val()方法。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>测试</title>
</head>
<body class="container-fluid">
<form method="post" action="" name="myform">
<h1> 我几岁了?</h1> <br />
<input id="myInput" type="text" value="Hello world!" size="50" />
<br /><br />
<input id="otherInput" type="text" size="50" />
</form>
</body>
<script type="text/javascript">
    var dataObj = function (selector) {
        return new dataObj.fn.init(selector);
    }
    dataObj.fn = dataObj.prototype = {
        init: function (selector) {
            if (selector) this.selector = selector;
            return this.selector;
        },
        val: function (newValue) {
            if (!(this.selector && this.selector.indexOf(‘#‘) == 0 && this.selector.length != 1)) return;
            var id = this.selector.substring(1);
            alert(id);
            var obj = document.getElementById(id) ;
            
            alert("obj:"+obj);
            if (obj) {
                if (newValue == undefined) {
                    return obj.value;
                    obj.value = newValue;
                    return this;
                }
            }
        }
    }
    dataObj.fn.init.prototype = dataObj.fn;
    alert(‘object old value is ‘ + dataObj(‘#myInput‘).val());
    alert(dataObj(‘#myInput‘).val(‘I am 3 years old now!‘).val());   
</script>
</html>

 

  

 

 

  

 

学习jquery源码架构(-)

标签:callback   函数   书籍   对象   contain   call   sele   mem   nta   

原文地址:http://www.cnblogs.com/snowforever/p/7763170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!