getElementById 和 jquery $('#smth') 之间的区别

Java

getElementById和jquery $('#smth')两者之间的主要区别在于它们是用于选择和操作DOM元素的不同方法。

getElementById是JavaScript的原生方法，用于通过元素的id属性来获取指定的DOM元素。它接受一个参数，即要获取的元素的id值，并返回对应的DOM元素对象。例如，如果有一个id为"smth"的元素，可以使用以下代码获取该元素：

Javascript
var element = document.getElementById('smth');

相比之下，jquery的选择器$('#smth')是一种更加灵活和强大的方法。它是jquery库提供的一种选择器语法，用于通过选择器表达式来选择DOM元素。这个选择器表达式可以是元素的id、class、标签名等等。同样以id为"smth"的元素为例，可以使用以下代码：

Javascript
var element = $('#smth');

可以看到，使用jquery选择器可以更方便地选择和操作DOM元素。而且，jquery库还提供了丰富的方法和功能，可以对选中的元素进行各种操作，比如修改样式、添加事件监听器等等。

案例代码：

假设有一个HTML文件，其中包含一个id为"myDiv"的div元素。现在我们分别使用getElementById和jquery选择器来获取并修改这个元素的内容。

html
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
    <div id="myDiv">Hello, World!</div>
    <script>
        // 使用getElementById获取元素并修改内容
        var element1 = document.getElementById('myDiv');
        element1.innerHTML = 'Hello, getElementById!';
        // 使用jquery选择器获取元素并修改内容
        var element2 = $('#myDiv');
        element2.text('Hello, jquery selector!');
    </script>
</body>
</html>

在上面的代码中，我们首先通过getElementById获取了id为"myDiv"的元素，并使用innerHTML属性将其内容修改为"Hello, getElementById!"。然后，我们使用jquery选择器获取了相同的元素，并使用text方法将其内容修改为"Hello, jquery selector!"。

通过这个例子，可以清楚地看到getElementById和jquery选择器的使用方法和区别。getElementById是原生JavaScript提供的方法，适用于简单的DOM元素选择和操作；而jquery选择器则提供了更多的灵活性和功能，适用于复杂的DOM操作和动态交互。