Jquery objectifying css objects


#1


I'm having a hard time figuring out when you would use $("css object") vs $("#css object")
For example, why do we use "active" instead of ".active" in this course?


https://www.codecademy.com/courses/web-beginner-en-JwhI1/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1


Replace this line with your code.


#2

We use "active" when it is already known to be a class name, such as,

`.addClass()`, `.removeClass()` and `.toggleClass()`

Clearly, we do not need to tell jQuery that it is a class name. That's what it is expecting.

In a selector things are different. If we do not denote a class or id, it will look like a type selector.

$('body')
$('p')
$('div')

are all element type selectors. If we wrote,

$('active')

jQuery would be looking for an <active></active> element, which does not exist in HTML. When we write,

$('.active')

jQuery knows it is looking for a class="active" attribute in the DOM tree.

Starting to make sense?


#3

@mna91,

+++++ addClass removeClass

Every HTML-Element has so called attributes.
One of the possible attributes, is the class-attribute.

If you write the HTML-document, you add the class-attribute
within the Element-Tag by using the syntax
class-keyword = then a string
containing the class-name
OR mutliple class-names which are =separated=from=eachother= by a space

Thus with

 <div class="myClass1 myClass2 myClass3" ></div>

you now have a DIV-Element carrying 3 classes myClass1, myClass2 and myClass3

As part of its CSS-category-of-Methods jQuery gives you the ability
to manipulate this class-attribute
by providing the addClass()-, removeClass()-, toggleClass()-Methods.
You will have to provide the Method at least 1 argument
which is the string VALUE of the class-name.
Thus you have to use
$('div').removeClass('active')
$(this).addClass('active')**

The confusion when to use a pre-pending dot or NOT...
In the Cascading Style Sheet syntax,
you have to prepend-a-dot to the classname
so the CSS will interpret it as a class-attribute
So in the file style.css you will find an object
identified by .active,
In this .active object
the background property-key is set to a particular VALUE

Reference::

google search
class site:jquery.com
https://api.jquery.com/category/selectors/
http://api.jquery.com/class-selector/
https://api.jquery.com/element-selector/
Play around with
http://www.w3schools.com/jquery/trysel.asp