jQuery之美——对象访问

版权声明:黄河爱浪,[email protected], https://blog.csdn.net/u013350495/article/details/82533167

上篇回顾:jQuery之美——事件处理

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

首先说一说  $(select).length  $(select).size() 前者jQuery对象的全局属性,后者jQuery对象的方法,但它们的功能都是一样的:返回元素的数量。我比较喜欢用 size() 因为这种方法的写法我比较喜欢,但是他们功能上是无异的。

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本身也提供了相应的方法。本篇文章不做讲述,请自行主动去学习吧!

下篇预告:jQuery之美——插件机制

更多精彩文章,敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦,或者打开微信公众号搜索 “web-7258”,关注后会在第一时间将最新文章推送给您哦

猜你喜欢

转载自blog.csdn.net/u013350495/article/details/82533167