Develop Reference

jQuery - How to know if selector should have a # or . or anything like that?

I am learning jQuery and a few of the problems in my class have been having me do selector practice.
This is probably hella basic, but how do I know if that specific HTML or CSS element I'm selecting requires it to be $('#element') or $('.element') instead of just $('element')?

jQuery (and the DOM functions document.querySelector and document.querySelectorAll) are using CSS selectors to select elements from the DOM.
So basically you look at (an) HTML element(s) and try to find something that identifies the element(s), for instance if you want one particular button:
<button id="login">Login</button>
You can use its id. IDs are by definition unique on the page, so you'll always get that button (or nothing if the ID is different or the button doesn't exist). The "id" selector is a # in front of the actual id, so you'd use #login here.
But what if you want to select multiple items that are similar? For instance:
<li class="menu-item">Home</li>
<li class="menu-item">Shop</li>
<li class="menu-button">Logout</li>
What if you want the all the menu-item elements, but not the menu-button?
This time you can use their class attribute. The class selector is prefixed with a ., so you'd use .menu-item to select those two elements.
There are many other elements and CSS has quite a bit of syntax. Here are a few examples:
You can select by the element's tagname: button selects all <button> elements
You can select by any attribute: button[disabled] selects all buttons with a disabled attribute like <button disabled>n/a</button>
You can select based on their parent: li img selects all the images that are directly embedded in a <li> element
I highly recommend reading the MDN article for more information.

Switch <li> active element

Here is a link for a fiddle project I am working on right now. What I am trying to do is to switch active menu element depending on what section is displayed right now on screen. So if it is Kontakti on screen, then Kontakti in menu (<!--NAV BAR-->) has to display as active item. I am not familiar with jS

Add data-role=navigate attribute to ul element where navigation is housed,
In the javascript section of this fiddle,
please try with the following code,
$(function()
{
$("[data-role=navigate]").find("li > a").click(function()
{
$(this).parents("ul").find("li.active").removeClass("active");
$(this).parent().addClass("active");
})
})
I will explain in brief what the code does...
1) Binds a click event handler to <a> inside <li> which is inside <ul> with attribute data-role=navigate
2) When the click happens, it removes the active class for the current element.
3) Assigns the active class to the immediate parent of the <a>
It is a good practice to target specific needs in JS by placing attribute in the DOM elements and hooking up event listeners using that attribute.
Hope it helps!

Bootstrap's Affix might be something that could be useful in this case. It highlights what part of the page is displayed on the screen on a separate sub-navigation part of the page.
Btw, if you have Bootstrap code you can display it on Bootply quite easily. It provides Bootstrap's CSS and JavaScript files by default.

You say you're not familiar with JavaScript but you're asking for functionality that needs JavaScript. I'd recommend trying to use a plugin if it's not something you can write yourself.
Waypoints would do exactly what you're looking for:
http://imakewebthings.com/waypoints/guides/getting-started/

Add div element in ul list

I have some <li> elements, like this:
<ul class="some_class">
<li></li>
<li></li>
...
<li></li>
</ul>
And in my css file I have:
.some_class > li
I want to change some of that li elements by jQuery. My idea is to have something like this:
<ul class="some_class">
<div id="some_id">
<li></li>
<li></li>
</div>
...
<li></li>
</ul>
And change its by $("#some_id").html(). But its fails, because of css. I don't want to change css, cause its template css, and it's become very difficult to make changes in it.
Is there some other methods to perfom this?

Given the two pieces of source code you provided, your problem is not the CSS per say, but the way you changed the DOM, making the CSS invalid:
Solution 1:
Change:
.some_class > li
To:
.some_class li
Because in your code manipulation your <li></li> are now direct descendants of some_class your CSS is broken. In CSS > means direct descendant.
Solution 2:
If you don't want to change the CSS just add a class to the <li> you want to change, but do not nest them inside another div.
Note: given the comments about invalid HTML: Solution 2 will not cause a problem with your HTML, and for solution one, replace DIV for another UL

There are lots of ways to target elements, and especially with jQuery this is a breeze.
Of course you can just add a class to each of the elements you want to target, but there are lots of ways to do it without changing your markup at all. For example, you can select using the actual index of the element within the parent using eq(); use pseudo classes like first-child, last-child; use jQuery extensions like :even or :odd; use nth-child to select repeatable patterns like every third element (nth-child:(3n+3))...

Toggle multi-level ul with mootools

Greetings,
I would like to toggle a huge multi-level ul with mootools 1.1 or plain javascript.
The list looks like:
HTML:
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>
<ul>
<li>ddd
<ul>
<li>fff</li>
<li>ggg</li>
</ul>
</li>
<li>eee</li>
</ul>
</li>
</ul>
What I would like to do initially is to show the first level expanded, and the other levels collapsed and when each of the list items is clicked, to expand the ul below it.
Is it possible to do it without (greatly) modifying the html above?
From the documentation, I see that Fx.Slide is the most appropriate, however it accepts the id of the element as a parameter, which means I have to assign id's to each list item.
Is there a way by using selectors of collections of elements starting from the top?

I'm not sure whay I'll say apply with the very old 1.1 version. However, at least since 1.2, the element you need to pass is either the ID (like you said), either the actual element.
If you can use another version than 1.1, try the 1.3 which makes it easier to select the elements you want.
Here, I believe you need every <ul> element which has a direct <li> as parent. MooTools 1.3 features this new selector engine Slick, which would accomplish it fairly easilly: ul !> li.
However, I'm not sure (I didn't success) that the direct child selectors works properly with 1.1.
Here is what I came up with: http://jsfiddle.net/rCfwq/

HTML Classes WITH IDs

I'm a little confused about HTML classes and IDs, as I'd like to use them BOTH to describe an HTML element. Is this valid and supported by most browsers?
The motivation for me to use both is this:
I have a CSS style that I would like applied to multiple elements.
I have some AJAX and Javascript that will manipulate those same elements, so I need a way to identify which element is which using an ID.
So I'd like to use an id to identify each element for JS manipulation AND at the same time I would like to specify a class so that the same style is applied from the same css.

An ID would be unique to only one item, where a class can be used to group many items together. You can use them together as you stated, ID as a unique identifier for Javascript and the class to markup with CSS.
Search for html class vs id to get many articles about this topic.
Example:
<ul>
<li class="odd" id="item1">First Item in the List</li>
<li class="even" id="item2">Second Item in the List</li>
<li class="odd" id="item3">Third Item in the List</li>
</ul>

Yes, it is perfectly valid to use both the ID and Class properties in one element. Example:
<div class="infoBox" id="myUniqueStyle"> *content* </div>
Still, keep in mind that an ID can only be used once (hence its name), while you can use classes as many times as you'd like througout a document. You can still use both the ID and the class to apply styles, while only the ID is a simple way of reaching the element through javascript.
A good way of doing it is applying IDs to all elements that you know are unique (header, navigation, main containers etc.), and classes to everything else.
"Is the" applies to elements using ID: "This is the navigation bar", "this is the header"
"Is a" or "is an" applies to elements using classes: "This is a blogPost", "this is an infoBox" etc.

You can definitely use both if you need to.
An ID is typically used to identify structural sections of your site - you should have only one element with a particular ID and any element can have only one ID.
A class is used to set styles which might be used in more than one place in your HTML file - any element can have multiple classes set.
A typical HTML document using both IDs and classes might be something like
<html>
...
<body>
<div id="header"></div>
<ul id="nav" class="full-width dark">...</ul>
<div id="content">
<div id="important-container" class="class-set-by-javascript another-class-set-by-javascript"></div>
</div>
</body>
</html>

Yes, any normal browser should allow the setting of CSS classes regardless of element id. However, setting styles on a specific element (using ids, for example) may override styles set through a CSS class.

Just a very obscure note about combining class and id in your CSS declarations, there's a bug with IE6, if you have:
two or more pages which have an
element with the same id
those elements have different
classes
you're styling them using an
#idname.classname rule
then only the first rule in the stylesheet will take effect.
See this page for details

Yes it is valid in all browsers. ID expresses just the unique IDentification of your html control through others, and class applies some style to it. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.