什么是jQuery?jQuery库的初学者指南

2023-05-26 0 689

假如您采用JavaScript代码,自学甚么是jQuery和怎样采用它能精简您的组织工作业务流程。它能使您的代码课堂教学更慢、更高效率,从而节约您的心力和天数。

责任撰稿将说明怎样在Web合作开发环境中采用jQuery和它的益处和基本缺点。我们还将提供两个意味深长的讲义条目,那些讲义将展现jQuery被用以协助您了解它是怎样组织工作的。

甚么是 jQuery?甚么是JavaScript库?它在Web合作开发中是怎样采用的? jQuery的优劣重要的jQuery表达式jQuery实例

甚么是jQuery?

jQuery是为精简JavaScript操作方式而建立的开放源码增大JavaScript库。您能采用jQuery加速撰写几组不同的命令,假如您采用HTML标识符,那些指示将耗费较长的天数。

甚么是JavaScript库?它在Web合作开发中是怎样采用的?

JavaScript库由具有各式各样机能的JavaScript文档组成。大批的JS库,比如React,能服务于某一目的,不论是在应用程序还是服务端。

jQuery库能说是现今市场上最盛行的JS库。它更易修正和采用。此外,jQuery保有两个保有大批自学资源、讲义和其它文档格式的小型街道社区。

最合适的部分是jQuery与其它JavaScript库相容,并且有大批应用程序来协助扩充其机能。但是,它呼吸困难用于任何其它C语言。

jQuery的优劣

假如您仍在取舍自学jQuery是否有益于,以下是采用此JS库进行Web合作开发的优劣。

什么是jQuery?jQuery库的初学者指南

缺点

jQuery库的核心理念缺点之一是该阿提斯鲁夫尔谷。建立像滑鼠点选机能和配置文档递交这样的该事件只需要录于标识符。这有利于保持HTML标识符整洁且倍受各式各样该阿提斯鲁夫尔谷程序的影响。

采用其文档格式第一类数学模型 (DOM) 操作方式机能也能更随心所欲地修正HTML原素。使用者亲善的Web应用程序介面容许您采用各式各样该事件方法加进、撰稿和删掉Web原素。

特别是AJAX方法,使jQuery成为采用AJAX表达式合作开发响应式网站的理想选择。此机能通过精简HTTP请求操作方式而无需重新加载网页来改善使用者体验。

此外,jQuery自带了大批的内置动画效果。它甚至能让您建立由您选择的CSS属性组成的自定义动画。

更重要的是,jQuery带有跨应用程序支持,使其与盛行的网络应用程序相容。它也适用于CSS3选择器和XML路径语言 (XPath) 语法。

请记住,通过内容交付网络 (CDN) 将jQuery脚本加进到网站更容易。这样,您不必下载库文档并将其存储在站点的文档夹中。

缺点

尽管是轻量级的,jQuery的库是庞大的。随着标识符库的不断增长,打开JS文档需要较长的天数,这给使用者的计算机带来了额外的压力。

由于其抽象,jQuery还使自学和采用JavaScript变得更加困难。虽然它为新手精简了该事件建立,但执行DOM操作方式等复杂任务需要对JavaScript有更深入的了解才能获得所需的结果。

最大的缺点是jQuery不容许向后相容。由于jQuery有很多已发布的版本,因此您必须自己托管库并定期更新它。

重要的jQuery表达式

假如您想了解jQuery怎样使您受益,让我们看一下基本的表达式实例。

1. hide()表达式

hide()表达式隐藏HTML原素,使它们不再影响HTML页面。假如与持续天数和缓动参数和回调表达式配对,它能用作动画方法。

2. show()表达式

show()表达式显示HTML原素。它仅适用于由hide()表达式隐藏的原素。此外,假如给定两个参数,它就会变成两个动画方法表达式,就像hide()一样。

3.toggle()表达式

toggle()表达式采用单击该事件根据CSS显示属性修正HTML原素的可见性。假如原素可见,此表达式将隐藏它。假如它被隐藏,则会发生相反的情况。Web合作开发人员经常采用此机能将多个动画转换为两个序列。

假如给定两个参数,此表达式能将两个或多个表达式绑定到某一原素。它容许您通过单击原素在机能之间切换。请记住,此表达式签名在jQuery版本1.8中已被弃用,并在版本1.9中被删掉。

4.fadeIn()表达式

fadeIn()表达式修正HTML原素的不透明度,使它们逐渐出现在HTML页面上。将它与速度或回调表达式配对以调整动画的速度并在匹配的原素完全出现时触发下两个该事件。

5.fadeOut()表达式

这个jQuery表达式的作用与fadeIn()表达式相反。与hide()和show()类似,假如给定参数,fadeIn()和fadeOut()将成为动画方法。

6.fadeToggle()表达式

fadeToggle()表达式的组织工作方式与toggle()表达式类似。它容许使用者逐渐显示或隐藏某一原素。

7.slideUp() 表达式

slideUp()表达式隐藏带有滑动动画的原素。将其与持续天数和缓动参数配对以调整动画的持续天数。

8. slideDown() 表达式

slideDown ()表达式显示带有滑动动画的原素。同样,它接受持续天数和缓动参数。

9.slideToggle()表达式

slideToggle()表达式容许您在slideUp()和slideDown()表达式之间切换以显示或隐藏原素。

10. animate()表达式

此表达式采用两个或多个CSS属性为原素设置动画。与之前的机能一样,它能让您调整动画的持续天数和过渡模式,并在完成后触发以下机能。

请记住,animate()表达式不能显示像slideDown()和fadeIn()这样的隐藏原素。

jQuery实例

以下实例向您展现了怎样采用slideDown()、slideUp()和slideToggle()表达式:

$(“#flip”).click(function(){ $(“#panel”).slideDown(); });

下面是两个怎样采用hide()和show()表达式的实例:

$(“#hide”).click(function(){ $(“p”).hide(); }); $(“#show”).click(function(){ $(“p”).show(); });

此实例显示animate()表达式标识符块:

$(“button”).click(function(){ $(“div”).animate({ left: 250px, height: +=150px, width: +=150px }); });

这是两个CSS操作方式的例子:

$(“button”).click(function(){ $(“h1, h2, p”).toggleClass(“blue”); });

小结

jQuery是世界上最盛行的JavaScript库之一。它为Web合作开发人员提供了很多优势,这就是为甚么自学怎样采用它应该是您的首要任务。

采用jQuery库能让您撰写更少的JavaScript标识符,同时仍然获得其全部机能。这使您能更有效地组织工作并专注于项目的其它部分。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务