分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

学习jquery源码架构(-)

发布时间:2023-09-06 01:21责任编辑:苏小强关键词:暂无标签

当看不懂时,可先看看这两本书《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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved