什么是JQuery？

JQuery是轻量级的JS库，因简单易学，所以在前端工作中颇受欢迎。

通俗的讲：就是JS的强化版，是新一代的JS，JQuery离不开JS，使用JQuery之前，一定要先引用JQuery文件。

使用JQuery可以减少许多的代码量，减轻工作压力，结构上更加完美，例如：

<h1>Hello World!</h1>

这里有一个h1标签，我现在想选中它，并将“Hello World!”改为“我要学习JQuery”如果使用JS的话：

var h1 = document.getElementsByTagName('h1')[0];

h1.innerText = "我要学习JQuery";

 

而使用JQuery来写这段代码，就会方便很多

 

$('h1').text('我要学习JQuery');

 

写完了，就这么多。不要忘记引用JQuery文件，“<script src="./js/jquery.js"></script>”

./表示当前路径下；如果是下一级目录，直接写目录名称；如果是上一级目录，就写../

 

我猜阅读这篇文章的同学们都已经学习过DOM元素了，大家都晓得querySelector和querySelectorAll

JQuery中的$('')就相当于document.querySelectorAll('');

$('')会选中满足条件的所有元素，就是说有这样两个h1标签：

$('h1').css('color','red');

会选中所有的h1标签，并把字体颜色改为红色。

如果你不想让它这么霸道，可以加各种选择器，这才是JQuery的真正强大之处。

 

 这样结果就变成了

差不多了，接下来用我们刚刚学到的新知识做一个小案例：

现有一文本

<ol>
　　<li></li>
　　<li></li>
　　<li></li>

</ol>

<p></p>

我想选中ol下方的所有单数li(第一个和第三个),把背景颜色改为绿色(green),并通过ol选中p标签，为p标签添加文字“JQuery真简单”;

尝试用JS和JQuery各做一遍

结果为：

 

 JQuery代码如下：

 

 告辞了同学们！