Basics about jQuery in HTML

1) Include jQuery in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>

2) Document ready function()

The $(document).ready() function in jQuery is used to ensure that your code runs only after the DOM (Document Object Model) has been fully loaded and is ready for manipulation. It helps prevent issues where you try to interact with elements on the page before they exist, potentially leading to errors or unintended behaviour.

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "yellow");
  });
});

Note : Modern day browsers often handle scripts placed at the end of the HTML file without explicit $(document).ready() well, using $(document).ready() is considered a best practice to ensure consistent behavior across different browsers and to avoid potential issues, especially in complex web applications.

3)Basic jQUERY functions

Note : We will not be using document.ready() so that code will be short and concise!

The Html code on which we will apply the following functions is

<p class="p1"> This is a jquery tutorial !! </p>
<p class="p2"> This paragraph will get toggled(hide and show) </p>
<p class="p3"> This is para 3 </p>
<button id="hide">Hide</button> 
<button id="show">Show</button>
<button id="btn">Hide P1</button>

1) click - Used over a button(preferred) or any paragraph, heading etc. to perform the below mentioned functions.

2) dblclick - As the name suggests , it performs the operation on a double click

SYNTAX :

 $("#id of button or whatever u want to perform click on").click(function () {
  $("#id of element u want to perform operation on").functionused();
});


// for double click
//  $("id").dblclick(function () {
//  $("id").function();
//   });

3) Hide() function : When we click the button , it will hide the paragraph!

$("#hide").click(function () {
  $(".p1").hide();
});

4) Show() function : It will show the hidden paragraph!

  $("#show").click(function () {
    $("h1").show();
  });

5) Toggle() function : It will toggle bw hide and show i.e When we click the button ,it will hide the paragraph and then on clicking again it will show the paragraph .

$("#btn").click(function () {
  $(".p2").toggle();
});

6) Alert() function : It gives a popup alert on the top of the page as soon as the operation given in it is performed .

$(".p2").mouseenter(function(){
    alert("You brought the pointer to the paragraph P2")
})

$(".p3").mouseleave(function(){
    alert("You now left the paragraph P3")
})

Since here we have used mouseenter() and mouseleave() , lets dicuss them :

• Mouseenter() : It executes whatever is written inside the function when the pointer enters the mentioned paragraph or heading or whatever tag is there .

• Mouseleave(): It executes whatever is written inside the function when the pointer leaves the mentioned paragraph or heading or whatever tag is there .

7) Append() and Prepend(): As the name suggests append() functions appends the text in start of the text already mentioned and prepend at the end of the text .

 $(".p3").append("This is the text added using append() function");
  $(".p3").prepend("This is the text added using prepend() function");


// Para 3 original text : This is para 3
// Text after append() and prepend() 
// This is the text added using append() function This is para 3 This is the text added using prepend() function.

8) before() and after() : before() function adds the given text or tag in front of the mentioned text/tag etc. while after() does the opposite. It is different from append() and prepend() because it does not adds the text in the same tag ( here in example - it will not add in text in the h1 tag) but it will make a different space(or we can say body for it ).

// h1=" and "        just an example 
$("h1").before("before")
$("h1").after("after")

// OUTPUT   will be in different lines as all are differnt entities
//before
//and      this and will be of size of h1 tag 
//after

4) Conclusion

Okay so these were the basic jquery commands which u can use in your webpages and make it more interactive and goodlooking . We will learn more commands and functions in some other blog .

Till then good bye and keep learning and exploring !!