What is the differance between $('.class') & $('class')?


#1



https://www.codecademy.com/en/skills/make-an-interactive-website/topics/jquery-dom-manipulation/jquery-core-repeat-3/0



#2

.class will select any html element with class class, for example a div:

<div class="class"></div>

or a paragraph with class class;

<p class="class"></p>

where as class will select the html element class (which doesn't exist, but if it would, it would look like this:

<class></class>

#3

well ok i got it but sometime i face classes with a name without any spot before the class name under the quotation mark and actually i must not put any spot either..
you can see what i mean in the image below:


#4

no, the exercise is testing you. $(description) for example is wrong, it doesn't exist. You must know the difference between classes and html elements, please tell me you did the html & css course? You need that knowledge to understand this


#5

the correct answer is: ....removeClass('description'); without any spot as you can see


#6

obviously, because you use the removeClass function, which means the name you enter is definitively a class, so a . is no longer required.

jquery needs to be able to distinguish between elements (div), id's (#div) and classes (.div), but if you use a build in function like removeClass, the name you are going to enter is obviously a classname, so the . for the distinguishing is no longer needed, since it is a class (since that is what the function does)


#7

thank you man but there's something else making me confused somewhat! in Lesson : Interactive Website: News Reader i see the class "description row" but in CSS its shown ".descriptin" is that normal to shorten a class name?


#8

no, classnames can't be shorten. You need to change the code so the class in html and css match


#9








  <div class="article current">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Embraer adds third Legacy 500 prototype to flight test campaign</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 23</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Embraer adds third Legacy 500 prototype to flight test campaign</h1>
        <p>The third Legacy 500 has joined Embraer's flight test programme aimed at delivering the midsize business jet in 2014. The airtcraft, serial number 003...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW business aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Flying the Gulfstream G650</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Flying the Gulfstream G650</h1>
        <p>Gulfstream is turning up the heat in the large-cabin business aircraft competition with its new G650 flagship, the largest, fastest, farthest-ranging...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">New retirements cut RAF VC10 fleet to four</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>New retirements cut RAF VC10 fleet to four</h1>
        <p>The UK Royal Air Force has retired another two of its Vickers VC10 tankers, with the pair's departure reducing its inventory of the Rolls-Royce...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Virgin can deliver more value for Delta than for SIA: Bastian</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Jul 17</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Virgin can deliver more value for Delta than for SIA: Bastian</h1>
        <p>Delta Air Lines president Ed Bastian is confident that the carrier can extract far more value from its shareholding in Virgin Atlantic compared with...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Defense</p>
      </div>
      <div class="col-xs-6">
        <p class="title">Freedom Experiences Two More Power Outages</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>Freedom Experiences Two More Power Outages</h1>
        <p>The Littoral Combat Ship (LCS-1) USS Freedom’s first overseas deployment to Southeast Asia has been marred by two more power outages...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

  <div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">FLIGHT</p>
      </div>
      <div class="col-xs-6">
        <p class="title">FedEx to acquire up to 30 United 757s</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>FedEx to acquire up to 30 United 757s</h1>
        <p>United Airlines is to sell up to 30 Boeing 757s to freight operator FedEx Express, with deliveries of the twinjets set to start this year.</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>


body {
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/reader/bg.png');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

p {
margin: 0;
}

.row {
margin: 0;
}

.articles {
margin-top: 30px;
margin-bottom: 30px;
}

.article {
color: #222;
background: rgba(255,255,255,.9);
border-spacing: 2px;
border-color: gray;
font-family: arial,sans-serif;
border-bottom: 1px #e5e5e5 solid;
}

.current .item {
background: rgba(206,220,206,.9);
}

.item {
cursor: pointer;
padding-top: 7px;
padding-bottom: 7px;

}

.item .source {
margin-left: 20px;
}

.item .title {
font-weight: bold;
}

.item .pubdate {
margin-right: 20px;
}

.item .pubdate {
text-align: right;
}

.description {
display: none;
padding-top: 10px;
padding-bottom: 10px;
}

.description h1 {
margin-top: 0px;
font-size: 23px;

as you can see we only have the class name "description row" in html not any class named ".description" i expect it to be ".description row" in CSS but it is not ! why is that???


#10

var main = function() {
$('.article').click(function() {
$('.description').hide();

$(this).children('.description').show();

});
}

$(document).ready(main);

and look at that ! descrption is here in js too!


#11

no, row and description are two class names (two different classes), a html element can have multiply class names:

<div class="one two three"></div>

now this div has three classes, which you can write in css:

.one { color: red; }
.two { background-color: aqua;}
.three { font-size: 20px; }

#12

oh man! their children are exactly the same in HTML ! why do we do that??


#13

why do we do what? I don't understand


#14

you defined three classes in CSS from only one class in HTML while we could create only one class. whats the reason of doing it?
and look at my example :

but we dont have .row{
)


#15

i created three classes in html. the spaces separates the classes.

You can create a class in html without defining it in css


#16

thank you sorry for making you tired lol : sweat_smile: