In this repository i will practice jQuery Basics, Events, Effects, HTML, Traversing, Ajax etc.
- Introduction
- Google CDN
- Syntax
- Advance Selectors
- Mouse Events
- Keyboard Events
- Form Events
- Window Events
- Get Method
- Class Methods
- Jquery Traversing
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
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
$(document).ready(function(){
// jQuery methods go here...
});
| 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 |
| 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 |
| 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! |
| 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! |
| 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 |
| 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. |
| 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, 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.
Three useful jQuery methods for traversing up the DOM tree are:
- parent()
- parents()
- parentsUntil()
- closest()
- children()
- find()
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
- first()
- last()
- eq()
- filter()
- not()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent