jQuery For Beginners

Hello,

Welcome to the jQuery for Beginners course.

In this section, we will start learning detailed information about jQuery.

Before starting this course,

It is a prerequisite to taking the following courses.

• HTML Getting Started
• CSS Getting Started
• Javascript Core
• If you already have knowledge of these topics, you can continue the course.

Let's get started.

First of all, let's answer the question of what is JQuery used for.

Before answering the question, let's repeat our basics.

HTML language is a markup language. So it is a text markup language, not a programming language. It is far from concepts such as object-oriented. In other words, there is no object in its structure; the things we know are HTML tags, attributes, etc.

Many times we need to do operations on HTML elements on web pages. To provide this and to make HTML elements accessible to JS, we express it with modeling called DOM (Document Object Model).

Javascript performs operations on the DOM, which is the object equivalent of the web page. We call this DOM manipulation.

Let's give an example.

We have a button element like in the example below, and it has 'Not Clicked' text. When we click the button, we will make the text of the button change to 'Clicked'.

To achieve this, we need to do DOM Manipulation using Javascript language.

In our Introduction to Javascript course, we learned how to manage a Web Document with Javascript. JQuery is a library that allows us to make DOM manipulation more concise and concise when we do it with Javascript.

<!--Initial Element -->
<button id="my-button">Not Clicked</button>

<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>

A question for you!

In the example below, we defined a button with the id of my-button.

Now let's access this element with Javascript via DOM.

When we click the button, we will reach the DOM with the JS code and change the innerHTML property of the element with the my-button id to click.

<button id="my-button">
       Not Clicked
 </button>

<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
 function(){
    myButton.innerHTML = "Clicked"
})
</script>

JQuery is nothing but a library that emerged to simplify the use of functions and methods in JS Core.

In other words, it enables us to make many things that we can do with VanillaJS easier syntax and easy to read.

Let's explain the code.

let myButton = document.getElementById('my-button');

We assign the Javascript document object to the variable named myButton with the getElementById method.

myButton.addEventListener("click", function(){

myButton.innerHTML = "Clicked"

})

Later, we both listened to the click event of the button and made changes to the button.

We have done DOM manipulation by using the core features of the language without using any library or framework expressed as native or vanilla above.

Let's write the same code with jQuery. And take advantage of the features that the jQuery library offers us.

The concept, which is expressed as VanillaJS in many places, is actually pure clean only core Javascript objects, methods, and functions, and the use of the facilities offered by the browser.

Below we have done our previous example using JQuery.

Just be careful how much shortening the code by ignoring the syntax.

<script>
$('#my-button').on('click', function(){
      $(this).text('Clicked');
})
</script>

<button id="my-button">Not Clicked</button>

Congratulations 🎉

In this section, We started learning jQuery and understood how much jQuery can make our life easier.

See you in the next Section!