jQuery 对象访问

港控/mmm° 2022-05-14 13:25 210阅读 0赞

本篇文章讲一讲jQuery的对象访问，对象访问常见的有 **$(select).index() **和 **$(select).length**，不常见的有 **$(select).get()** 和 **$(select).size()**

首先说一说**  $(select).length **和** $(select).size() **前者jQuery对象的全局属性，后者jQuery对象的方法，但它们的功能都是一样的：返回元素的数量。我比较喜欢用 size() 因为这种方法的写法我比较喜欢，但是他们功能上是无异的（可是size() 方法在jq1.8开始就被废弃了，不建议再使用，官方也推荐使用length，减少函数调用时的额外开销）。

jQuery在获取元素时，如果该元素不存在，jQuery也不会报错，如果您是一个优秀的前端开发者，应该会严格的控制代码的运行。

例1：设您当前正在做一个项目全局的一个二级导航。二级导航，并不是所有页面都会有，但大部分都会有存在二级导航，那么这个时候 size() 和 length 将会派上用场，在公共的js文件中，首先判断二级导航元素是否存在（查找的元素数量是否大于0），然后再执行与二级导航的相关的操作。

例2：设您当前正在做一个登录方法，如果该登录具备完善的功能，相信在用户一定时间内输入的密码错误次数达到一定数量，将弹出验证码输入框。那么这时候，当再次点击登录按钮时，将优先检测验证码，而不是提交信息给后端。所以 size() 和 length 是非常有用的！（这只是举例，我更推荐于将这种是否校验验证码的判断通过变量去实现）。

接下来再说一说 **$(select).get() **该方法使用率应该是很少的，但有些时候又是可以选择使用的。jQuery对DMO的方法封装的已经比较完美了，用到该方法的场景也是非常少的。该方法返回的是一个 DOM元素对象，jQuery获取的是一个jQuery对象，如果您当前正在使用一款插件，但是该插件参数所传递的值却是一个DOM对象的时候，即可使用该方法，使用方式不做演示，网上找找就有！

最后说一说本篇文章的重点 **$(select).index() **这个方法的功能是：返回从匹配的元素中搜索给定元素的索引值。这给我们带来非常大的方便。这个方法通常使用时都是不带参数的，该方法的参数也是非常丰富的，可以选择 .index(selector) 传递一个选择器，也可以选择 index(element) 传递一个选择的DOM元素。在这里偷偷透露一下本人在使用时，都是选择不带参数的，可能是后两种方式我不会使用吧，也确实不知道什么时候需要用到。

相信您在刚开始使用该方法时，经常会遇到你无法获取正确的索引值，一直返回 0 让您非常苦恼，曾经我也为这事苦恼过。请看下面的代码

<ul>
        <li><div>WEB前端</div></li>
        <li><div>梦之蓝</div></li>
    </ul>
    
    $("ul>li").click(function () {
        /* 能正确获取索引值 */
        alert($(this).index());
    });
    
    
    $("ul div").click(function () {
        /* 未能正确获取索引值，并一直返回0 */
        alert($(this).index());
    });

上面的代码中，通过点击 li 能获取到正确的索引，而点击 div 却获取不到正确的索引，原因是因为 index() 方法在不传参的情况下只能正确获取 兄弟节点 的索引或者 直接子元素 的索引。

上面提到了 直接子元素 那么它和 子元素 有什么区别呢？如果您是一个追求上进的开发者，那么你一定要知道它们的区别，在获取元素时选择正确的获取方式不仅能在性能上有所提升，代码的健壮性也会大大增强。如果您想做一名插件开发者，那您必须要了解。jQuery本身也提供了相应的方法。本篇文章不做讲述，请自行主动去学习吧！

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/bb49bafd21c5412985b8ff8e864834f2.png