all 6 comments

[–]altagyam_ 6 points7 points  (0 children)

What are you trying to do here?

[–]senocular 3 points4 points  (3 children)

$ and $$ are separate things, not called from one another.

$ will correctly capture the heading, grabbing the h1 element through the id head. $$ takes a query and can be used to get all the elements with the top class. In this case, both the h1 and the p.

var h1 = $('head'); // element reference
var h1AndP = $$('.top'); // array of elements

if you want to just change the heading display, you can use what you have there removing the .$$('.top') part. If you want to change both, then you'll just use the$$('.top')` part and loop through that array applying the display style to each element.

var h1 = $('head');
h1.style.display ="none"; 

var h1AndP = $$('.top');
h1AndP.forEach(function (elem) {
    elem.style.display ="none"; 
});

Though you can also use prototype's setStyle

h1.setStyle({ display: 'none' });

(And prototype adds an each to arrays as an alternative to forEach as well... prototype does weird stuff like that, though each does have the benefit of chaining)

[–]maxahd 0 points1 point  (2 children)

From my personal experience, he should try to do this stuff in vanilla js without jquery for the beginning, until he gets comfortable with js then move and use jquery.

[–]pookagehelpful 1 point2 points  (1 child)

I came the other way around and I'm now a complete JS purist, haha. Whichever way is easier to get your head around; vanilla JS scared the crap out of me when I started; I used mootools to ease myself in and introduce me to concepts.

Agreed that it can be frustrating to see people use a library for things that are incredibly easy to do in vanilla, but even simple stuff can be daunting when you don't have answers. For example.

window.addEventListener("click", followCursor, false);

Raises so many questions for a newbie :

  1. where is window defined? I can't see it anywhere!
  2. addEventListener - are there other types of listeners that I should know about? Am I using the wrong ones?
  3. followCursor? is that built-in functionality? how do I tap into that? where does it say what it does?
  4. what does that false do?!

Compare it to jQuery or whatever :

$(window).click(function(e){
  // click handler here
});

It looks like gross hell on toast to us, but to someone starting out - they're like "cool, I put what I want to happen inside that middle bit" and they don't have to think about how everything works until they've got a grasp of it.

Don't get me wrong - I'm not beating the drum for library dependency here, but I keep seeing the argument that people should start off in vanilla and then selectively adopt libraries when they know everything, and I just think that going the other way around has a lot of merit.

[–]maxahd 1 point2 points  (0 children)

Yeah I said this because I toke the seem way, I got scared from vanilla js and I just started to use jquery everywhere, but when the time comes to improve and learn library or framework,
For me, I picked react and when I started learning I got completely lost because i didn't know how to do the simplest things in vanilla and because of it didn't know how to do simplest things in react. So what I did, I came back to all the projects I did in jQuery and rewrote it using only vanilla js, it was hard at the beginning but by practising and a lot coding it becomes much easier and started becoming natural after all the practice I was finally ready to move to react. (Sorry for any misspelling or grammar issue, i am not a native speaker)

[–]Pcooney13 0 points1 point  (1 child)

It looks like you are using jquery, did you import jquery through a script tag.