一、$.()函数【$】

$.()函数的作用是包装DOM元素，以便于操作(jquery选择器)。作为几个通用的实用工具函数的命名空间前缀，例如，删除字符串前后空格的实用函数，其调用方法如：$.trim(str) ;文档就绪处理程序：包装文档实例，然后调用ready()方法，当文档为操作准备就绪的时候就执行该函数。创建DOM元素，通过给 $()函数传递包含HTML标记的字符串，可以即时创建相应的DOM元素，例如$("Hello word")。

二、jquery选择器

1.基本选择器

1、ID选择器 例：$(#test) 选取id为test的元素2、class选择器 例：$(“.test”) 选取所有class为test的元素3、元素标签选择器 例：$(“p”)选取所有的\<p>元素。4、通配符选择器 例：$(“*”)选取所有的元素。5、群组选择器 例：$(“p a.test”)选取在p元素内 拥有class为test的a元素。

2.层次选择器

层次选择器适合于通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和兄弟元素。

1、后代元素选择器 例： $(“div span”)选取\<div>里的所有的<span>元素。2、子元素选择器 例：$(“div>span”)选取\<div>元素下元素名是\<span>的子元素。3、相邻元素选择器 例：$(“.one+div”)选取class为one的下一个\<div>兄弟元素。4、兄弟元素选择器 例：$(“#two~div”)选取Id为two的元素后面的所有\<div>兄弟元素。

3.过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS 中的伪类选择器语法相同，即选择器都以一个冒号(:)开头。

1、基本过滤选择器：

- :checked:选中复选框或单选按钮- :disabled:禁用的输入框- :enabled:启用的输入框- :focus:当前获得焦点的元素- :hover:鼠标悬停在上面的元素- :in-range-number:指定范围内的数字(例如，10到20之间)- :“”中间的内容：用双引号包裹起来的内容会被视为字符串- ‘’中间的内容：用单引号包裹起来的内容会被视为字符串

CSS选择器是用于选择网页中的元素，以便对其应用样式。以下是一些常见的CSS选择器及其用法：

- `:first` 选取第1个元素

- `:last` 选取最后一个元素

- `:not(selector)` 去除所有与给定选择器匹配的元素

- `:even` 选取索引(从0开始)是偶数的所有元素

- `:odd` 选取索引(从0开始)是奇数的所有元素

- `:eq(index)` 选取索引(从0开始)等于 index的元素

- `:gt(index)` 选取索引(从0开始)大于 index的元素

- `:lt(index)` 选取索引(从0开始)小于 index的元素

- `:header` 选取所有的标题元素，即 `

`到`

`

- `:animated` 选取当前正在执行动画的所有元素

. 选择器：contains(text)

示例：`$("div:contains('test')")`选取含有文本内容为'test'的`

`元素。

2. 选择器：empty

示例：`$("div:empty")`选取不包含子元素或文本的空`

`元素。

3. 选择器：has(selector)

示例：`$("div:has(.myClass)")`选取含有class为'myClass'的元素的`

`元素。

4. 选择器：parent

示例：`$("div:parent")`选取含有子元素或文本的`

`元素。

5. 可见性过滤选择器

1. 选择器：hidden

示例：`$("div:hidden")`选取所有不可见的`

`元素。

2. 选择器：visible

示例：`$("div:visible")`选取所有可见的`

`元素。

6. 属性过滤选择器

、子元素过滤选择器

在CSS选择器中，我们可以使用子元素过滤选择器来选取特定元素的直接子元素。以下是一些常用的子元素过滤选择器的示例：

1. `>`:选取指定元素后的所有直接子元素。例如：`$("ul > li")` 将选取所有 `

    ` 元素下的直接子 `
  • ` 元素。

    2. `+`:选取紧跟在指定元素后的同级元素。例如：`$("ul + li")` 将选取紧跟在 `

      ` 元素后的同级 `
    • ` 元素。

      3. `~`:选取指定元素后的同一级别的所有兄弟元素。例如：`$("ul ~ li")` 将选取所有紧跟在 `

        ` 元素后的同一级别的兄弟 `
      • ` 元素。

        4. `nth-child(an+b)`:选取指定父元素下指定位置的子元素。其中，`a` 是起始位置(从1开始计数),`b` 是间隔数。例如：`$("ul li:nth-child(2n+1)")` 将选取所有 `

          ` 下的奇数位置的 `
        • ` 元素。

          通过使用这些子元素过滤选择器，我们可以更精确地定位和操作网页中的特定元素及其子元素。

          好的，以下是重构后的内容：

          1. 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元素，index从1开始。例如：$("div:nth-child(1)")选取每个

          中第一个子元素。

          2. 选取每个父元素下的第1个子元素。例如：$("div:first-child")选取每个

          下第一个子元素。

          3. 选取每个父元素下的最后1个子元素。例如：$("div:last-child")选取每个

          下最后一个子元素。

          4. 选取只有唯一子元素的元素的子元素。例如：$("div:only-child")选择只有一个子元素的

          元素。

          6. 表单对象属性过滤选择器：

          1. 选取所有可用元素。例如：$("body:enabled")选取页面内所有可用元素。

          2. 选取所有不可用元素。例如：$("body:disabled")选取页面内所有不可用元素。

          3. 选取所有被选中的元素(单选框、复选框)。例如：$("input:checked")选取所有被选中的元素。

          4. 选取所有被选中的选项元素(下拉列表)。例如：$("select:selected")选取所有被选中的选项元素。

          4. 表单选择器

          以下是重构后的内容：

          1、选取所有``, `