技术原理

JavaScript与jQuery:需要知道的关键区别

,我们已经认识JavaScript和JQuery很多年了。JavaScript发明于jQuery之前。两者都是强大的,用于web开发,并用于相同的目的,即使web页面具有交互性和动态性。换句话说,它们给网页带来了活力。人们可能会想,如果它们被用于相同的目的,那么为什么这两个概念是分开的?在这篇JavaScript vs jQuery文章中,我们将按照以下顺序找出哪个更好:

JavaScript:web开发中的一种强大语言JQuery:JavaScript开发的库JQuery创建的原因以及JQuery的特殊功能JavaScript和JQuery之间的区别,并在HTML中添加JavaScript和JQuery文档DOM遍历和操作事件处理Ajax调用动画

JavaScript:web开发中的一种强大语言

JavaScript是一种脚本语言,用于向web页面添加交互性。它是与HTML和CSS一起用于创建web页面的三种核心技术之一。虽然HTML和CSS定义了web页面的结构和web页面的外观/样式,但是JavaScript通过添加交互性使web页面变得动态,这意味着使用JavaScript我们可以添加一些鼠标点击的代码,鼠标悬停和网页上的其他事件等等。所有的web浏览器都支持

JavaScript- javascript vs jquery - edureka

JavaScript,web浏览器都有一个内置的JavaScript引擎来识别JavaScript代码并使用它。因此,JavaScript主要是一种客户端语言。它是一种既可用作过程语言又可用作基于原型的面向对象语言的语言。当我们使用主JavaScript时,我们使用的是过程语言,而高级JavaScript使用的是面向对象的概念。

让我们继续使用JavaScript与jQuery的对比,并理解从JavaScript开发的库。

jQuery:一个多年来从JavaScript

开发的库JavaScript已经成为一种强大的web开发语言。有很多库和框架都是基于JavaScript构建的。开发这些库和框架是为了扩展JavaScript的功能,用它做很多事情,也为了使开发人员的工作更容易。

jQuery - javascript vs jquery- edureka

jQuery就是这样一个JavaScript库,它是从中构建的。它是John Resign发明的最受欢迎的JavaScript库,于2006年1月在纽约BarCamp发布。jQuery是免费的,一个开源库,根据MIT许可证授权。这具有跨浏览器兼容性的强大功能。它可以轻松地处理我们可以使用JavaScript面对的跨浏览器问题。因此,许多开发人员使用jQuery来避免跨浏览器兼容性问题。

现在让我们继续我们的JavaScript vs jQuery博客,看看为什么创建jQuery。

为什么创建jQuery以及jQuery的特殊功能是什么

“在JavaScript中,我们必须为基本操作编写大量代码,而使用jQuery,同样的操作可以用一行代码完成。因此,开发人员发现使用jQuery比使用JavaScript更容易。

尽管JavaScript是jQuery发展的基本语言,jQuery使事件处理、DOM操作、Ajax调用比JavaScript容易得多。jQuery还允许我们在web页面上添加动画效果,这需要大量的JavaScript代码。jQuery有内置的插件来执行web页面上的操作。我们只需在网页中包含或导入插件即可使用。因此插件允许我们创建动画和交互或效果的抽象。我们也可以用jQuery定制插件。如果我们需要一个动画在网页上以某种方式完成,我们可以根据需要开发一个插件并在我们的网页上使用它。jQuery还有一个高级UI小部件库。这个小部件库h /script

使用CDN:

让我们了解DOM遍历和操作

在JavaScript中的DOM遍历和操作

我们可以使用文档.getElementById方法或使用document.querySelector文件(方法。

var mydiv=document.querySelector文件(“#div1”);

文档.getElementById(“#div1”);

在jQuery中:

在这里,我们只需要使用$符号和括号中的选择器。

$(选择器)$(“#div1”)–选择器是一个id'div1'$(“.div1”)–选择器是一个类“div1”$(“p”)–选择器是Html页面中的段落$('#myDiv').css('背景色','#FFF');

myDiv选择器指的是“myDiv”标识符

DOM元素的选择和操作在jQuery中比在JavaScript中简洁得多。

继续进行事件处理。

事件处理

在JavaScript中,我们选择一个HTML元素:

文档.getElementById(“#button1”).addEventListener(“单击”,myCallback);函数myCallback(){}这里的

getElementById()方法用于根据元素的id选择元素,然后我们使用add Event listener()方法将事件侦听器添加到事件中。在本例中,我们将myCallback函数作为侦听器添加到“click”事件中。

我们还可以在上面的示例中使用匿名函数:

文档.getElementById(“#button1”).addEventListener(“单击”,函数(){控制台.log(“函数内部”);});$(“p”)。单击(函数(){});$(“#button1”).dblclick(函数(){//id为“button1”的html元素上的双击事件的操作//此处的操作});

我们可以使用on方法添加多个事件和多个事件处理程序。

$(“button1”)。打开({//此处的操作dblclick:函数(){//此处的操作}//此处的操作

因此,我们可以看到,与JavaScript相比,jQuery中的事件处理更加简单。

继续使用Ajax调用。

Ajax调用

JavaScript中的

JavaScript使用XMLHttpRequest对象向服务器发送Ajax请求。XMLHttpRequest有几个方法来进行Ajax调用。两个常用的方法是open(method、URL、async、user、PSW)、send()和send(string)。我们先创建一个XMLHttpRequest:

var xhttp=新的XMLHttpRequest();xhttp.打开(“获取”,“D://getinfo.txt文件“,正确);xhttp.send发送();

open方法向服务器/位置发出get请求,true指定请求是异步的。如果值为false,则表示请求是同步的。

发出post请求:

var xhttp=新的XMLHttpRequest();xhttp.打开(“职位”,“D://postinfo.txt文件“,正确);

要用请求发送数据,我们使用xhttp的setRequestHeader方法定义要发送的数据类型,send方法用键/值对发送数据:

xhttp.setRequestHeader(“内容类型”,“application/x-www-form-urlencoded”);jQuery

jQuery中的

有几个内置方法来进行Ajax调用。通过这些方法,我们可以从服务器调用任何数据,并用这些数据更新网页的一部分。jQuery方法使Ajax调用变得简单。jQuery load()方法:此方法从URL获取数据并将数据加载到HTML选择器。$(“p”).load(URL,data,callback)URL是为数据调用的位置,可选数据参数是要与调用一起发送的数据(键/值对),可选参数“callback”是要在加载完成后执行的方法。

jQuery$.get()和$.post()方法:此方法从URL获取数据并将数据加载到HTML选择器。$.get(URL,callback)URL是调用数据的位置,callback是加载完成后要执行的方法。

$.post(URL,data,callback)URL是调用数据的位置,数据是要随调用一起发送的键/值对,回调是要在加载完成后执行的方法。这里的数据和回调参数是可选的。

jQuery Ajax调用比JavaScript更简洁。在JavaScript中,我们使用的是XMLHTTPRequest对象,在jQuery中,我们不必使用这样的对象。

在动画中移动。

动画

在JavaScript

JavaScript中没有像jQuery animate()函数那样的特定动画函数。在JavaScript中,动画效果主要是通过操纵元素的样式或使用CSS转换、翻译或动画属性来实现的。JavaScript还使用setInterval()、clearInterval()、setTimeout()和clearTimeout()方法来制作动画效果。

设置间隔(myAnimation,4);函数myAnimation(){文档.getElementById(“第1部分”)。样式.transform=“旋转(20度)”;JavaScript中的

动画主要是处理CSS属性,jQuery中的

jQuery有许多内置的方法来添加动画或对HTML元素的效果。让我们检查一下。animate()方法:此方法用于在元素上添加动画。

$(“#button1”)。单击(函数(){});

show()方法:此方法用于使元素从隐藏状态可见。

$(“35; button1”)。单击(函数(){});

hide()方法:此方法用于将元素隐藏在可见状态下。

$(“35; button1”)。单击(函数(){$(“#div1”).hide();

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片
人工智能的应用有哪些领域 投稿者
我还没有学会写个人说明!
最近文章
  • * 没有更多文章了
  • 热门搜索

    分类目录