初识【jQuery】，入门必看！

什么是jQuery？

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。

jQuery使用方式

直接在官网BootCDN >> jquery找到你需要的版本资源，复制< script>标签，然后导入到代码中。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

一般我们在下载或者使用cdn资源的时候，都会让我们选择jquery.js 与 jquery.min.js版本，它们的区别在于jquery.min.js是经过压缩的，体积更小，适用于部署环境。而jquery适用于源码研究，我们对于jquery的学习，应该要上升到源码层次。

jQuery初体验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体验jQuery</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style type="text/css">div{background-color: brown;width: 100px;height: 100px;}</style><script type="text/javascript">$(function(){$('div').css('background-color','pink')$('div').html('<b>hello world</b>')})</script>
</head>
<body><div></div>
</body>
</html>

jQuery函数

jQuery库只提供了一个叫jQuery的函数，该函数中以及该函数的原型中定义了大量的方法，方便jQuery对象和jQuery函数调用。

jQuery函数具有四种参数：

$(选择器)
通过选择器选择到符合条件的Element元素，将其保存到jQuery对象。
$(html片段)
将html片段转换成Element元素，然后再封装成一个jQuery对象。
$(Element元素)
将Element元素转换成一个jQuery对象。
$(匿名函数)
匿名函数在文档加载完毕以后执行。

jQuery对象

jQuery对象是jQuery函数的一个实例，该对象可以调用jQuery原型中的方法,也就是我们后面学的很多方法，比如each，map，slice，first，find，filter，not，on，off，css等方法。

jQuery对象是一个类数组对象，数组中存放的是DOM对象。jQuery对象的获取通常是使用选择器来获取。比如，获取所有class为one的元素：$(“.one”)。

jQuery选择器&过滤器

jQuery选择器有核心选择器、层次选择器、属性选择器，使用规则与CSS选择器一样，这里就不细述了，需要了解的童鞋请移步–>HTML&CSS >> CSS选择器。下面给大家介绍一下jQuery过滤器(伪类选择器）。

基本过滤器

过滤器	描述
:first	获取第一个元素
:last	获取最后一个元素
:even	获取索引为偶数的元素
:odd	获取索引为奇数的元素
:eq(index)	获取索引为index的元素
:lt(num)	获取索引值小于num的元素
:gt(num)	获取索引值大于num的元素
:not(selector)	获取除了selector以外的元素
:header	获取标题元素

内容过滤器

过滤器	描述
:contains(text)	获取文本中包含text的元素
:empty	获取没有子节点的元素
:parent	获取有子节点的元素
:has(selector)	获取包含selector的元素

可见性过滤器

过滤器	描述
:visible	选择占据屏幕空间的元素（visibility：hidden、透明度为0）
:hidden	选择不占据屏幕空间的元素（display：none、< input type=“hidden”>）

<div class="one">one</div>
<div class="two">two</div>
<style type="text/css">.one{display: none;}.two{visibility: hidden;}
</style>
<script type="text/javascript">$(function(){$('div:hidden').css('display','block')$('div:visible').css('visibility','visible')$('div').css('background','coral')})
</script>

表单过滤器

过滤器	含义
:focus	选择当前获取焦点的元素
:checked	选取所有复选框、单选框或者是下拉框勾选的元素
:selected	选取被选中的选项元素，只适用于< option>
:disabled	选取所有被禁用的元素，只适用于disabled属性的元素
:enabled	选择所有未被禁用的元素
:text	选取所有的单行文本框
:password	选取所有的密码框
:button	选取所有按钮元素和类型为按钮的元素
…	…

<script type="text/javascript">$(function(){$('input:disabled').css('background','red')$("input").click(function(){$(":focus").css('background','red')    })})
</script>
<form action="#"><input type="text" name="" disabled=""><input type="text" name="">
</form>

后代过滤器

过滤器	含义
:nth-child(index)	获取索引为index的子元素(index从1开始)
:first-child	获取每个父元素的第一个子元素
:last-child	获取每个父元素的最后一个子元素
:only-child	每个父元素如果只有一个孩子元素，获取该元素
:first-of-type	获取每种类型子元素中的第一个
:last-of-type	获取每种类型子元素中的最后一个