# J Query
---
## What is it?
A javascript libray used for browser interaction: Access elements on the DOM, Create elements on the DOM, event handling, styling etc.
---
## Ok What isssss it really?
---
## How do we add it into our code
```
<body>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="myJavascriptFile"></script>
</body>
```
[cdn](https://cdnjs.com/libraries/jquery)
---
## Syntax
```
$() // Ok, What?
```
---
## DOM Manipulation
```
$(document) // document
$('#some-Id') // document.querySelector('#some-Id')
$('.some-class') // document.querySelectorAll('.some-class')
```
```
$(document).ready(()=>{console.log('Ready')})
```
---
## Creating Elements and Addding Content.
```
$('<div>')
$('<div>', {text : 'Created this with Jquery'})
```
---
## Appending Elements
```
let $wrapper = $('.wrapper');
let $content = $('div', {text: 'Custom Content'});
$wrapper.append($content) || $content.appendTo($wrapper);
```
*Note: Adding elements this way is time consuming if you are building and entire application.*
---
## Common Event Handling
```
const $button = $('.myButton');
myButton.on('click', callback);
```
[More Jquery Events Handlers](https://api.jquery.com/category/events/event-handler-attachment)
---
## Ajax Request
Asynchronous Javascript and XML
---
## What is it use for?
Ajax calls are used for accessing and sending data across to internet *Asynchronously*
---
## Ajax Syntax
```
$.ajax({
url: 'someUrl',
headers: {
Accept: 'application/json'
}
});
```
---
## Other Ajax Methods
```
$.get('url');
$.post('url');
```
---
### Chaning
```
$.ajax({
url: 'someUrl',
headers: {
Accept: 'application/json'
}
}).then(()=>{ // Do Something});
```
{"metaMigratedAt":"2023-06-16T23:47:26.645Z","metaMigratedFrom":"Content","title":"J Query","breaks":true,"contributors":"[{\"id\":\"5e29e175-4809-4add-a41e-e8982dab52a9\",\"add\":1870,\"del\":55}]"}