jQuery Basic

For using jQuery, first we have to include jQuery in the HTML file as you have learned in previous article. Now, create an HTML file and include the jQuery file as shown below -

<html>
<head>
<title>First jQuery Example.</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
// document body
</body>
</html>

In the above example, we have placed the jQuery file within the js folder. So take care of this and give the right file path.

Document ready event

$(document).ready(function(){
	// jQuery code
})

As jQuery interacts with the DOM element, So we need to detect when the DOM is fully loaded. Here, document is a special variable that contains references to all the HTML elements on the page and when the ready event is fired the function within it is executed.



jQuery Syntax

jQuery code goes inside <script> element. This is same as Javascript.

Document ready event

All the jQuery code starts with the dollar sign '$' and ends with a semicolon ';'. Mostly, we like to place the jQuery code inside the ready event. The jQuery ready event triggers when DOM (Document Object Model) is fully loaded. The ready event is written as follows -

$(document).ready(function(){
  // jQuery Code...
})

The script waits for the document to be fully loaded.

Instead of ready event, we can also placed the jQuery code inside the following code.

$(function(){
   // jQuery Code...
});

jQuery Statement

The jQuery statement is written as follows -

$(selector).action()

The selector can be an HTML element, attribute and more. The action() method is some jQuery event or effect that performs on the selecting element.

Example

$("p").show();
$("#demo").hide();

In the above example, show() action shows the paragraph contents and hide() action hides the element with an id 'demo'.





Read more articles


General Knowledge



Learn Popular Language