学习jquery源码架构(-)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习jquery源码架构(-)相关的知识，希望对你有一定的参考价值。
当看不懂时，可先看看这两本书《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源码架构(-)的主要内容，如果未能解决你的问题，请参考以下文章