99 lines
1.8 KiB
Markdown
99 lines
1.8 KiB
Markdown
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 : ""
|
|
})
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|