What is the difference between $('#id') and Document.querySelector('#id')?

Asked

Viewed 172 times

2

Aren’t you supposed to get the same result using one method or the other? I would add one Listener oncick and only using the second method could he effectively declare Event Listener. Why?

var record = document.querySelector('#record');

record.onclick = function(){

alert("Entrou!");

}

var record2 = $('#record2');

record2.onclick = function(){

alert("Não vai entrar!");

}
    <!--UPDATE-->
    var record3 = $('#record3');
record3.on('click', function(){ alert('Vai entrar sim!'); });
<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
  
  <button type="button" id="record">Record</button>
    <button type="button" id="record2">Record 2</button>
    
    <!--UPDATE-->
    
     <button type="button" id="record3">Record 3</button>

javascript jquery
  • 4

    The former uses the alias for jQuery, while the latter uses the DOM with Javascript only.

  • and what a difference that makes at the level of onclick?

  • 1

    If you create a [mcve] with the described behavior it will be easier to infer what is occurring.

  • @Andersoncarloswoss made!

  • @ihavenokia if I’m not mistaken (I might be wrong because I’ve never tested), you’re trying to use the jQuery to select, and the onclick of JS to click on jQuery would just $('#record2').click(function(){})

  • record2.on('click', function(){ alert('Vai entrar sim!'); });

  • Added the above example to Fiddler

  • fixed, and works!

Show 3 more comments

2 answers

6


The first you use the alias for use of jQuery, while in the latter it uses the DOM with Javascript only.

var record = document.querySelector('#record');
record.onclick = function(){
alert("Entrou!");
}

var record3 = $('#record3');
record3.on('click', function(){ 
alert('Vai entrar sim!');
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
  
<button type="button" id="record">Record</button>
<button type="button" id="record3">Record 3</button>

What you missed was mixing jQuery with Javascript. While you can blend in, it’s important to understand that jQuery and native Javascript refer to DOM elements differently. Here you should be aware that record, record2 and record3 are not the same thing. One is a DOM element and the other is a jQuery object that contains a value.

var record2 = $('#record2');
record2.onclick = function(){
  alert("Não vai entrar!");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="record2">Record 2</button>

0

Does not work for the simple reason of the return of each function:

document.querySelector('#record'); // retorna um [object HTMLButtonElement]
$('#record2');  // retorna um [object Object]

To work the right way, you need to treat it the right way:

var record = document.querySelector('#record');
record.onclick = function(){
  alert("Entrou!");
}

$('#record2').on('click', function(){ 
  alert('Vai entrar sim!'); 
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"></script>
 
<button type="button" id="record">Record</button>
<button type="button" id="record2">Record 2</button>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.