选择器是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 <span> Item - 1 </span>
- Level 2 <span> Item - 2 </span>
- Level 2-1 <span> Item - 1 </span>
- Level 2-1 <span> Item - 1 </span>
```
所有后代 $(‘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方法。