目录
一、jQuery简介
- jQuery就是JavaScript和Query，是辅助JavaScript开发的
JS类库 - 好处：jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能
二、jQuery使用前的准备工作
- 导入jQuery类库
- 学会使用核心函数
$()
三、核心函数 $()
- 传入不同的参数，对应不同的功能
| 出入的参数 | 含义 |
|---|---|
| 函数 | 表示页面加载完成之后，相当于 window.onload = function(){} |
| HTML字符串 | 会创建HTML标签对象 |
| 选择器字符串 | id选择器：$("#id属性的值")：根据id查询标签对象标签名选择器： $("边签名")：根据标签名查询标签对象类型选择器： $(".class属性的值")：根据class属性查询标签对象 |
| DOM对象 | 把DOM对象转换为jQuery对象 |
四、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元素