在开发前端页面时，jquery是一个非常常用的Javascript框架，它能够大大提高我们开发的效率。然而，掌握jquery的关键在哪里呢？其实，使用indexof方法找出目标字符串位置是非常重要的一点。

何为indexof方法

indexOf方法是Javascript字符串提供的一个方法，主要用来获取一个字符串中某个子字符串的位置。具体格式如下：

str.indexOf(searchValue,start)

其中，str为要查找的字符串，searchValue为需查找的子字符串，start为可选参数，表示开始查找的位置。如果未设定，则默认从头开始查找。

应用场景

在使用jquery时，如果我们需要定位某个子元素在父元素中的位置，就可以用到indexOf方法。比如说，我们想要找到一个class名为“target”的元素在父元素中的位置，就可以这样操作：

var index=$('.target').parent().children().index($('.target'));

console.log(index);

这个方法会返回目标元素在其父元素的子元素中的位置，从0开始计数。但是，使用parent().children().index()这个方法在底层实现时比较耗时，如果DOM结构非常复杂，就会严重影响性能。这时，我们就可以使用indexOf方法来获取目标元素的位置，提高效率。例如：

var index=$('.target').parent().html().indexOf($('.target').prop('outerHTML'));

console.log(index);

这个方法会返回目标元素在其父元素的所有子元素中的位置，从0开始计数。这里，我们使用了prop('outerHTML')方法获取目标元素的HTML字符串，然后使用indexOf找到该字符串在父元素HTML中的位置。

代码实现

为了更好地说明indexOf方法的使用，下面我们来实现一个小栗子：

1.我们需要首先创建一个ul列表，其中有4个li元素；

2.给每个li元素添加一个click事件，当点击时，控制台会输出该元素在ul列表中的位置。

见代码：

• 1
• 2
• 3
• 4

运行效果如下图：

这里，我们使用了click事件来获取用户点击的元素对象，再使用indexof方法来获取该元素在ul列表中的位置。

总结

在开发前端页面时，我们可以使用jquery来大大提高我们的效率。当使用jquery的parent().children().index()方法不够高效的时候，我们可以利用indexOf方法来获取目标元素的位置，提高效率。这样不仅能够提高页面的性能，还能够让我们更加熟悉jquery的相关知识。