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

Question

There is some difference in using the selector in the following ways, or one that is "correct"?

[name="val"] [name='val'] [name=val]

Answer 1

From the selector’s point of view, there is no difference, but there are some considerations:

• Single or double quotes depend on how the command started not to conflict. Example:

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

• If the name contains special characters such as [] for example, the selector will always need quotes, for example:

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

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

$('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' />

Answer 2

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

Examples:

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

Although the unquoted form can work in many cases, you can omit the quotation marks if the attribute value 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 question of the hyphen and the underscore. As stated, both characters are part of the group alphanumeric, so there is no error if used in attribute selector without 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>
<input name="-" value="Enviar">

Ex. 2 without quotation marks:

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

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

Edit

Also raised in the comments about using the selector in pure Javascript, that there are exceptions in the use of the hyphen in the attribute name without the use of quotation marks.

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!

Answer 3

My answer is only to complement the others.

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

Quotation marks

jQuery uses double quotes.

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

Strings that need quotation marks internally should use quotation marks double outside and single quotes inside:

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

Source: jquery.org