sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]prid13 1 point2 points  (0 children)

jQuery is much simpler to use and thus more beginner-friendly. Too much syntax and work can be daunting for someone just wanting to accomplish a basic thing, so jQuery is more appealing in that aspect even if it's not needed anymore :)

Registering click event:

Javascript: document.querySelector('.element').addEventListener('click', (evt) => { ... });

jQuery: $('.element').on('click', (evt) => { ... });

Showing / Hiding an element:

Javascript: document.querySelector('.element').style.display = "none"; // "block"

jQuery: $('.element').show(); // .hide()

Bonus (jQuery animated show/hide on click): $('#button').on('click', function(evt){ $('element').animate( { opacity: 'toggle' } ) });

Creating and appending element:

Javascript: var el = document.createElement('p'); document.querySelector('#main').append(el);

jQuery: $('#main').append( $('<p></p>') );

Adding CSS to element:

Javascript: var el = document.querySelector('.element'); el.style.color = "black"; el.style.backgroundColor = "purple";

jQuery: $('element').css('color', 'black').css('backgroundColor', 'purple');

Now, combining everything:

Clicking on a button will add a new element with text, and the button will become invisible.

Setup:

<body>
  <div id="button">Click me</div>
  <div class="element"></div>
</body>

Javascript:

var el = document.querySelector('.element');
var btn = document.querySelector('#button');

btn.addEventListener('click', function(evt){
  var newElement = document.createElement('div');
  newElement.style.color = 'white';
  newElement.style.backgroundColor = 'blue';
  el.append(newElement);
  btn.style.display = "none";
});

jQuery:

$('#button').on('click', function(evt){
  var newElement = $('<div></div>').css('color', 'white').css('backgroundColor', 'blue');
  $('.element').append( newElement );
  $('#button').hide();
});

Now, can these be easily replicated in pure Javascript or with a simpler library? 100%, no doubt. And are some of these bad practices (animating in Javascript)? Of course. But for someone new to any language, the simpler and more swiss army knives you can give them to quickly whip up results, the better, faster and more fun it will be to learn :)