Question

我一般对编程和jQuery还是陌生的。我在大学期间参加了一些编程课程，并在业余时间学习了越来越多的相关主题。我已经尝试过对此主题进行一些研究，就像我通常使用这些我不知道的有趣的编码功能一样。然而，令人惊讶的是，谷歌和其他地方在这个问题上没有很大的帮助。

下面的jQuery选择器示例之间有什么区别？

div.panel.panel-default与.panel.panel-default

我对jQuery脚本的示例.panel.panel-default中的选择器非常熟悉，但这是我第一次看到div.panel.panel-default。我已经看到了此示例中使用的代码：

$( 'div.panel.panel-default' ).hide();
$( 'div.panel.panel-default:first' ).show();

Answer 1

此选择器中的关键信息是'：first'，它是一个针对某个东西的第一个实例的jQuery选择器。因此，在您的情况下，第一个函数将隐藏具有“ panel”和“ default”类的所有div的所有实例，第二个函数将显示具有相同类的所有div的第一个实例。

<div class="panel panel-default"> First Instance </div> // Shown
<div class="panel panel-default"> Second Instance </div> // Hidden
<div class="panel panel-default"> Second Instance </div> //Hidden

在此处了解更多信息：jQuery :first selector

Answer 2

第一个选择器要求您元素是div，第二个选择器可以是任何元素。

$('div.panel.panel-default')仅选择：<div class="panel panel-default">

$('.panel.panel-default')例如：

<div class="panel panel-default">
<p class="panel panel-default">
<span class="panel panel-default">
<header class="panel panel-default">
<footer class="panel panel-default">

示例之间的区别是什么：div.panel.panel-default和.panel.panel-default？

2 个答案: