一、jQuery简介
1.什么是jQuery？
jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。
二、jQuery的特性
jQuery能做以下事情：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM遍历和修改
- AJAX
- Utilities
三、jQuery介绍
1.jQuery的使用方式
下载后引入
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>2.编写简单的 HelloWorld
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('Hello World');
});
</script>
</head>
</html>3.jQuery对象
jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。
对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。
jQuery对象的获取通常是使用选择器来获取的。比如，获取所有clss为one元素:$(".one");
四、jQuery选择器
1.基本选择器：
- 所有选择器 *
- 标签选择器 标签名
- ID选择器 #id
- 类选择器 .className
- 群组选择器 .one,.two
- 复合选择器 .one.two
五、jQuery过滤器
jQuery的过滤器必须用在jQuery选择器后，表示对通过前面的jQuery选择器选择到的内容的过滤。是建立在前面选择器已经选择到的元素的基础之上。 语法：selector:过滤器
基本过滤器
| 过滤器 | 描述 |
|---|---|
| first | 获取所有已选择到的元素中的第一个元素 |
| last | 获取所有已选择到的元素中的最后一个元素 |
| even | 获取所有已选择到的元素中的索引为偶数的元素 |
| odd | 获取所有已选择到的元素中的索引为奇数的元素 |
| eq(index) | 获取所有已选择到的元素中的索引为index的元素 |
| lt(num) | 获取所有已选择到的元素中的索引值小于num的元素 |
| gt(num) | 获取所有已选择到的元素中的索引值大于num的元素 |
| not(selector1) | 获取所有已选择到的元素中的除了selector1的元素 |
| header | 获取所有已选择到的元素中的标题元素(h1~h6) |
内容过滤器
| contains(text) | 获取所有已选择到的元素中文本包含text的元素 |
| empty | 获取所有已选择到的元素中的空元素(没有子节点) |
| parent | 获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent"); |
| has(selector1) | 获取所有已选择到的元素中包含selector1的元素，如$("div:has('span')"); |
可见性过滤器
| display:none; <input type="hidden"> | 不占据屏幕空间 |
| visibility:hidden; opacity:0;//透明度为0 | 占据屏幕空间 |
:visible 选择所有占据屏幕空间的元素 : hidden 选择所有不占据屏幕空间的元素
属性过滤器
| [Key] | 获取所有已选择到的元素中具有属性Key的元素 |
| [Key=Val] | 获取所有已选择到的元素中具有属性Key，并且属性值为Val的元素 |
| [Key^=Val] | 获取所有已选择到的元素中具有属性Key，并且属性值为以Val开头的元素 |
| [Key$=Val] | 获取所有已选择到的元素中具有属性Key，并且属性值为以Val结尾的元素 |
| [Key*=Val] | 获取所有已选择到的元素中具有属性Key，并且属性值为包含Val的元素 |
| [Key!=Val] | 获取所有已选择到的元素中具有属性Key，并且属性值不为以Val的元素或者没有属性Val的元素 |
后代选择器
| nth-child(index) | 获取每个selector元素中索引为index的子元素 index从1开始 |
| first-child | 获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素 |
| last-child | 获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素） |
| only-child | 获取每一个selector元素中的独生子子元素（每个父元素如果只有一个子元素，获取该元素） |
| first-of-type | 获取每个selector元素中每种类型子元素中的第一个 |
| last-of-type | 获取每个selector元素中每种类型子元素中的最后一个 |
表单过滤器
| :checked | 选取所有被选中的元素，用于复选框、单选框、下拉框 |
| :selected | 选取所有被选中的元素，该选择器只适用于<option> |
| :focus | 选取当前获取焦点的元素 |
| :text | 选取所有的单行文本框(<input type="text">) |
| :password | 选取所有的密码框 |
| :input | 选取所有的<input>,<textarea>,<select>,<button>元素。 |
| :enable | 选取所有可用元素，该选择器仅可用于支持disable属性的html元素。 |
| :disable | 选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。 |
| :radio | 选取所有的单选框 |
| :checkbox | 选取所有的多选框 |
| :submit | 选取所有的提交按钮 |
| :image | 选取所有的input类型为image的表单元素 |
| :reset | 选取所有的input类型为reset的表单元素 |
| :button | 选取所有的input类型为button的表单元素 |
| :file | 选取所有的input类型为file的表单元素 |
$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素
六、jQuery中的动画
动画效果
| hide() | 隐藏 |
| show() | 显示 |
| toggle() | 隐藏与显示 |
| fadeIn() | 淡入 |
| fadeOut() | 淡出 |
| fadeTo() | 淡入到 |
| fadeToggle() | 淡入与淡出 |
| slideDown() | 滑下 |
| slideUp() | 滑上 |
| slideToggle() | 滑上与滑下 |
| animate() | 自定义效果 |
最后
以上就是朴实老鼠最近收集整理的关于第一章 初识jQuery的全部内容，更多相关第一章内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复