示例div.panel.panel-default和.panel.panel-default之间有什么区别？

Question

一般来说，我对编程和jQuery都是相当陌生的。我在大学里学过几门编程课程，在空闲时间里学习了越来越多的相关课程。我试着在这个主题上做了一些研究，就像我通常对这些我不知道的有趣的编码函数所做的那样。然而，令人惊讶的是，谷歌和其他地方在这个问题上并没有太大的帮助。

下面的jQuery选择器示例有什么不同？

div.panel.panel-default vs .panel.panel-default

我非常熟悉在我的jQuery脚本中使用示例.panel.panel-default中的选择器，但这是我第一次看到div.panel.panel-default。我在下面的示例中看到过以下代码：

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

Answer 1

第一个选择器要求元素是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">

Answer 2

这个选择器中的关键信息是': 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