Web前端开发笔记51——jQuery排他思想、获取当前元素索引、链式编程

本文通过实例展示了jQuery的排他思想，包括点击按钮改变颜色并保持其他按钮样式，以及使用隐式迭代实现竖向选择框。重点讲解了链式编程的应用和$(this).index()索引获取。

1.Jquery的排他思想我们使用一个示例来演示一下：

<body>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<button>"click"</button>
<script>
    $("button").click(function () {
        $(this).css("background", "rgb(232,228,150)");
        $(this).siblings("button").css("background", "");
    })
</script>

上面的代码实现了点击一个按钮可以改变颜色，但是其它颜色恢复。

在之前我们讲过，jQuery具有隐式迭代，会自动嵌套同类选择元素。

效果图：

2.下面使用隐式迭代排他思想做一个竖向选择框的案例。

我们实现一下选中那个模块就让哪一个模块的字体显示在灰色底纹处。

<div class="div1">
    <ul>
        <li>手机</li>
        <li>电脑</li>
        <li>笔记本</li>
        <li>护肤品</li>
        <li>今日特卖</li>
    </ul>
</div>
<div class="content">

</div>
<script>
    $("ul>li").bind("mouseover", function () {
        $(".content").text($(this).text())
    })
</script>

具体如上，这里不显示css内容。

3.我们可以通过$(this).index()来获取当前选中的元素索引，从0开始的索引。

4.在第一个例子中，我们使用了以下代码来实现对点击的按钮改变颜色，而其他兄弟清除样式的功能。我们JQuery给我们提供了更为快捷的编程方式：链式编程，我们来看看效果。

 $("button").click(function () {
        $(this).css("background", "rgb(232,228,150)");
        $(this).siblings("button").css("background", "");
    })
//这里是原先的两句话方式，下面的是链式编程方式
$(this).css("background", "rgb(232,228,150)").siblings("li").css("background", "");

效果也是一样的。如下：