`
zhangyaochun
  • 浏览: 2614193 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

jQuery源码浅谈系列---部分过滤选择器

阅读更多

jQuery源码浅谈系列---部分过滤选择器

 

      ----今天包含的是我们常用的slice,eq,first,last

           之所有吧这些放一起,很大程度上因为它们的调用是相似的。

 

1.   slice(start,[end])  返回的是jQuery对象

 

  -----参数说明:

 

  •  start {Integer} -----开始选取子集的位置。第一个元素是0,如果是负数,则可以从集合的尾部开始
  •  end {Integer}  ----可选,结束选取自己的位置,如果不指定就是本身的结尾。
/*版本取的是1.4.2
原理上会调用Array.prototype.slice给内部的api---pushStack做参
参数处理上没有在()定义,而是从arguments里面获取
*/
slice: function(){
    return this.pushStack(slice.apply(this,arguments), "slice" ,slice.call(arguments).join(","));
}
        

 

 

 

2.   eq(index)

 

 --------获取第N个元素(index从0开始)返回的是jQuery对象

 

 

/*
@param i ---index 从0开始
@依赖与jquery的slice
*/
eq: function(i){
    //判断i ===-1 那么调用jQuery的slice
    return i === -1 ? this.slice(i) : this.slice(i, +i +1);
}

 

3.  first() 

 

 --------获取第一个元素 返回的是jQuery对象

 

 

/*
核心思想就是调用eq 传一个index为0的参数
*/
first: function(){
     return this.eq(0);
}

 

4.  last()

 

 ------获取最后一个元素

 

 

/*
核心思想还是调用jQuery的eq传一个参数index为-1
有的人会问为什么是-1 你看看Array的原生的slice从后面查找是不是-1
我也写过原生slice的一些文章可以参考
*/
last: function(){
    return this.eq(-1);
}

 

 

其实作为外部接口来讲这些很简单和清晰,但是作为这些api实现的底层------pushStack才是核心。

 

/*
这边的push是引用原生的Array.prototype.push
@param elems
@param name   ---如果是slice调用传过来的多是slice
@param selector 
*/
pushStack : function(elems,name,selector){
     //创建一个新的jQuery对象
     //当然如果你是一个多版本的研究者你会发现从1.5.1开始这边的代码变了
     //var ret = this.constructor();
     var ret = jQuery();
  
     //会调用工具类判断参数elems是否是array
     if(jQuery.isArray(elems)){
          push.apply(ret,elems);
     }else{
          //如果不是数组的话调用merge的api
          //如果不清楚可以看看我的其他的merge的文章
          jQuery.merge(ret,elems);
     }
     //绑定一个属性并赋值this对象给它
     ret.prevObject = this;
     ret.context = this.context;

     if(name === "find"){
         ret.selector = this.selector + (this.selector ? " " : "") +selector;
     }else if(name){
         ret.selector = this.selector + "." +name+ "("+selector+")";
     }
      return ret;
}
 
2
1
分享到:
评论

相关推荐

    jquery.datepicker-zh-CN.js

    <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...

    jQuery-, jQuery源码解读 -- jQuery v1.10.2.zip

    《jQuery源码解读——深入理解jQuery v1.10.2》 jQuery,这个轻量级的JavaScript库,自2006年发布以来,以其简洁的API和强大的功能深受开发者喜爱,成为Web开发领域中不可或缺的一部分。本文将对jQuery v1.10.2的...

    插件jquery-ui-timepicker-addon.js

    jquery插件jquery-ui-timepicker-addon.j

    下拉菜单jquery.editable-select-master

    总之,jQuery.editable-select-master是一款强大的下拉菜单解决方案,它的实时编辑、多选功能、自定义过滤和事件监听等特性,为开发者提供了丰富的选择和高度的灵活性。在实际的网页开发中,善用这款插件,无疑可以...

    jquery.qtip-1.0.0-rc3.js

    jquery.qtip-1.0.0-rc3.js 弹出层

    jquery-ui-dialog-demo

    jQuery UI 是一个开源的 JavaScript 库,它是基于 jQuery 的扩展,提供了大量的用户界面组件,如拖放、日期选择器、滑块、对话框等。jQuery UI 的设计目标是与 jQuery 核心库无缝集成,为开发者提供了一套完整的前端...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jQuery-Timepicker-Addon-master(jquery 日历时间)

    《jQuery-Timepicker-Addon:构建高效日历时间选择器》 在Web开发中,用户界面的易用性和交互性是至关重要的。jQuery-Timepicker-Addon是jQuery库的一个扩展,为网页提供了一种优雅的方式来处理日期和时间的选择。...

    jquery.ui.datepicker-zh-CN.js

    jquery-ui日历控件还是很人性化的,但官网没找到很好的中文版,这里上传一下

    jQuery-File-Upload-9.12.1

    6. **事件驱动**:jQuery-File-Upload通过触发一系列的事件,如`start`, `progress`, `done`, `fail`等,让开发者能够灵活地控制上传流程,并根据需要添加自定义逻辑。 7. **自定义样式和行为**:开发者可以根据...

    jquery-ui-timepicker-addon

    jQuery UI Datepicker日期选择插件很好用,但是不满意的是不能精确到时分秒,而jquery-ui-timepicker-addon.js正是基于jQuery UI Datepicker的一款可选时间的插件。 使用方法: 1.把下载的文件包含到页面里面 2....

    jQuery源码分析系列.pdf

    ### jQuery源码分析系列知识点概览 #### 一、总体架构与核心概念 - **前言开光**:介绍分析jQuery源码的目的和价值,强调通过深入研究源码,可以学习到先进的设计理念和实践技巧。 - **总体架构**:解析jQuery的...

    jQuery-File-Upload-9.11.2(完整版,插件已下载).zip

    jQuery-File-Upload-9.11.2(完整版,插件已下载),官方的很多引用文件都是线上的,加载很慢,下载到本地后更靠谱,这个版本是已经整理好的,直接调用后台php的部分也在其中,可以直接应用到项目中,直接拷贝过去就...

    jquery插件jquery-ui-1.8.2.custom.min.js

    《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...

    Jquery源码分析 源码

    - **模块化**:jQuery源码采用模块化设计,如核心功能、选择器、遍历、属性操作、事件等都是独立模块,便于维护和扩展。 - **工厂函数**:$(selector)是jQuery的工厂函数,它接受字符串、DOM元素或jQuery对象,...

    jQuery源码分析-插件

    jQuery源码分析-插件

    jquery 学习笔记源码 1-3章

    基本选择器(ID选择器、类选择器、标签选择器)已经提及,更进一步,还有层次选择器(如后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器),属性选择器(根据元素的属性和值来选择),以及伪类选择器(如...

    jQuery学习示例源码--jQuery基本知识

    在"jQuery系列教程代码"压缩包中,可能包含了多个示例文件,每个文件都对应一个jQuery的特定知识点,比如选择器的应用、DOM操作实例、事件处理示例、动画效果展示以及Ajax请求的实现。通过查看这些代码,你可以更...

    前端项目-jquery-ui-timepicker-addon.zip

    前端项目-jquery-ui-timepicker-addon,TimePicker插件将TimePicker添加到jQueryUI日期选取器中,因此使用任何一个日期选取器和滑块组件(jQueryUI)都是必需的。此外,所有datepicker选项仍然可以通过TimePicker插件...

Global site tag (gtag.js) - Google Analytics