initial

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

@@ -0,0 +1,99 @@
+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
+ ```js
+$(document).ready(function(){
+
+  // jQuery methods go here...
+
+}); 
+```
+
+This is the shorthand way for doing above
+```js
+$(function(){
+
+  // jQuery methods go here...
+
+}); 
+```
+
+### Events
+```js
+// 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
+
+```js
+
+
+$("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
+```js
+// 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
+```js
+$("#div1").load("demo_test.txt");
+
+$.get("demo_test.asp", function(data, status){
+    alert("Data: " + data + "\nStatus: " + status);
+  });
+
+$.ajax(url,{
+	"accepts" : "",
+	"contentType": "",
+	 method : ""
+})
+```
+
+
+
+
+
+