jQuery学习系列------概念、符号、选择器、事件绑定与取消、简单动画

最新推荐文章于 2024-04-15 17:38:04 发布

llxycxl

最新推荐文章于 2024-04-15 17:38:04 发布

阅读量196

点赞数

分类专栏： jQuery 文章标签： jQuery 选择器

本文链接：https://blog.csdn.net/llxy2016/article/details/88054117

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是jQuery学习系列，详细介绍了jQuery的基本概念、引入方式、强大的选择器系统，包括基本选择器、层级选择器、属性选择器和过滤器。此外，还讲解了事件绑定与取消的方法，以及简单的动画效果，如自定义动画、动画控制和常见的动画函数。通过本文，读者将能全面掌握jQuery的核心操作。

摘要由CSDN通过智能技术生成

写在前面

简介
引入及符号
选择器
事件绑定与取消
简单动画

一、简介

（1）jQuery简介：是一个快速、功能多且小巧的javaScript库，是 john Resig 为了简化代码而作

（2）版本：1.x.x/2.x.x/3.x.x

这3个版本的语法基本相同
需要注意的是：IE6/7/8兼容的最高版本的jQuery为1.9.1

二、引入及符号

（1）只需要在页面的<head>中引入jQuery文件即可。

例如：`<script src = "jqueryPath/jquery.js"></script>`

（2）$符号：jQuery符号

三、选择器

基本选择器
- #id 根据id匹配元素
- element 根据元素标签名匹配元素
- .class 根据类名匹配元素
- *匹配所有元素(不包括doctype)
多项选择器
- $("selector1,selector2,selectorN");将每一个选择器匹配到的元素合并后一起返回。
层级选择器：
- 祖先后代选择器 $('ancestor descendant');匹配指定祖先元素下的所有后代
- 直接后代选择器（子选择器）$('parent > child');匹配指定父元素下的所有子元素
- next选择器 $('prev + next');匹配紧接在指定prev元素后的next元素。
兄弟选择器 $('prev ~ siblings');匹配指定prev元素后所有siblings元素。
属性选择器：
- 属性名选择器：[attribute]
- 非属性值选择器:[attribute!=value]
- 属性值选择器：[attribute = value]
- 包含value值的属性:[attribute*=value]
- 以value值开头的属性:[attribute^=value]
- 以value值结尾的属性:[attribute$=value]
多个属性选择器 [selector1][selector2][selectorN]:选择同时满足这几个条件的元素
过滤器：
- child系列
  - ：first-child
  - ：last-child
  - ：nth-child(n | even | odd | formula)，其中n为从1开始,even表示偶数，odd表示奇数，formula使用特殊公式
  - ：nth-last-child(n | even | odd | formula)，倒数第几个孩子,其中n为从1开始,even表示偶数，odd表示奇数，formula使用特殊公式
  - ：only-child
- type系列
  - ：first-of-type
  - ：last-of-type
  - ：nth-of-type(n | even | odd | formula)其中n为从1开始,even表示偶数，odd表示奇数，formula使用特殊公式
  - ：nth-last-of-type(n | even | odd | formula)其中n为从1开始,even表示偶数，odd表示奇数，formula使用特殊公式
  - ：only-of-type
表单相关：
- ：input
- ：text
- ：password/:radio/:checkbox/:image/:reset/:button/:file
- :enabled匹配可用元素
- :disabled匹配不可用元素
- :checke匹配被选中元素
- :selected匹配选中的option元素
查找和过滤
- find(expr | object | element)搜索与指定表达式匹配的元素
- children([expr])取得匹配的元素集合的所有子元素的元素集合
- parent([expr])取得匹配元素父元素的元素集合。
- next([expr])、prev([expr])取得匹配元素集合紧邻的后面同辈元素的元素集合。
- eq(index | -index)获取第n个jQuery对象。
- siblings([expr])取得匹配的元素集合所有同辈元素的元素集合。
- filter(expr | object | element | fn)筛选出与指定表达式匹配的元素集合