document.getElementByID(‘txtName’)或 $(‘#txtName’) 哪个更快
在这篇文章中,我们将看到document.getElementByID(‘txtName’)和$(“#txtName”)哪个更快。让我们先看看这些是什么,它们的作用是什么。
document.getElementByID(‘txtName)方法:该方法用于获取具有指定值的ID属性的元素。
语法:
document.getElementById( elementID )
参数:你想得到的元素的**ID*。
返回值:如果没有找到指定id的元素,它返回null。
这个方法基本上是在我们想操作一个特定的元素或者你想得到一个特定元素的信息时使用。一个ID在一个页面中应该是唯一的,否则如果两个元素有相同的ID,那么这个方法将返回第一个元素。
例子:在这个例子中,我们将改变id匹配的元素的文本。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="first">My id is first. <br>
Click on the button <br>
to change my text.
</p>
<button onclick="FirstFunction()">Click Here</button>
<script>
FirstFunction = ()=>{
document.getElementById("first")
.innerHTML = "Hey! i am changed."
}
</script>
</body>
</html>
输出:
$(‘#txtName)方法:这个jQuery的id选择器用指定的id选择元素。像id这样的东西都应该是唯一的,这里也都适用。
语法:
$("#id")
参数:传递你想得到的元素的ID。
基本上,我们用这种方法选择一个元素,然后对所选的元素进行各种操作,如获得内部文本,改变CSS等。
例子:在这个例子中,我们将改变选定元素的CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- using jquery library -->
<script src=
"https://code.jquery.com/jquery-git.js">
</script>
</head>
<body>
<p id="first">
Click on button to <br>
Change my look.
</p>
<button onclick="FirstFunction()">Click Here</button>
<script>
FirstFunction = ()=>{
$("#first").css({
"border": "2px solid red",
"background-color": "pink",
"width":"10%",
"padding": "10px"
})
}
</script>
</body>
</html>
输出:
document.getElementByID(‘txtName’)和$(‘#txtName’)之间哪一个方法更快:这真是一个好问题。为了回答这个问题,让我们回忆一下什么是jQuery?
JQuery是一个旨在简化代码的javascript库。所以基本上jQuery是用javascript编写的。Document.getElementByID(‘txtName’)被用来选择一个id为txtName的元素,它是用本地javascript写的。而(‘#txtName’)也被用来选择一个id为txtName的元素。这是一个存在于jQuery库中的函数。如果你看一下这个函数的实现,它内部调用了document.getElementByID()。简单的答案是document.getElementByID(‘txtName’)比(‘#txtName’)快,因为jQuery是写在javascript之上的。这意味着jQuery内部只使用本地的javascript代码。而本地的javascript将永远是快速的。
document.getElementByID(‘txtName’)与$(‘#txtName’)之间的差异。
document.getElementByID(‘txtName’) | $(‘#txtName’) |
---|---|
它用于选择一个具有指定id的元素。 | 它也被用来选择一个具有指定id的元素。 |
这个方法是用本地javascript写的。 | 这个方法属于jQuery。而jQuery是用javascript编写的。 |
本机方法总是很快的。 | 在jquery中编写的方法与本地方法相比,速度较慢。方法,因为在内部它们会调用本地方法。 |