Diferencia entre: marcado y: seleccionado cuando se trabaja con elementos de opción en jQuery

Ambos :checked y :selected parecen proporcionar resultados iguales cuando se trabaja con elementos . ¿Hay alguna ventaja de usar uno sobre el otro? Si :selected hace lo mismo que :checked , ¿cuál es la razón para que se incluya en jQuery?

Ejemplo:

 

Select a value

Select a value

Option one Option two $('select').on('change', function(){ $('.p1').text(function() { return $('option:selected').text(); }); $('.p2').text(function() { return $('option:checked').text(); }); });

Demostración de JS Bin

A juzgar por la documentación , parece que :selected es idéntico a :checked con la excepción de que solo coincide option elementos de option . Esto es corroborado por que HTMLOptionElement es el único tipo de elemento en el DOM que tiene una propiedad selected (que es lo que :selected utiliza para probar la selección de un elemento). En otras palabras, cuando solo le interesan los elementos de option , ambos selectores son idénticos, excepto que :selected no es estándar.

Dado que la documentación misma recomienda usar selectores estándar para maximizar el rendimiento (y porque ¿por qué no usaría un selector estándar en lugar de uno no estándar si tuviera la opción?), No creo que haya ninguna razón para usar :selected en cualquier situación nunca No puedo pensar en ninguna situación en la que *:selected sea ​​preferible a la option:checked (seriamente, ¿cuándo fue la última vez que usó una pseudo-clase de este tipo sin un selector de tipo?).

Quizás la razón por la que se incluyó en jQuery fue porque los selectores 3 (en los que aparece :checked aparece) aún no estaban estandarizados en el momento en que nació jQuery, pero :checked está en la especificación desde 2000 , por lo que no estoy completamente convencido de que sea así. realmente la razón

Normalmente,: selected es para elementos de SELECT OPTIONS. : marcado es para elementos de CHECKBOX.

 

Select a value

Select a value

Select a value

Select a value

$('input').on('change', function(){ $('.p1').text(function() { return $('option:selected').text(); }); $('.p2').text(function() { return $('option:checked').text(); }); $('.p3').text(function() { return $('input[type="checkbox"]:selected').val(); }); $('.p4').text(function() { return $('input[type="checkbox"]:checked').val(); }); });

http://jsbin.com/zadocokule/edit?html,js,output