jQuery API之get、eq、find的使用和实现

心已赠人 2022-01-20 10:23 163阅读 0赞

## get ##

*  参数：
    
     *  index：元素索引
 *  作用：
    
    1.  将jQ对象转换为DOM对象，并获取该DOM对象
 *  说明：
    
    1.  index为空、null，undfined，返回所有选中DOM对象
    2.  index为正整数，返回从左至右索引index的DOM对象
    3.  idnex为负整数，返回从右至左索引index的DOM对象
 *  code：

<div class="demo demo1"></div>
        <div class="demo demo2"></div>
        <div class="demo demo3"></div>
    复制代码

var $Demo = $('.demo');
      
        // 获取第一个demo
        var firstDemo =$Demo.get(0);
        console.log(firstDemo); // 执行结果：输出<div class="demo demo1"></div>
      
        // 参数为null
        var allDemo = $Demo.get(null);
        console.log(allDemo); // 执行结果：输出[div.demo.demo1, div.demo.demo2, div.demo.demo3]
    复制代码

## eq ##

*  参数：
    
     *  index：元素索引
 *  作用：
    
    1.  获取索引值对应的jQ对象
 *  说明：
    
    1.  当参数为null, false时，获取索引为0的jQ对象
    2.  index为正整数，返回从左至右索引index的jQ对象
    3.  idnex为负整数，返回从右至左索引index的jQ对象
 *  code：

<div class="demo demo1"></div>
        <div class="demo demo2"></div>
        <div class="demo demo3"></div>
    复制代码

var $Demo = $('.demo');
        // 获取第一个demo
        var firstDemo =$Demo.eq(0);
        console.log(firstDemo); // 执行结果：输出[div.demo.demo1, (忽略)prevObject: jQuery.fn.init(3)]
    
        var allDemo = $Demo.eq(null);
        console.log(allDemo); // 执行结果：输出[div.demo.demo1, (忽略)prevObject: jQuery.fn.init(3)]
    复制代码

## find ##

*  参数：
    
     *  selector字符串
 *  作用：
    
    1.  在已有值的基础上，获取符合selector条件的jQ对象
 *  code：

<div class="wrapper">
            <div class="demo demo1"></div>
            <span class="demo demo2"></span>
            <p class="demo demo3"></p>
        </div>
    复制代码

var $Wrapper = $('.wrapper');
        // 获取wrapper内类名为demo，并且为p标签的jQ对象
        var $PDemo = $Wrapper.find('p.demo');
        console.log($PDemo); // 执行结果：输出[p.demo.demo3, (忽略)prevObject: jQuery.fn.init(1)]
    复制代码

## 实现原理 ##

#### get： ####

jQuery.prototype.myGet = function (num) {
        return num == null ? 
                Array.prototype.slice.call(this) : 
                (num >= 0 ? this[num] : this[num + this.length]);
    };
    复制代码

#### eq： ####

jQuery.prototype.pushStack = function (dom) {
        dom.prevObject = this;
        return dom;
    };
    
    jQuery.prototype.myEq = function (num) {
        var dom == null ? 
            null : (num >= 0 ? this[num] : this[num + this.length]);
        // this.pushStack为dom添加prevObject属性，值为作用域中的this，
        // 方便.end的链式调用
        // jQuery为jQ的构造函数，返回jQ对象
        return this.pushStack(jQuery(dom));
    };
    复制代码

发表评论取消回复

表情：

评论列表（有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery的插件fullpage的使用和基本实现

fullpage的使用 fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：支持鼠标滚动支持前进

深碍√TFBOYSˉ_/ 2022年11月29日 08:07/ 0 赞/ 388 阅读

相关使用JavaScript原生API替换Jquery

Query目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便

左手的ㄟ右手/ 2022年08月03日 11:53/ 0 赞/ 148 阅读

相关 jQuery API

jQuery123 的 [jQuery API 中文文档][jQuery API] Shifone 的 [jQuery API 3.3.1 速查表][jQuery API

秒速五厘米/ 2022年05月28日 04:55/ 0 赞/ 155 阅读

相关【JavaScript】实现两个jQuery API

window.jQuery = function(nodeOrSelector) { var nodes = {} //包装这个要返回的jQue

刺骨的言语ヽ痛彻心扉/ 2022年04月04日 07:54/ 0 赞/ 185 阅读

相关 SharePoint REST API - 使用REST API和jQuery上传一个文件

本篇主要通过两个代码示例来展示如何应用REST API和jQuery上传文件到SharePoint。示例会使用REST接口和jQuery AJAX请求来将一个本地文件添加到

叁歲伎倆/ 2022年04月03日 08:10/ 0 赞/ 198 阅读

相关实现一个简单的JQuery API

今天要模仿jQuery来实现两个API，他们的功能是： 1 为选中的标签添加某个 class 2 将选中的标签的value替换为某个text 首先，顺着这个

不念不忘少年蓝@/ 2022年02月24日 11:46/ 0 赞/ 242 阅读

相关 jQuery的使用和简介

jQuery是一个javascript库，使用js代码编写的作用： 1.解决浏览器中的兼任问题，如IE6,IE7 2.可以简化代码的编写方式，操作DOM对象可以很方便

怼烎@/ 2022年02月22日 23:42/ 0 赞/ 206 阅读

相关 JS基础之手动实现简易jQuery api

今天主要实现以下两个api： 1. addClass：给指定标签增加class 2. setText:给指定标签设置文本内容(textContent) 第一版第

喜欢ヅ旅行/ 2022年01月21日 08:23/ 0 赞/ 208 阅读

相关 jQuery API之get、eq、find的使用和实现

get 参数： index：元素索引作用： 1. 将jQ对象转换为DOM对象，并获取该DOM对象说明：

心已赠人/ 2022年01月20日 10:23/ 0 赞/ 164 阅读

相关 jquery之DataTables的使用

jquery之DataTables的使用 [document][] [jquery][] [function][] [lsquo][] 强大的表格解决方案，有多强

野性酷女/ 2021年09月17日 13:12/ 0 赞/ 393 阅读