一、jQuery简介

• jQuery就是JavaScript和Query，是辅助JavaScript开发的JS类库
• 好处：jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能

二、jQuery使用前的准备工作

1. 导入jQuery类库
2. 学会使用核心函数$()

三、核心函数 $()

• 传入不同的参数，对应不同的功能

四、jQuery对象和DOM对象的区别

1、首先清楚什么是jQuery对象，什么是DOM对象

• DOM对象
  • 通过getElementById()、getElementsByName()、getElementsByTagName()查询出来的对象，是DOM对象
  • 通过createElement()方法创建的对象，是DOM对象
  • DOM对象Alert 出来的效果是： [object HTML 标签名 Element]
• jQuery对象
  • 通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
  • 通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
  • 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
  • jQuery 对象 Alert 出来的效果是：[object Object]

2、jQuery的本质是什么

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

3、使用区别

• 各自用各自的属性和方法，互不干涉

4、相换转换

• dom 对象转化为 jQuery 对象：$( DOM对象 )
• jQuery 对象转为 dom 对象：jQuery对象[下标]取出相应的DOM对象

五、 jQuery 选择器

1、基本选择器

• 查找所以元素：*

• id选择器：#id

• class选择器：.class

• 标签选择器：element

• 组合选择器：selector1.selector2（用.连接，表示且的关系）

2、层级选择器

• 后代选择器：如，form input，获取form表单下的所有input元素

• 子元素选择器：parent > child，获取父元素的所有子元素

• 相邻元素选择器：prev + next，获取进阶在prev元素后的所有next元素

• 之后的兄弟元素选择器：prev ~ sibings，获取所有pre之后的所有sibings元素

3、过滤选择器

• :first：获取第一个元素
• :last：获取最后一个元素
• :eq(index)：找到给定索引值的元素

4、内容过滤器

• :contains(text)：获取包含指定文本的元素
• :empty：获取空元素
• :parent：获取非空元素
• :has(selector)：获取含有选择器所匹配的元素的元素

5、属性过滤器

• [attribute]：匹配包含给定属性的元素
• [attribute=value]：匹配给定属性是某个值的元素

6、表单过滤器

• :input：匹配所有input、textarea、select、button元素
• :text：匹配所有文本输入框
• :password：匹配所有密码输入框
• :radio：匹配所有单选框
• :checkBox：匹配所有复选框

7、表单对象属性过滤器

• :checked：匹配所有选中的单选、复选、下拉列表中选中的option标签对象
• :selected；匹配所有选中的option元素