joplin-notes/joplin notion extension/Web Development/Javascript/jquery.md

jquery https://api.jquery.com/jQuery.ajax/ https://www.w3schools.com/jquery/default.asp

Setup

Use cdn of google or download compressed from jquery.com and include in script src attribute.

Core

following is important to wait for document to fully load

$(document).ready(function(){

 // jQuery methods go here...

}); 

This is the shorthand way for doing above

$(function(){

  // jQuery methods go here...

}); 

Events

// will execute click event for these
$("p").click(); 

// this will attach event listener to click event
$("p").click( ()=>{
	console.log('clicked')
} ); 

// on will attach event based on name, similar to addEventListener
 $("p").on("click", function(){
  $(this).hide();
}); 

 

Effects

Once the effect is over then only we have to execute some statements then using callback is useful

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

 

Method chaining

Instead of selecting same elements each time for different methods we can just chain them together

// three methods chained 
$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 

   

HTML Part

text(), html(), val(), attr()  

Traversing

next(), parent(), children()

AJAX

Asynchronous Javascript and XML load() : this will fetch the data and load in the element get()/post() : for just fetching request for get and post method respectively ajax(). for xhr with ability to send different headers, methods, content-type etc

$("#div1").load("demo_test.txt");

$.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });

$.ajax(url,{
	"accepts" : "",
	"contentType": "",
	 method : ""
})