使用JQuery回调的方法

选择器是JQuery中用于选择HTML元素的一种方法，它基于CSS选择器。根据选择器的类型，我们可以选中不同的元素。以下是一些常见的选择器及其用法：

1. 基于ID的选择器：选中具有特定ID的元素，例如`$("#second-link")`。

2. 基于类的选择器：选中具有特定类的元素，例如`.example`。

3. 基于属性的选择器：选中具有特定属性的元素，例如`[href]`。

4. 基于属性值的选择器：选中具有特定属性值的元素，例如`[href='index.html']`。

5. 基于次序的选择器：选中指定索引位置的元素，例如`a:eq(1)`。

6. 反向排除选择器：排除满足条件的元素，例如`a:not(":eq(0)")`。

7. 反选选择器：排除具有特定类的元素，例如`a:not(.example)`。

8. 特殊选择器：选中特定类型的元素，例如`a:first-of-type`。

9. 复合选择器：使用逗号分隔的选择器，例如`a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']`。

10. 或者选择器：使用逗号分隔的选择器，例如`a, .class1, #someID`。

11. 子代和手足选择器：使用空格、>、+或~表示子代或手足关系，例如`> .parentUl > li > ul > li`。

为了提高性能，可以使用缓存来存储已经查询过的元素，避免重复查询。例如：

```javascript

var nav = $('#navigation');

nav.show();

```

对于复杂的选择器，可以使用JQuery提供的方法进行操作。例如，要遍历一个包含嵌套列表的无序列表，可以使用以下代码：

```html

Level 1
- Level 1-1 Item - 1
- Level 1-1 Item - 2

Level 2
- Level 2-1 Item - 3

```

请根据以下内容重构代码：

```html

Level 1 Item - 1

Level 2 Item - 2

Level 2-1 Item - 1

Level 2-1 Item - 1

```

所有后代 $(‘parent child’)

选择：`$(‘ul.parentUl li’)`

会选中Level1、Level2、Level 1-1、Level 2-1

直系后代$(‘parent > child’)

选择：`$(‘ul.parentUl > li’)`

会选中Level1、Level2

基于上下文$(‘child’，‘parent’)

选择：`$(‘li’，‘ul.parentUl’)`

会选中Level1、Level2、Level 1-1、Level 2-1

层次查询$(‘parent’).find(‘child’)

选择：`$(‘ul.parentUl’).find(‘li’)`

会选中Level1、Level2、Level 1-1、Level 2-1

直系查询$(‘parent’).children(‘child’)

选择：`$(‘ul.parentUl’).children(‘li’)`

会选中Level1、Level2

其他复合选择器

或者(使用逗号):

选择：`$(‘ul, li, span’)`

并且：

选择：`$(‘ul.parentUl’)`

紧随其后：

选择：`$(‘li + li’)`

手足：

选择：`$(‘li ~ li’)`

JQuery回调的使用

在选择器的回调方法内，this是DOM元素，可以访问原生方法，$(this)可以转换成JQuery元素，可以使用JQuery方法。