关于jQuery插件的index选择器index()方法的一些操作细节

最新推荐文章于 2023-04-13 19:45:30 发布

gdqy_w

最新推荐文章于 2023-04-13 19:45:30 发布

阅读量1.6k

点赞数

分类专栏： jQuery 前端入门写作文章标签： jquery jQuery选择器 index-方法 jQuery jQuery源码

本文链接：https://blog.csdn.net/gdqy_w/article/details/65446183

版权

前端入门写作同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

关于jQuery插件的index选择器index()方法的一些操作细节
昨天晚上加今天早上研究了约四小时的结果，类似于电商网站的鼠标经过显示事件，通过index()方法来获取触发鼠标经过mousemove事件的div的index()数值（它的排列顺序在第几个）。
之前一直以为它的语法是这样的（以下省略样式）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>全JQ成功</title>
<script language="javascript" src="js/jquery-1.11.2.min.js"></script>
</head>
<body>
<div class="all">
    <a href="#"><div class="box">裤子</div></a>
    <a href="#"><div class="box">裤子</div></a>
    <a href="#"><div class="box">裤子</div></a>
    <a href="#"><div class="box">裤子</div></a>
    <a href="#"><div class="box">裤子</div></a>
    <div class="main">内容A</div>
    <div class="main">内容B</div>
    <div class="main">内容C</div>
    <div class="main">内容D</div>
    <div class="main">内容E</div>
</div>
</body>
<script>
$(function(){
    $("a").mousemove(function(){
        num = $(this).index();
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
        $(".box").eq(num).addClass("box_b");
        $(".main").eq(num).show();
    });
    $("a").mouseleave(function(){
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
    });
    $(".main").mousemove(function(){
        num = $(this).index();
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
        $(".box").eq(num).addClass("box_b");
        $(".main").eq(num).show();
    });
    $(".main").mouseleave(function(){
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
    });
})
</script>
</html>

div.main的默认样式是通过display:none隐藏的，就是一个没有任何显示的div

没有效果的基础页面

当时的情况就是把鼠标移到上方的a标签（div）时，会显示下面相对应的class=”main”的div，如图 ↓

a标签触发鼠标的mousemove()事件效果

这里写图片描述

效果大概这样，但是由于设置了a标签的mouseleave事件，鼠标在移开a标签时会把下方相对应的div.main隐藏。我想要的效果是在鼠标从上方的a标签移动到下方的div.main时，div.main不隐藏，然后我就在if代码中设置了一个if判断语句

$("a").mouseleave(function(){
        if($(".main").mousemove()){
            return;
        }
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
    });

然后失败了，是整个鼠标移开事件全都失效了。然后我又试了其他的方法，可是都不奏效。
然后这个时候想起来去年的六月份我做过的购物网站有这个相似的功能，鼠标移到下方的div时不会隐藏，两个都离开时才隐藏的效果。我查看了以前的代码，模仿着做出了一个最简陋的效果，成功了。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script language="javascript" src="js/jquery-1.11.2.min.js"></script>
<style>
*{margin:0;padding:0;}
div.big{width:300px;height:300px;border:1px solid #000; margin:0 auto;margin-top:100px;}
.t{width:300px;height:100px;background-color:#CCC;}
.b{width:300px;height:200px;background-color:#999;
    display:none;}
</style>
</head>
<body>
    <div class="big">
        <div class="t"></div>
        <div class="b"></div>
    </div>
</body>
<script>
$(function(){
    $(".t").mousemove(function(){
        $(".b").show();
    });
    $(".b").mousemove(function(){
        $(".b").show();
    });
    $(".t").mouseleave(function(){
        $(".b").hide();
    });
    $(".b").mouseleave(function(){
        $(".b").hide();
    });});
</script>
</html>

然后是效果

这里写图片描述

这个效果是成功的。
当时我就以这个思路去编写我的jQuery代码部分，却使用了上方第一段的代码

    $(".main").mousemove(function(){
        num = $(this).index();
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
        $(".box").eq(num).addClass("box_b");
        $(".main").eq(num).show();
    });

但是效果还是鼠标一移开上方a标签，下方的div.main就立即消失，相同的思路应该是没错的。然后我尝试着使用输出获取到的index()数值，结果却是-1（当时的代码我有点忘了。。。。反正输出的结果是-1）
index选择器输出结果为-1的时候，是他没有选取到任何元素的时候。
然后我上网查了下原因。之前的我一直以为index()获取到的数值是按照我给的相同的class类$(“.main”)的从0开始的顺序个数结果，然而我错了。index()方法获取到的数值是根据被获取的元素在整个父元素之内从0开始按顺序排列的数值。也就是说，第一个div.main获取到的数值是5。
然后我就按照它的规律修改了代码。

$(function(){
    $("a").mousemove(function(){
        num = $(this).index();
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
        $(".box").eq(num).addClass("box_b");
        $(".main").eq(num).show();
    });
    $("a").mouseleave(function(){
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
    });
    $(".main").mousemove(function(){
        num = $(this).index();
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
        $(".box").eq(num-5).addClass("box_b");
        $(".main").eq(num-5).show();
    });
    $(".main").mouseleave(function(){
        $(".all").find(".box").removeClass("box_b");
        $(".all").find(".main").hide();
    });
})

在div.main的mousemove触发事件中，我给它的选择器加上了“num-5“这一段。因为在整个div.all这个父元素中，因为前面排了五个a标签，那么第一个div.main是排在第六位的，根据index()获取到的值从0开始计算，用index()获取到的第一个div.main的值是5。但是用eq()方法是从类名为div.main的第一个div开始算起的。所以我把它里面通过index()获取到的div.main的值减去5，从而达到他们两个相互对应。最终打到鼠标从a标签移到下方的div.main时，下方的内容不隐藏。直到鼠标移到另一个a标签时内容发生转变或者鼠标离开a标签和下方div时，div才再次隐藏。

这点问题我居然研究了四个小时……看来基础还是太差了还要多学多练多研究……

重点：
jQuery框架的选择器获取、遍历到的数值从0开始；
index()方法获取到的值是根据父元素里面所有元素的第一个开始计算，而不是指定的标签或者类开始。

个人见解，如有出现错误希望能提出指正，谢谢！