功能：插入指定元素到父元素的第一个位置(最左边)
实例
$self.prepend($selectLi);
解释
self是selectLi的父元素,把self放在selectLi的最前面(最左边),
移动的是selectLi,
append
功能：插入指定元素到父元素的最后面(最右边)
after
实例
$firstLi.after($selectLi);
解释
把selectLi放在firstLi的后面(右边),
移动的是selectLi
注意：selectLi和firstLi 是兄弟节点
next
功能：获取下一个兄弟节点,
与之功能相反的是prev
实例
while($sele
在jQuery库中，操作DOM（文档对象模型）节点是非常常见的任务，其中包括插入、删除和查找节点等。在本文中，我们将深入探讨如何使用jQuery来插入兄弟节点，这在构建动态和交互式的网页时非常有用。
让我们了解几个关键的jQuery方法，它们允许我们在DOM树中移动或添加元素：
1. **prepend()**：
`prepend()`方法用于将一个或多个元素插入到匹配的元素集合的开头，即成为其第一个子元素。在提供的实例中，`$self.prepend($selectLi)`将`$selectLi`元素插入到`$self`的最前面。这里的`$self`是`selectLi`的父元素，因此`selectLi`被移动到了父元素的最左侧。
2. **append()**：
`append()`方法与`prepend()`类似，但它是将元素添加到匹配元素的末尾。例如，`$firstLi.after($selectLi)`将`$selectLi`插入到`$firstLi`之后，使其成为`$firstLi`的下一个兄弟节点。这里的关键点是，`selectLi`和`firstLi`必须是同级的兄弟节点才能执行此操作。
3. **after()**：
`after()`方法用于在指定元素后面插入内容。在上述示例中，它将`$selectLi`插入到`$firstLi`的右侧，使得`$selectLi`成为`$firstLi`的后一个兄弟节点。
4. **before()**：
`before()`是`after()`的反向操作，它在目标元素前面插入内容。虽然这里没有直接提到，但理解这个方法对于全面了解兄弟节点操作也很重要。
5. **next()** 和 **prev()**：
`next()`方法用于获取当前元素的下一个兄弟元素，而`prev()`则获取前一个兄弟元素。在提供的实例中，`$firstLi.next()`用于获取`$firstLi`的下一个兄弟元素，这在遍历兄弟节点序列时非常有用。
6. **find()** 和 **children()**：
`find()`方法允许我们根据选择器找到匹配的后代元素，而`children()`则只返回直接子元素。例如，`$self.find('li:nth-child('+(srcIndex)+')')`会找到`$self`中的特定子元素，`$self.find('li:first')`则获取第一个子元素。
7. **nth-child()**：
`:nth-child()`伪类用于选择具有特定索引位置的子元素。`:nth-child(2)`将选取父元素的第二个子元素，`:first`和`:last`分别代表第一个和最后一个子元素。
了解这些基本操作后，可以灵活地组合使用它们来实现更复杂的DOM操作。例如，通过迭代相邻兄弟节点，或者根据特定条件插入、替换或删除元素，我们可以创建动态内容，响应用户交互，或执行自定义的DOM更新逻辑。
在实际应用中，这些方法通常与其他jQuery功能结合使用，如事件监听、动画效果和Ajax请求，以实现更丰富的用户体验。熟练掌握这些jQuery方法对于任何前端开发者来说都是必不可少的技能。
