一.jQuery简介
(一). 什么是jQuery
- jQuery是一个轻量级, 简洁的JavaScript库, 是继Prototype之后的一个优秀的JavaScript库.
- jQuery的理念: Write Less , Do More (更少的代码,更多的功能)
(二). 如何下载jQuery
- jQuery的官方网站下载地址: jQuery官网
- 文章发布时的最新版本号为:
jQuery v3.2.1- 下载完成后的文件名为:
jquery-3.2.1.min.js
(三)如何使用jQuery
1. script外链式
下载完成后只需要在html文档任意位置采用外链式引入jQuery文件,如下代码所示:
2.链式编程
(1). 链式编程简介: 通过在一个对象中通过"."去使用多个jQuery方法,这就叫做链式编程.
(2). 优点: 链式编程能够极大的简化代码量
(3). 缺点: 在一定程度上降低代码的可读性,所以在使用链式编程的时候,应该添加相应的注释.
(4). 大家可以通过以下代码感受一下jQuery的链式编程:
$("#box").find("div.icon").removeClass("Rotation").stop().animate({"opacity":"1"},"fast");
//以上代码在id名为box的标签下找到class为icon的div
//移出该div的Rotation类名
//停止该元素上正在执行的动画
//添加动画效果,改变透明度
(注意:以上是通过一个语句完成的,这就叫做jQuery的链式编程)
二. jQuery知识点
(一).jQuery对象和DOM对象的区别
1. DOM对象: 通过DOM的方法获取的对象叫做DOM对象
例如: 通过document.getElementById(),document.getElementsByClassName()等获取到的对象,为DOM对象
2. jQuery对象:通过:jQuery的$()方法获取的对象叫做jQuery对象
例如: 通过var box = $("#box") , 例如通过$()方法获取到的id名为box的对象,叫做jQuery对象
3. jQuery对象和DOM对象的区别:
(1). jQuery对象本质上是一个DOM对象的包装集——是DOM对象的一个集合
(2). jQuery对象可以理解为含DOM对象的一个伪数组
(3). jQuery对象不能使用DOM中的方法, 同理,DOM对象不能使用jQuery中的方法
4. jQuery对象和DOM对象的相互转换
(1). jQuery对象 => DOM对象 : 通过jQuery对象[index] 和 get()方法
(2). DOM对象 => jQuery对象: 通过$(DOM对象)
(二).jQuery选择器
1.jQuery基本选择器
jQuery基本选择器完全继承了CSS1.0的风格
2.jQuery的筛选选择器
(1) 基本过滤选择器
| 选择器 | 描述 |
|---|---|
| :first | 选取第1个元素 |
| :last | 选取最后一个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 |
| :even | 选取索引是偶数的所有元素 |
| :odd | 选取索引是奇数的所有元素 |
| :eq(index) | 选取索引值等于index的元素 |
| :gt(index) | 选取索引值大于index的元素 |
| :lt(index) | 选取索引值小于index的元素 |
| :header | 选取所有的标题元素,例如h1,h2,h3 |
| :animated | 选取当前正在执行动画的所有元素 |
| :focus | 选取当前获取焦点的元素 |
(2) 内容过滤选择器
| 选择器 | 描述 |
|---|---|
| :contain(text) | 选取含有文本内容为"text"的元素 |
| :empty | 选取不包换子元素或者文本的空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 |
| :parent | 选取含所有子元素或者文本的元素 |
(3) 可见性过滤选择器
| 选择器 | 描述 |
|---|---|
| :hidden | 选取所有不可见的元素 |
| :visible | 选取所有可见的元素 |
(4) 属性过滤选择器
| 选择器 | 描述 |
|---|---|
| [attribute] | 选取拥有此属性的元素 |
| [attribute = value] | 选取属性的值为value的元素 |
(5) 子元素过滤选择器
| 选择器 | 描述 |
|---|---|
| :nth-child(index,even,odd) | 选取每个父元素下的第index个子元素/偶数元素/奇数元素 |
| :first-child | 选取每个父元素的第1个子元素 |
| :last-child | 选取每个父元素的最后一个子元素 |
| :only-child | 选取某个元素是它父元素中的唯一的子元素 |
(6)表单对象属性过滤选择器
| 选择器 | 描述 |
|---|---|
| :enable | 选取所有可用元素 |
| :disabled | 选取所有不可用的元素 |
| :checked | 选取所有被选中的元素 |
| :selected | 选取所有被选中的选项元素 |
3.jQuery表单选择器
| 选择器 | 描述 |
|---|---|
| :input | 选取所有的, |