AI智能
改变未来

什么是JQuery?


什么是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代码如下:

告辞了同学们!

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 什么是JQuery?