jQuery(1)--jQuery前传JavaScript101

jQuery是什么,能干什么,网络上的文章可谓多如牛毛,笔者不再讨论这些问题.笔者只是想说一下jQuery是如何实现的,(探讨一下他的代码,学习一下别人的思维).

jQuery代码写得非常优雅,这个毋庸置疑.jQuery里面使用了很多JavaScript语言的技巧,但如果我们对JavaScript本身不是很了解,那么去解读jQuery,那就相当的困难.因此笔者在介绍jquery实现的方式前,还是想说一下JavaScript.

对JavaScript介绍非常不错的文章网络上,也是很多,不过我还是非常推荐 博客园 李战 的文章,尤其是其前半部分(当然后半部发更精彩,不过其已经不是JavaScript的基础知识了) ,其对JavaScript基础和理论 的讨论可谓高屋建瓴.

有如此优秀的文章摆在面前,如果笔者继续讨论相同的问题,未免有点 班门弄斧,小丑跳梁.但笔者针对李战没有提到的几个JavaScript问题,还是想补充表述一下,就算是"狗尾续貂"吧.

1.JavaScript中function的用途

大体来说function在JavaScript中有两种用途,a.表示一个 普通方法和 b.表示一个 "类型".如果表示普通方法的时候,其可以通过function的名字,在其他对象中被调用;如果 表示是一个类型的时候,那么要调用它就需要 通过new操作符,获取到一个实例(当然如果是使用这个类型的"静态方法"的时候,其需要直接使用这个类型的名字的). 如果能明白function的这两种用途,那么大家就不会迷惑 JavaScript的function中的 "this",究竟是指谁了: a.如果其表示一个普通方法,那么function中的this就指 调用这个function的对象(即调用者);b.如果其表示一个类型,那么function中的this,就表示当前这个function通过new 实例化后的对象.

2.JavaScript中 类型的 "静态成员"和"实例成员"

如果function表示一个"类型"的时候,那么其可以拥有 "静态成员"和"实例成员"的.

我们首先来看一下代码

var xieRan = function() {
      this.userName = "xieran";
      this.getName = function() {
        return "my name is " + this.userName;
      };
    }

这段代码我通过function定义了一个"类型"--xieRan,这个类型内部我们定义了一个属性(userName)和一个方法(getName),那么这两个成员,我们说其就是"实例成员",因为我们可以通过 new 一个类型获取实例后,在其上进行调用,如下:

var myInstance = new xieRan();
    myInstance.getName();
    myInstance.userName;

这个说的"实例成员",接下来我们在说一说"静态成员",我们知道 JavaScript语言相当的灵活,其可以在类型的"外部",将相应的成员"附加"到类型上,如下(注意:此处的"外部"二字)

var xieRan = function() {
      this.userName = "xieran";
      this.getName = function() {
        return "my name is " + this.userName;
      };
    };

xieRan.location = "qindao";
xieRan.getLoacation = function() {
   return "qingdao City";
};

这样,我们使用loacation和getLoacation()的时候,就可以通过类型的名称直接调用(而不用,同时也不能new一个实例去调用这些成员)这些成员,如下:

xieRan.location;
xieRan.getLoacation();

时间: 2024-12-03 20:04:47

jQuery(1)--jQuery前传JavaScript101的相关文章

jquery实现图片上传前本地预览功能_jquery

本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

基于jQuery通过jQuery.form.js插件实现异步上传_jquery

本文主要从前台和后台代码分析了jquery.form.js实现异步上传的方法,分享给大家,具体代码如下 前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.7.2.min.j

php jquery 多文件上传简单实例

 这篇文章主要介绍了php jquery 多文件上传简单实例,有需要的朋友可以参考一下   代码如下: <div id="mulitplefileuploader">Upload</div>     <div id="status"></div>   <script>     $(document).ready(function()   {     var settings = {       url: &

firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误

 这篇文章主要介绍了firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误,分析了下,原来是利用flash进行post上传时没有包含原来的session信息,而是重新创建了一个session,知道原因了,我们来看看如何解决吧.     解决了uploadify插件在chrom频繁崩溃的问题,又遇到了新问题,ff浏览器下报HTTP 302错误, ff浏览器下 uploadify 利用flash进行post上传时没有包含原来的session信息,而是重新创建了一个se

php中使用jquery uploadify 无法上传视频文件问题

问题描述 php中使用jquery uploadify 无法上传视频文件问题 快疯掉了 同样的代码上传图片打印出来就有数据没问题 但是我改成视频 就会这样 希望能解答一下 跪谢 解决方案 我刚发表了一篇此类文章. 你是用的集成软件还是自己搭的环境? 我是nginx服务器上修改的php.ini除了重启服务器之外还要重启fastcig进程管理器php-fpm 解决方案二: 估计跟视频的大小相关. 打印phpinfo 查看upload_max_filesize和post_max_size 解决方案三:

jquery ajax 向后台传 json 数组 出现 400 错误,后台用的springmvc

问题描述 jquery ajax 向后台传 json 数组 出现 400 错误,后台用的springmvc 解决方案 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. 应该是你发送的内容出问题了 解决方案二: 400,服务器自动返回的错误,是你请求的参数与后台的mvc路由无法匹配吧 解决方案三: 你将data:stringify(rows)更改为data:rows试试 解决方案四: 测试了你的代码,报415错误,就是服务器拒绝处理请求.原因是你传递的

jqm 上传文件 拍照-jquery mobile如何上传一个文件以及如何拍照

问题描述 jquery mobile如何上传一个文件以及如何拍照 jquery mobile代码如下总是失败提示request failed .$().ready(function () { $('#save').click(function (e) { CalluploaderHandler(); });}); function CalluploaderHandler(){ $.ajax({ type: ""POST"" url: ""Serv

jQuery Ajax方式上传文件的方法_AJAX相关

jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传

jQuery简单验证上传文件大小及类型的方法_jquery

本文实例讲述了jQuery简单验证上传文件大小及类型的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery1.8/jquery-1.8.0.js" type="