Skip to content
GitLab
Menu
Why GitLab
Pricing
Contact Sales
Explore
Why GitLab
Pricing
Contact Sales
Explore
Sign in
Get free trial
Changes
Page history
Update JQuery
authored
Apr 26, 2022
by
Joel H
Hide whitespace changes
Inline
Side-by-side
Web/Javascript/JQuery.md
View page @
e772f385
a
*
https://jquery.com/ : the official site
*
https://api.jquery.com/ : the Documentation
*
https://jquery.com/
\ No newline at end of file
---
### Install :
*
https://jquery.com/download/ : Download JQuery from here.
*
Prefer using CDN for better performance
*
If CDN : https://releases.jquery.com/
*
Click on the
`uncompressed`
link
*
Copy the code and paste it in your HTML file
OR
*
If locally, on Download page, use
`compressed`
link for production,
`uncompressed`
link for development
*
Save file and use them in your project.
---
### Use JQuery
*
Use
`$`
to begin using jquery in js file.
```
javascript
$
(
document
).
ready
(
function
(){
console
.
log
(
'
We are ready!
'
);
});
```
```
javascript
//Put any object within the $
$
(
document
);
$
(
'
body
'
);
//jquery will find it for us
$
(
'
div
'
);
//will find every div ; equivalent of querySelectorAll
$
(
'
div.test
'
);
//will find every div with class 'test'
```
```
javascript
//In a DOM object, use text or html to change texts.
$
(
'
body
'
).
text
(
"
Hello world!
"
);
//equivalent of innerText
$
(
'
body
'
).
html
(
"
Hello world!
"
);
//equivalent of innerHTML
```
```
javascript
//More methods for a DOM object
$
(
'
body
'
).
find
(
'
.test
'
);
//find every elements that match the .test class
$
(
'
body
'
).
children
(
'
.solid
'
);
//take every children of the body that have the class .solid
$
(
'
.solid
'
).
addClass
(
'
highlight
'
);
//add the class highlight to every object with .solid class
.
last
()
//last element
.
prev
()
//previous element
.
next
()
//next element
```
\ No newline at end of file