选择元素是所有操作的前提,而在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

    • 1
    • 2
    • 3

    • one
    • two
    • three

```

使用jQuery选择器:

```javascript

$('ul.myUl li')

```

实际上,上例还不足以完全说明所有拥有myUl类的ul元素的li子元素的含义。因为拥有myUl类的ul元素可能不止一个,如下:

请根据提供的内容完成内容重构,并保持段落结构:

```html

    • 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

            • 1
            • 2
            • 3

            • one
            • two
            • three

          ```

          使用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)');

          ```