选择元素是所有操作的前提,而在jQuery中,$()函数是最强大且最常用的功能之一,它可以利用选择器来选取DOM元素。以下是一些常用的jQuery选择器的汇总:
1. jQuery选择器的基本结构:
```javascript
$('选择器');
$('选择器 上下文');
```
2. 使用基本CSS选择器:
关于基本的CSS选择器,你可以参考CSS选择器详解。这里列出几种最基本的使用CSS选择器的用法:
2.1 元素选择器:
```javascript
$('a'); //选择所有a元素
$('div'); //选择所有div元素
$('p'); //选择所有p元素
```
如果你愿意,jQuery也允许我们使用逗号将多个选择器合并为一个选择器:
```javascript
$('a,div,p');
```
这样得到了和上面3行代码相同的效果。
2.2 类选择器:
```javascript
$('div.myClass'); //所有拥有myClass类的div元素
$('p.myClass'); //所有拥有myClass类的p元素
$('*.myClass'); //拥有myClass类的所有类型元素
```
另外,某些元素可能拥有不止一个类:
```javascript
$('div.myClass1.myClass2'); //会选择同时拥有myClass1以及myClass2类的div元素。
```
被选中的div元素可能还拥有其他类,例如:
```html
```
2.3 ID选择器:
```javascript
$('table#myID'); //id为myID的table元素
通常在一个HTML页面中,一个元素只能拥有一个id,一个id也只能出现一次。
```
请根据提供的内容完成内容重构,并保持段落结构:
```html
```
使用jQuery选择器:
```javascript
$('ul.myUl li')
```
实际上,上例还不足以完全说明所有拥有myUl类的ul元素的li子元素的含义。因为拥有myUl类的ul元素可能不止一个,如下:
请根据提供的内容完成内容重构,并保持段落结构:
```html
-
- 1
- 2
- 3
-
- one
- two
- three
-
- 一
- 二
- 三
-
- 1
- 2
- 3
-
- one
- two
- three
-
- 一
- 二
- 三
```
后代选择器其实不止能够选择某元素的后代,也可以选择某元素后代的后代(听起来有点别扭),如下:
```html
$('ul.myUl li a');
```
这样就选择了所有拥有myUl类的ul元素的所有li后代元素的所有a后代元素。虽然又多了一个xx的后代,不过和上面的分析是一个道理,就不赘述了。
3.2 直接子节点选择器参考3.1中的代码。
```html
$('ul.myUl > li');
```
选择所有拥有myUl类的ul元素的直接li元素。注意,这里不是所有而是直接子元素。孙子,重孙子li元素将不会被选取。
```html
```
使用jQuery选择器:
```javascript
$('li.myLi1 + li'); // $('li.myLi1').next('li')
$('li.myLi1 ~ li[class=myLi3]'); // $('li.myLi1').prev('li[class=myLi3]')
$('li.myLi1 ~ li'); // $('li.myLi1').nextAll('li')
$('li.myLi1 ~ li:first-child'); // $('li.myLi1').nextAll('li:first-child')
$('li.myLi1 ~ li:last-child'); // $('li.myLi1').nextAll('li:last-child')
```
以下是重构后的内容:
1. 选择拥有alt特性的img元素节点:
```javascript
$('img[alt]');
```
2. 选择拥有method特性的form元素节点:
```javascript
$('form[method]');
```
3. 如果希望指定这些特性的具体值来精确化选择,可以使用以下方法:
- 选择type特性值为text的所有input元素:
```javascript
$('input[type="text"]');
```
- 选择href为"http://jquery.com"的a元素:
```javascript
$('a[href="http://jquery.com"]');
```
4. 如果想进一步使用部分匹配的方式进行节点选择,可以参考以下例子:
- 头匹配:选择href以"http://"开头的a元素节点:
```javascript
$('a[href^="http://"]');
```
- 尾匹配:选择href以".pdf"结尾的a元素节点:
```javascript
$('a[href$=".pdf"]');
```
- 任意匹配:选择herf特性中包含"jquery"字符串的a元素:
```javascript
$('a[href*="jquery"]');
```
- 不等匹配:选择alt特性不等于"frontImg"的img元素:
```javascript
$('img[alt!="frontImg"]');
```
5. 使用过滤选择器。过滤选择器是通过过滤一个基础选择器来实现的。它的基本语法用一个冒号表示。具体例子如下:
- 位置过滤器:根据元素在页面中的位置或者其相对于其他元素的位置来选择元素。例如,选择所有div.myClass所有子节点中的第一个a元素:
```javascript
$('div.myClass a:first');
```
选择所有div.myClass中奇数段落元素。
$('div.myClass p:odd');
选择所有div.myClass中偶数段落元素。
*
接下来内容我们结合一小段代码来看:
html
```html
Language | Type | Invented |
---|---|---|
Java | CS | 2010 |
English | Lang | 2015 |
Calculus | Math | 2011 |
```
$('table#myTable td:first-child');
[Java,English],Calculus
$('table#myTable td:last-child');
[2010,2015],2011
$('table#myTable td:nth-child(1)');
[Java,English],Calculus
nth-child(1)
以下是重构后的内容:
1. 选取所有作为奇数子节点的td元素:
```css
$('table#myTable td:nth-child(3)');
```
结果:`[2010, 2015], 2011`
2. 选取所有能被3整除的子td元素:
```css
$('table#myTable td:nth-child(3n)');
```
注意:没有0号元素!
3. 选取所有作为第2n+1个子节点存在的td元素:
```css
$('table#myTable tr:nth-child(2n+1)');
```
注意:这里包含第1个元素。
4. 选取所有作为第n个子节点存在的td元素:
```css
$('table#myTable tr:nth-child(n)');
```
示例:`Java[Java, English], Calculus`
5. 选取table#myTable子元素中第2个tr元素之后的所有tr元素,不包含第2个tr:
```css
$('table#myTable tr:gt(1)');
```
以下是重构后的代码:
```javascript
// 所有按钮元素
$('button');
// 所有复选框元素
$('checkbox');
// 所有单选框元素
$('radio');
// 所有input[type=reset]元素
$('input[type=reset]');
// 所有input[type=submit]元素
$('input[type=submit]');
// 所有input[type=text]元素
$('input[type=text]');
// 所有input[type=password]的元素
$('input[type=password]');
// 所有图片输入元素input[type=image]
$('input[type=image]');
// 所有文件输入元素input[type=file]
$('input[type=file]');
// 所有可见元素
$(':visible');
// 所有处于选中状态的复选框或单选按钮元素
$(':checked');
// 所有包含文本hello的元素
$(':contains(hello)');
// 所有处于动画状态的元素
$(':animated');
// 所有处于禁用状态的元素
$(':disabled');
// 所有处于启用状态的元素
$(':enabled');
// 所有标题元素h1~h6
$('h1, h2, h3, h4, h5, h6');
// 所有隐藏元素
$(':hidden');
// 所有表单元素
$('form');
// 所有拥有子节点的元素
$(':parent');
// 所有处于选中状态的option元素
$('option:selected'); 示例: $('form#register input:checkbox') // id为register的form中的复选框元素。 事实上,以上过滤器可以组合使用: $('form#register input:checkbox:checked') // id为register的form的复选框元素中被选中的按钮元素。 ```
.3 :has过滤器
选择拥有某种特性的元素。
例如,选取所有包含a子元素的tr行元素:
```css
$('tr:has(a)');
```
5.4 :not过滤器
选取所有不满足某个条件的元素。例如,选取所有src中不包含字符串”beauty”的img元素:
```css
$('img:not([src*=beauty])');
```
或者,选取所有非复选框的input元素:
```css
$('input:not(:checkbox)');
```