`
roccloudy
  • 浏览: 664 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

jquery是怎样开始工作(1)

阅读更多

       学习js有段时间了,想从头把jquery的源码学习一遍,并把自己学到的知识写作笔记,算是激励自己把jquery源码学下去。希望各位高手多多指指点点。

       废话说完,直接看一段最简单的jquery代码:

$("p").hide();

 简单的解释就是:

1. “$” 字符是一个变量名,是函数JQuery的别名。所以也可以写成JQuery("p").hide();其实在jquery源码 中,会先定义一个JQuery函数,最后会执行window.$ = window.JQuery = JQuery。

 

2. $("p")就是函数调用了,传入的参数是字符串"p",然后会针对传入的参数进行一系列操作,最终返回的是一个对象。 这里面的逻辑比较复杂,在之后的学习中会一一道来。

 

       3. $("p").hide()就是调用返回来的对象上的hide()方法了。

 

       那么照着上面的理解,我们就可以写一个很经典的"hello word"的例子了:

(function(window){
    var MyJquery = function(selector){

        // 把selector参数传入init中让它去初始化
        return new init(selector);
    };

    // 初始化函数,它负责处理传入的参数
    var init = function(selector){
        alert("传入的参数是"+selector);
    }

    // init是函数不能直接添加方法,可以通过其原型对象添加方法。当然源码上不是这样实现的,我这里
    // 只是为了理解方便,以后会逐步接近源码。
    init.prototype.hello = function(){
        alert("hello world");
    }

    window.$ = window.MyJquery = MyJquery;
})(window);

 

简单理解下:这个主体代码就是一个自执行的匿名函数,为的是让函数中的变量不和全局环境中的变      量冲突,因为JS中一个函数就是一个作用域。又由于函数把window变量作为参数穿了进去,并且把变量$和MyJquery挂在了window上面,所以在外部就可以通过变量$和MyJquery访问函数里面的属性了。

 

       我们把上面的JS叫做MyJquery.js,然后就可以像访问jquery一样访问了:

$("p").hello();

       当然真正的jquery源码可没有这么简单,下节我学习jquery里面的方法究竟是怎么定义的。

 

 

 



分享到:
评论

相关推荐

    从零开始学习JQuery

    从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) ...

    深入PHP与jQuery开发 pdf格式

    你也将学到jQuery的基本工作原理,包括它如何在项目中应用,以及它的内核(强大的选择器引擎)如何工作。 1.1 为什么选择jQuery 在Web应用中,JavaScript以难以驾驭闻名。浏览器兼容性差、难以调试,又有着使人...

    jQuery EasyUI 1.4 离线简体中文API文档

    jQuery EasyUI 1 4版本更新内容: Bug(修复) menu:修复在删除一个菜单项的时候该菜单无法正确自适应高度的问题; datagrid:修复在datagrid宽度太小的时候“fitColumns”方法无法正常工作的问题 Improvement...

    《精通Javascript+jQuery》光盘源码

    第1部分 JavaScript.cCSS与DOM基础篇   第1章 ccJavaScript概述  1.1 JavaScript的起源  1.2 浏览器之争  1.2.1 DHTML  1.2.2 浏览器之间的冲突  1.2.3 标准的制定  1.3 JavaScript的实现  1.3.1...

    Jquery 技术详解

    使用 jQuery 简化 Ajax 开发(转载) jQuery 是什么? jQuery 由 John Resig 创建于 2006 年初,对于任何使用 ...当您理解并体会这一原理后,便可以开始学习本教程了,看看 jQuery 对我们的编程方式有多少改进吧。

    jquery-ui-1.12.1(js + css)

    jQuery UI提供交互,效果,小部件,实用程序和主题的组合,这些主题旨在一起工作或者自己一起工作。播放演示,查看源代码,构建主题,阅读 API文档,并开始使用jQuery UI。

    深入分析jQuery的ready函数是如何工作的(工作原理)

    本文深入分析jQuery的ready函数是如何工作的。分享给大家供大家参考,具体如下: jQuery 是一个伟大的脚本库,由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新...

    jQuery JavaScript与CSS开发入门经典

    JQuery堪称动态Web应用程序领域的编程利器,可帮助您利用更少代码完成更多工作,同时减少错误数量。jQuery将JavaScript编程量精简为寥寥数行代码,使JavaScript变得更直观,更富魅力。iQuery还允许同时为一个或多个...

    jquery-plugin-template:用于创建jQuery插件的模板。 基于jQuery-boilerplate,内置测试开始

    jQuery插件模板 一个基于jQuery插件模板和George Paterson的的测试配置。 用法 包括jQuery: < script src =" http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js " > </ script > ...

    jQuery Mobile 简介

    在开始学习 jQuery Mobile 前, 你应该了解一下基础知识: HTML CSS jQuery 如果你想学习这些知识,你可以访问本站的首页。 什么是 jQuery Mobile? jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架。 ...

    翻译jQuery1.4官方文档API

    早在jquery1.4还没有上线前,对于他的的新版本已经是沸沸扬扬了,国外的追逐者早已经从测试版就开始追,翻译jQuery1.4官方文档API,为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新...

    精通JavaScript+jQuery Part1

     第17章 小型工作室网站   17.1 分析构架   17.2 模块拆分  17.3 整体调整   第18章 企业网站   18.1 分析构架  18.2 模块拆分  18.3 整体调整   第19章 网上购物网站   19.1 分析构架  ...

    jQuery EasyUI 1.4 离线简体中文API文档 含完整开发工具包+皮肤+扩展+演示

    (题外话:从本次开始 我新增了jQuery EasyUI的专题页面 大家可以关注我的专题页来及时获取最新的EasyUI资源 专题页地址如下http:http://download.csdn.net/album/detail/343 同时也希望转载的那些朋友能保留我资源...

    jQuery模仿ExtJS之TabPanel最新

    1.帮助: TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器...

    jQuery模仿单选按钮选中效果

    刚开始学jquery,工作中有些css表单中的按钮美化很麻烦,所以想着用jquery来替换,复选框的jquery很容易,就是简单的样式切换效果,用toggleClass()方法即可。 而单选框之前一直不知道怎么做,因为在单选框中选中一...

    从零开始学习jQuery (二) 万能的选择器

    编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test的元素”, 完成这些工作只需要编写一个jQuery选择器...

    轻松实现jquery选项卡切换效果

    很早之想就学习jquery的插件写法,一直拖到现在,今天趁着没什么工作忙,搜索些资料学习下,写了个比较简单的选项卡效果。 刚开始有看到一个很通俗易通的例子:alert对话框。 jquery.alertMsg.js /** * ...

    form-checker:jQuery插件,可帮助在提交之前检查表单值

    jQuery formChecker Plugin是一个表单验证的插件,来源于实际的项目,实现上参考了工作中用到的后端验证。 快速开始 引入jQuery,1.4版本以上。 引入jquery.formChecker.js。 对要验证的表单元素使用formChecker,...

    jQuery 3.0十大新特性

    jQuery 3.0在日前发布了最终的全新版本。从2014年10月,jQuery团队对这个主要大版本进行维护开始,web开发者社区便一直在期待着这一刻的...如果你想要测试一下你的项目如何在jQuery 3.0中工作的,你可以尝试通过jQuery

Global site tag (gtag.js) - Google Analytics