Reference : Edx PennX Programming for the Web - Introduction to JQuery

Getting used to JQuery is much more important than I originally thought.

It might sometimes seem outdated because the whole javascript frameworks created nowadays as Angular, React, and all sort of applications flooding, but it is intuitive, easy to use and learn, and cross functional (except for IE6, of which no one is using now).

In JQuery Tutorial in MVC asp.net for Udemy, which I bought, Mosh Hamedani mentioned that the drawback of JQuery is and always criticized that it results to a lot of untestable spaghetti codes, but it lets you to lead a better understanding of how DOM works. We can use Angular and React and don’t use JQuery, but you might not have a good understanding of how things are happening behind the scene.

But as it’s a library not a default within any browsers, we first have to include it as

	<script src = "jQueryFile.js"></script>

We can use the ‘$’ sign to select the DOM element along with the CSS syntax.

some examples might show,

$(“*”) —> selects all elements
$(this) —> selects the current element
$(“div”) —> selects all <div> elements
$(“.title”) —> selects all elements with class=”title”
$(“#name”) —> selects the element with id = “name”

These are some use cases for JQuery, the first is without JQuery and pure Javascript, and second is the same functionality with JQuery.

	<html>
	<head><script src="jquery.js"></script></head>
	<body>
		<button id="clickMe">Click Me!</button>
		<p>You've clicked the button <span id="numClicks">0 times</span></p>
		<script>
			var clicks = 0;
			
			function clickHandler() {
				clicks ++;
				var numClicksSpan = document.getElementById('numClicks');
				if (clicks == 1) {
					numClicksSpan.innerHTML = 'once';
				} else {
					numClicksSpan.innerHTML = clicks + ' times';
				}
			}
			
			var button = document.getElementById('clickMe');
			button.addEventListner('click', clickHandler);
		</script>
	</body>
	</html>

By the way, this code will let you know how many times you have pressed the button. If you press it once, it will say once, more than one, it will print out the number(digit) and times after that.

And then this can be changed using jquery into …

	<html>
	<head><script src="jquery.js"></script></head>
	<body>
		<button id="clickMe">Click Me!</button>
		<p>You've clicked the button <span id="numClicks">0 times</span></p>
		<script>
			var clicks = 0;
			
			function clickHandler() {
				clicks ++;
				var numClicksSpan = $('#numClicks');
				if (clicks == 1) {
					numClicksSpan.html('once');
				} else {
					numClicksSpan.html(clicks + ' times');
				}
			}
			
			$('#clickMe').click(clickHandler);
		</script>
	</body>
	</html>

As we can see, jquery not only transforms document.getElementById by selectors but other functions as well. This would be another example

<html>
<head><script src="jquery.js"></script></head>
<body>

<input id="itemField"></input>
<br />
<ul>
<span id="list"></span>
</ul>

<script>
function keyPressHandler(e) {
	if (e.keyCode == 13) {
		$('#list').append('<li>' + $('#itemField').val() + '</li>');
		$('#itemField').val('');
	}
}

$('#itemField').keyup(keyPressHandler);

</script>
</body>
</html>

Which will add the elements of the input to the list whenever we press the enter key.