第一章初识jQuery

62 阅读 0 评论 41 点赞

我是靠谱客的博主朴实老鼠，最近开发中收集的这篇文章主要介绍第一章初识jQuery，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一、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()	自定义效果