jQuery 对象访问

本篇文章讲一讲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 让您非常苦恼，曾经我也为这事苦恼过。请看下面的代码

<!-- html -->
<ul>
    <li><div>WEB前端</div></li>
    <li><div>梦之蓝</div></li>
</ul>
<!-- js -->
$("ul>li").click(function () {
    /* 能正确获取索引值 */
    alert($(this).index());
});


$("ul div").click(function () {
    /* 未能正确获取索引值，并一直返回0 */
    alert($(this).index());
});

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

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

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

微信公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号