`
roccloudy
  • 浏览: 734 次
  • 性别: 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工作流程步骤进度插件ystep详解** 在网页开发中,为了清晰地展示复杂的步骤流程,如用户注册、购物流程或者项目审批等,工作流程步骤进度插件显得尤为重要。ystep是一款基于jQuery的高效插件,它能帮助...

    jQueryEasyUI从零开始学源码part1

    本教程“jQueryEasyUI从零开始学源码part1”旨在帮助初学者深入理解jQuery EasyUI的工作原理,通过源码分析来提升开发技能。 首先,我们需要了解jQuery EasyUI的基础概念。jQuery是一个轻量级的JavaScript库,简化...

    从零开始学习jQuery

    通过《从零开始学习jQuery》的系列教程,你将逐步掌握jQuery的核心概念,理解其工作原理,并能够运用到实际项目中,提升网页开发的效率和质量。记得动手实践,结合实例加深理解,祝你学习愉快!

    jquery-3.5.1.min.js_jquery-3.5.1.min.js_jquery_

    然而,随着ES6等现代JavaScript特性的普及,一些开发者开始质疑是否还需要依赖jQuery。尽管如此,对于需要快速开发、维护大型项目或者需要兼容旧浏览器的场景,jQuery仍然具有不可替代的价值。因此,了解并熟练掌握...

    jquery.lazyload图片预加载效果 jquery预加载

    jQuery LazyLoad 是一个jQuery插件,它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片,而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量,提高了页面的加载速度...

    《从零开始学JQuery》Word版书籍及常用jquery资料

    《从零开始学JQuery》是一本非常适合初学者入门的jQuery教程,旨在帮助读者快速掌握这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务,使得网页开发更为便捷。在Word版书籍中...

    jQuery中文资料电子书教程

    - `从零开始学习jQuery.pdf` 和 `Learning+jquery中文版.pdf` 是两本完整的jQuery教程,它们从基础到高级全面讲解了jQuery的核心概念和技术,适合初学者系统学习。 - `15天学会jQuery` 可能是一个快速学习计划或...

    从零开始学习jQuery教程_c#.net版.zip

    《从零开始学习jQuery教程_c#.net版》是一份针对初学者设计的全面教程,旨在帮助没有基础的读者快速掌握jQuery这一强大的JavaScript库。jQuery简化了JavaScript中的DOM操作、事件处理、动画效果以及Ajax交互,使得...

    jquery实现PDF在线预览 jquery实现在线预览PDF文档

    2. **配置PDF.js**:PDF.js库需要一些配置才能工作。例如,设置默认的PDF文件URL,以及指定渲染PDF的容器元素。 ```javascript var pdfUrl = 'path/to/your/pdf/file.pdf'; var container = $('#pdf-container'); `...

    Jquery各种教程打包

    2. **《Jquery1.2.6源码分析.pdf》**:这本书籍或文章可能详细剖析了jQuery 1.2.6版本的源代码,帮助开发者理解jQuery的内部工作原理,包括如何优化性能、处理DOM操作、实现高效选择器等。通过源码分析,开发者可以...

    从零开始学习JQuery

    1. **强大的功能函数**:jQuery提供了丰富的功能函数,帮助开发者快速实现各种功能,让代码更加简洁、高效。 2. **解决浏览器兼容性问题**:通过统一的事件对象处理,jQuery解决了不同浏览器间的兼容性问题。开发者...

    jquery-migrate

    1. **恢复已移除的API**: jQuery 1.9开始移除了部分不再推荐使用的API,如`.live()`, `.size()`, `.data()(处理原始值)`等。jQuery Migrate会重新引入这些方法,以便在升级过程中能正常运行依赖它们的代码。 2. *...

    jQuery Gantt 甘特图

    以上代码创建了一个基本的jQuery Gantt实例,显示了从2022年1月1日到12月31日的项目任务。 **4. 扩展与优化** jQuery Gantt可以通过以下方式进行扩展和优化: - **自定义模板**:通过编写自定义模板,可以改变任务...

    jquery文件上传插件 jquery.uploadify.js

    总的来说,jQuery.uploadify.js是一个强大的文件上传解决方案,它的兼容性增强使得它能够在各种浏览器环境中稳定工作,而与C#的结合则保证了服务端处理的灵活性。对于需要在多种浏览器环境下实现文件上传功能的Web...

    jQuery 常用版本大全

    2. **jQuery 2.x系列**:从这个版本开始,jQuery放弃了对旧版IE的支持,从而可以更轻量级,更快地运行。如果你的项目不需要考虑旧版IE,那么2.x系列是一个不错的选择。 3. **jQuery 3.x系列**:这个版本引入了更多...

    jquery-2.2.4

    2. **性能提升**:在2.x版本中,jQuery团队进行了大量的优化工作,使得库的运行速度比1.x系列更快,特别是在现代浏览器中。 3. **API变化**:一些不常用或者过时的方法在2.x版本中被移除,例如`$.browser`,鼓励...

    Angle-3.4-jquery

    它通常包含基本的项目结构、配置文件和示例代码,帮助开发者快速搭建新项目,避免从零开始的繁琐工作。backend-jquery-seed中可能包括了jQuery的核心库、常用的插件、模板引擎以及服务器配置等,使得开发者能够按照...

Global site tag (gtag.js) - Google Analytics