当看不懂时,可先看看这两本书《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源码架构(-)
原文地址:http://www.cnblogs.com/snowforever/p/7763170.html