substr tao world! length fine undefine tor lan text
当看不懂时,可先看看这两本书《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.bubuko.com/infodetail-2374629.html