Difference between attr = val, attr="val" and attr = 'val' in JavaScript?

From the viewpoint of the selector, there is no difference, but there are some considerations:

• Single or double quotation marks depend on how the command started so as not to conflict. Example:

$('input[name="val"]') or $("input[name='val']")

• If the name contains special characters like [] for example, the selector will always need quotation marks, for example:

$("input[name='Campo[0].val']")

• In other cases, with a simple name you can use without quotes:

$('input[name=val]')

console.log($('input[name=val]').val());
console.log($('input[name="val"]').val());
console.log($("input[name='val']").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' name='val' value='teste' />

A good practice is to delimit the value of the attribute selected by double quotation marks ( "valor" ) or single quotes ( 'valor' ), depending on which quote was used in the selector.

Examples:

$("input[name='val']") // aspas duplas no seletor
$('input[name="val"]') // aspas simples no seletor

Although the non-quoted form may work in many cases, you can omit the quotation marks if the value of the attribute has only alphanumeric characters (including the hyphen ( - ) and the underscore ( _ ).

Examples:

<input name="val@" value="Enviar">
-> $("input[name=val@]").val()   // Retorno: erro! "@" não é alfanumérico
-> $("input[name='val@']").val() // Retorno: "Enviar"

<input name="val1 val2" value="Enviar">
-> $("input[name=val1 val2]").val()   // Retorno: erro! "espaço" não é alfanumérico
-> $("input[name='val1 val2']").val() // Retorno: "Enviar"

Functional examples:

The hyphen and underscore issues were raised in the comments. As stated, both characters are part of the alphanumeric group, so no error occurs if used in the attribute selector without the quotes:

Ex. 1 with quotation marks:

console.log($("input[name='-']").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="-" value="Enviar">

Ex. 2 without quotes:

console.log($("input[name=-]").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputname="-" value="Enviar">

Edit

Also raised in the comments on using the selector in pure JavaScript, there are exceptions in using the hyphen in the attribute name without the use of the quotes.

document.querySelector("input[name=-]") // ERRO!
document.querySelector("input[name=--]") // OK!
document.querySelector("input[name=-1]") // ERRO!
document.querySelector("input[name=--1]") // OK!
document.querySelector("input[name=-a]") // OK!

My answer is just to complement the rest.

If you are using Jquery selectors it would be interesting to follow the suggested framework standards:

  

Quotes

     

jQuery uses double quotes.

var double = "I am wrapped in double quotes";

     

Strings that require quotation marks internally must use quotation marks   double out and single quotes inside:

var html = "<div id='my-id'></div>";

Source: jquery.org