The topics I leart today

Image from Google

Today’s topics

1. jQuery
2. Ajax

jQuery

One important thing to know is that jQuery is just a JavaScript library. All the power of jQuery is accessed via JavaScript, so having a strong grasp of JavaScript is essential for understanding, structuring, and debugging your code.

<h1>Awesome!</h1>

To change this text to “Hello World!”, we can use JavaScript code like this:

document.querySelector('h1').textContent = 'Hello World!'

But in jQuery, we can use like this:

$('h1').text('Hello World!')

Isn’t it good? But maybe you don’t need to learn it in 2020 if you using any framework like Vue, Angular, etc and also in React library. But you can look if you want to know about jQuery.

Section 1: What is jQuery and what will you need?

Downloading jQuery

Go this link to download jQuery: https://jquery.com/download/

Please Download the compressed version of jQuery. You can’t able to edit the file in compressed version, but we also don’t need to edit the file.

You can also download jQuery using npmor yarn

npm install jquery
or,
yarn add jquery

Adding jQuery to your site

Add jQuery file in html

You can rename your jQuery file as jquery.js and then add to html file like the above image.

Section 2: A first at jQuery code

1st example

We target here at document, means full page. When document is ready, we call a anonymus function. Inside the function we target body tag and add a h1 tag using append() method.

Selectors and Filters

Let’s try in a tag:

css(propertyName, value)

Here we target h1 tag and add css() method to add css for the tag. Inside the css() method we pass two parameter. First one is property name and second one is value of the property. We add border with 3px dotted type with green color. I think you can understand.

Let’s try another thing

Three h1 tag access together

You can see, if there have more h1 tag, it will access all h1 tag together. How can we specific one?

For first one, h1:first

For last one, h1:last

First h1 tag

We can target using class and id insted of tag name.

Target using id/class

Replacing Content

Create a div with id textBox .

Now we can replace the text and also add another tag by replacing Hello jQuery text.

You can see, we declare a constant named newText and set the value of it a paragraph tag. Then we add a h1 tag inside the p tag using append() method. After that we call the div with it’s id and set the newText constant into the intire div tag using html() method. You can look at the dev tool to clear the concept.

Handling Events

on(event, function)

Here we style our div and make two event using on() method. For click event, we make a function and also for mouseleave event.

Default value:

After click the div:

For leave the mouse:

Section 3:

Hide/Show Events

we use show() method to show and hide() method to hide the div.

Default result:

After click the show:

Now if you click on hide, the div will hide.

Ajax

What is Ajax?

Ajax is a JavaScript library. AJAX stands for Asynchronous JavaScript And XML.

1. Asynchronous JavaScript & XML
2. Set of web technologies
3. Send & receive data asynchronously
4. Does not interfere with current web page
5. JSON has replaced XML for the most part

AJAX just uses a combination of:

• A browser built-in XMLHttpRequest object (to request data from a web server)
• JavaScript and HTML DOM (to display or use the data)

XMLHttpRequest Object Methods

XMLHttpRequest Object Properties

Send a Request To a Server

My goal to learn recently:

1. jQuery
2. Ajax
3. Redux
4. VueJs
5. Laravel
6. AngularJS
7. PSD to HTML+CSS
8. OOP in PHP
9. Wordpress Customization
10. XD to HTML conversion
11. UI/UX design (Photoshop, Illustrator, XD)
12. XML
13. CakePHP
14. Jira
15. Figma to HTML & CSS conversion