Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sujon-ahmed/jquery
https://github.com/sujon-ahmed/jquery
Last synced: about 5 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/sujon-ahmed/jquery
- Owner: Sujon-Ahmed
- Created: 2022-08-09T13:28:24.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-10-07T16:31:10.000Z (about 2 years ago)
- Last Synced: 2023-03-05T01:31:42.743Z (over 1 year ago)
- Language: HTML
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
In this repository i will practice jQuery Basics, Events, Effects, HTML, Traversing, Ajax etc.
## Table of Contents
- [Introduction](#what-is-jquery)
- [Google CDN](#google-cdn)
- [Syntax](#basic-syntax)
- [Advance Selectors](#advance-selectors)
- [Mouse Events](#mouse-events)
- [Keyboard Events](#keyboard-events)
- [Form Events](#form-events)
- [Window Events](#window-events)
- [Get Method](#get-method)
- [Class Methods](#class-methods)
- [Jquery Traversing](#jquery-traversing)
## What is jQuery?
jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
- HTML/DOM manipulation
- CSS manipulation
- HTML event methods
- Effects and animations
- AJAX
- Utilities
### Google CDN
```
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
```
### Basic Syntax
```
$(document).ready(function(){
// jQuery methods go here...
});
```
### Advance Selectors
| SL | Selector | Description |
|----|------------------|---------------------------------------|
| 1 | $(*) | `*` is a universal operator |
| 2 | $("ul li") | Here ul is parent and li is child |
| 3 | $(".abc, .xyz") | Multiple Classes |
| 4 | $("h1, div, p") | Multiple Tags |
| 5 | $("p:first") | Page first p element |
| 6 | $("p:last") | Page last p element |
### Mouse Events
SL
Event Name
Description
1
click()
When click target element this method work
2
dblclick()
When double click element this method work
3
contextmenu()
When right click mouse this method work
4
mouseenter()
When You mouse enter target element then this event work
5
mouseleave()
When You mouse leave target element then this event work
### Keyboard Events
SL
Event Name
Description
1
keypress()
When pressing any keyboard key this event works perfectly 😍
2
keyup()
When pressing any keyboard key with clicked and down the finger, hold key this event fired!
3
keydown()
When pressing any keyboard key and getting up your finger on the key then this event run!
### Form Events
SL
Event Name
Description
1
focus()
When clicked any form feild this event worked!
2
blur()
When focus out target form feild this event worked!
3
change()
When change any select option then change() event worked!
4
select()
If select form feild any text or data then select() method worked!
5
submit()
Submit() method worked when any form submited!
### Window Events
Sl
Event Name
Description
1
scroll()
When you scroll window screen then scroll() method worked!
2
resize()
When you resize window screen then resize() method worked!
3
load()
! load() method remove jq version > 3, Now it's replace document.ready()
2
unload()
! unload() method remove jq version > 3
### Get method
SL
Event Name
Description
1
text()
When you get only element text then you can use text()
2
html()
When you can get html() structure of target element then use html() method.
3
attr()
attr() use when you can see target element classes, ids, tags etc.
4
val()
When you need target element value then you can use val() method.
### Class Methods
SL
Event Name
Description
1
addClass()
When you any class in target element then use addClass()
2
removeClass()
When you any remove class in target element then use removeClass()
3
toggleClass()
toggleClass() are use when toggle target element class.
### Jquery-Traversing
jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.
The image below illustrates an HTML page as a tree (DOM tree). With jQuery traversing, you can easily move up (ancestors), down (descendants) and sideways (siblings) in the tree, starting from the selected (current) element. This movement is called traversing - or moving through - the DOM tree.
### Traversing Up the DOM Tree
Three useful jQuery methods for traversing up the DOM tree are:
#### jQuery Traversing - Ancestors
- parent()
- parents()
- parentsUntil()
- closest()
#### jQuery Traversing - Descendants
- children()
- find()
#### jQuery Traversing - Siblings
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
#### jQuery Traversing - Filtering
- first()
- last()
- eq()
- filter()
- not()