The Developer Brains


LEARN JQUERY

Web Designing | Web Development


JQUERY TUTORIALS













Jquery logo write less do more


Query is a lightweight, fast, small, cross-platform, and feature-rich library of JavaScript so it has .js extensiton. We can download JQuery library from www.jquery.com.




Jquery Library

  • jQuery was created by John Resig at at BarCamp NYC in January 2006.
  • JQuery is a JavaScript library
  • It is very fasy and light weight Javascript library.
  • We can also include it from a CDN (Contant Delivery Network)

Slogan

'Write less, do more'
This Slogan describes all about jQuery Library.

We will discuss Jquery in the upcoming tutorials. We will try to solve all your doubt related to jQuery with simple example. You can run the examples on our TDB Code Editor.



LEARN jQuery
















</jQuery Tutorials>

This tutorial will help you in understanding how you can create modern, attractive, responsive and user friendly User Interface (UI) designs




What Is Jquery?

jQuery makes coding simple. jQuery is supported by all major browsers including Internet explorer. We can connect jQuery with backend code to make code simple.

Simple Example

Here is a simple example of Jquery.



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	$("p").click(function(){
	$(this).hide();
	});
	});
</script>
</head>
<body>

<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>

</body>
</html>


We will discuss more about Jquery Effects in the upcoming tutorials.










TDB EDITORS

Now, You can use our latest TDB Code editor Pro for Online coding with Live Server Feature and many other premium features. It is basically designed for beginner deginers to check their codes online (based on HTML, CSS, and JavaScript web technologies). You can also write your code and check code result instantly.


  














</jquery Code Editor>

Now you can run your code online using TDB Editor. Click on Try it button and run your code online.

							
							<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
	$(document).ready(function(){
	$("p").click(function(){
	$(this).hide();
	});
	});
</script>
</head>
<body>
<p>Click Here...</p>
</body>
</html>

Try it Yourself

Result

Click Here...

When you click on "Click here..." text you can see the text disappears. This effect is done by jQuery hide() function. If you want to hide and HTML element you can use hide() or toggle() method.












</Learn How to link an external Java Script file with HTML web page>

It is a very simple process to connect your jquery code with HTML web page. web page.
Follow the instructions given below.





REQUIREMENTS

You need to install latest software on your PC
i.e. Google Chrome Web Browser or Microsoft Edge browser, VS Code Text Editor





FOLLOW THESE STEPS

  1. Open VS Code Editor

  2. Create a new JS file

  3. Copy Jquery Syntax

  4. Now Save it as effect.js

  5. Now add this link on your HTML5 file's head Tag

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

  6. Now your Jquery code's file is connected with your HTML5 web page.








Next: Coming Soon...


Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers


Share Now