JS jQuery is easy to use and reduces your efforts. We can start to implement and understand how to apply in web designing.
So, all my friends we can start our jQuery tutorial first we understand why we use this language, and what is the history of this language?
Do you know how to use jQuery?
What was the impact of that language?
On which platform we use this language without coding?
So, my friends, and programmers we can share all this question answer in this blog.
We start this journey step by step, and gradually move forward by learning a little bit basic.
I hope do you known what the Java Framework and we can use different frameworks in various types of Coding. If you cannot any idea about it So, don’t worry you can learn it.
Now, jQuery is the quick, and easy to use language. So, we can reduce your effort and time with the help of this type of language. This language is comfortable for all types of programmers.
In the jQuery we can easily animate any videos in small and few lines of coding.
Now without wasting a time we learn JS jQuery history, jQuery usage, and their platforms.
Let’s go on this new journey, and make a website more attractive.
What’s to learn in this blog
- Basic of jQuery
- Extra of jQuery
- jQuery Syntax
- Effects of jQuery
- jQuery HTML
- Traversing jQuery
- JavaScript vs jQuery
- FAQ
What is jQuery?
Query is a very lightweight language, and easy to learn.
JavaScript library, and in a simple way to say “less code, more effects”. With the help of JS jQuery, you can handle large, and complex code easily, and reduce your efforts and stress.
It is very interesting, and make fun with our website. One the best part of this language is a single code perform multiple actions.
They can add animation effects to our website icons, text, and many more. Also, make a very effective view to website. So, our visitors can more attractive to this type of effect.
With the help of this you easily manipulate, and traverse DOM elements. Also, in an easy way to exchange data between clients, and servers.
jQuery is compatible with browsers means easy to run, and this language is free to download. They can make very easy and normal JavaScript tasks.
Extra of jQuery
Now the jQuery is open source, and free to download.
So, you can download it easily.
Here another option is also available to use jQuery without downloading the jQuery, and what’s that.
So, you can simply open any web browser, and search jQuery CDN. Copy that the jQuery CDN link and paste it to our website code.
CDN stands for the “Content Delivery Network”. CDN can support benefits by reducing load time because it is hosting jQuery globally.
One of the important notes is that if you display animated icons like battery charging, links icon, message folder, and many more. So, jQuery also provides that type of service.
Now, you can also provide animated text to the websites. So, our customer is more interest in our website.
Syntax of jQuery
In that
$ sign to define query.
(selector) to find HTML elements.
action () to performed.
Ex:
$ (“p”). hide ();
Above example hides all elements of <p>.
Effects of Query
Now, with the help of this you can hide, slide, animate, callback, and many more.
jQuery hide ()
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/
jquery.min.js”> </script>
<script>
$ (“#hide”). click (function () {
$ (“p”). hide ();
</script>
</head>
<body>
<p> Welcome to the JavaScript, and learn to everything about javascript. Make your knowledge and build a strong and very beautiful website. </p>
<button id = “hide”> Hide </button>
</body>
</html>
The above example explains that they hide all elements of <p>. If you run this code then you can understand how the effect of this hide. If you click the hide button then paragraph HTML elements are hidden.
jQuery Sliding
Here three types of Sliding are there
- slideUp ()
- slideDown ()
- slideToggle ()
Now in that slideUp () method we up the content, In slideDown () method we can click button, and all the content is move in bottom side of the page.
In slideToggle () we can move each side means up, and down the particular content.
Ex:
<script>
$ (document). ready (function () {
$ (“#flip”). click (function () {
$ (“panel”). slideToggle (“fast”);
</script>
<body>
<div id = “flip”> Click to panel </div>
<div id = “panel”> Hello my programmers </div>
</body>
Now you can try this above example, and understand how they will be work.
jQuery animates
<script>
$(document). ready (function () {
$(“button”). click (function () {
$(“div”). animate ({
left: ‘450px’,
opacity: ‘0.7’,
height: ‘300px’,
width: ‘300px’
</script>
<body>
<button> Animation </button>
</body>
Now try this animate program, and enjoy this effect on your web page.
My all friends we can play one quiz to check our knowledge………
- $ (“div”). what does it select?
All div elements
- Is jQuery a library for client or server scripting?
Client scripting
- Is it possible to use jQuery together with AJAX?
The answer is yes.
- Which jQuery method is used to hide selected elements?
hide ()
- Which jQuery method is used to set one or more style properties for selected elements?
CSS ()
I hope you all are enjoying this interesting quiz game.
Now we can move to next topic………
jQuery HTML
DOM accessing HTML, and XML documents.
DOM manipulate jQuery method like
- Text
- HTML
- Val
<script>
$(document). ready (function () {
$(“#btn1”). click (function () {
alert (“HTML: ” + $ (“#test”). html ());
});
});
</script>
<body>
<p id=”test”>This is some <b>bold</b> text in a paragraph. </p>
<button id=”btn1″>Show HTML</button>
</body>
Try by yourself, and understand how HTML elements used with the jQuery method.
In that JS jQuery HTML we can use jQuery Add, Remove, CSS Classes, and jQuery Dimensions method.
jQuery Traversing
Traversing means move through to find HTML elements based on their relationship.
JS jQuery traversing easily ancestors, descendants, and siblings in the tree.
jQuery traversing start from their current node.
So, this is traversing with jQuery.
In conclusion, we said that we clear the concept of jQuery and next we understand what is the Full-Stack development.
JavaScript vs jQuery
| JavaScript is work in major browsers, Like chrome, Firefox, and internet explorer. | jQuery is a JS library, and simplifies HTML doc, event handling, animation, and rapid web development. |
| JavaScript is a combination of ECMA and DOM. | jQuery has DOM |
| Animations are not possible using JavaScript. | Animation easily develop using jQuery. |
Conclusion
In that we can conclude that jQuery is easily available and easy to download. They can run and support all the browsers. jQuery table is use for searching and sorting. Most Important note if you do not idea about jQuery then you can directly use the jQuery CDN for the effect.
FAQ
In the jQuery, There are lots of libraries extendable. Also, they easily run in all browsers. So, many popular companies use jQuery.
jQuery data table works on HTML tables and it is listing and adding interaction. Then it is helpful to create sorting, searching, and pagination without any configuration and write in just one line of code.
jQuery is not used in angular because both the language is overlapping on DOM and DOM cannot understand which language interacts with them. So, we cannot use jQuery in angular.
