2016-09-06 08:29:02 +00:00
-- -
2016-09-06 08:29:48 +00:00
category : tool
tool : jquery
contributors :
- [ "Sawyer Charles" , "https://github.com/xssc" ]
2020-10-16 03:54:10 +00:00
- [ "Devansh Patil" , "https://github.com/subtra3t" ]
2016-09-06 08:29:48 +00:00
filename : jquery . js
-- -
2016-09-06 08:29:02 +00:00
jQuery is a JavaScript library that helps you "do more, write less" . It makes many common JavaScript tasks and makes them easier to write . jQuery is used by many big companies and developers everywhere . It makes AJAX , event handling , document manipulation , and much more , easier and faster .
2016-09-06 08:29:48 +00:00
Because jQuery is a JavaScript library you should [ learn JavaScript first ] ( https : //learnxinyminutes.com/docs/javascript/)
2016-09-06 08:29:02 +00:00
2020-10-16 03:54:10 +00:00
* * NOTE * * : jQuery has fallen out of the limelight in recent years , since you can achieve the same thing with the vanilla DOM ( Document Object Model ) API . So the only thing it is used for is a couple of handy features , such as the [ jQuery date picker ] ( https : //api.jqueryui.com/datepicker) (which actually has a standard, unlike the `<input type="date">` HTML element), and the obvious decrease in the code length.
2016-09-06 08:29:02 +00:00
2023-08-25 03:53:11 +00:00
` ` ` js
2016-09-06 08:29:02 +00:00
///////////////////////////////////
// 1. Selectors
// Selectors in jQuery are used to select an element
var page = $ ( window ) ; // Selects the whole viewport
// Selectors can also be CSS selector
var paragraph = $ ( 'p' ) ; // Selects all paragraph elements
var table1 = $ ( '#table1' ) ; // Selects element with id 'table1'
var squares = $ ( '.square' ) ; // Selects all elements with the class 'square'
var square _p = $ ( 'p.square' ) // Selects paragraphs with the 'square' class
///////////////////////////////////
// 2. Events and Effects
2016-10-26 11:29:06 +00:00
// jQuery is very good at handling what happens when an event is triggered
2016-09-06 08:29:02 +00:00
// A very common event used is the ready event on the document
// You can use the 'ready' method to wait until the element has finished loading
$ ( document ) . ready ( function ( ) {
// Code won't execute until the document is loaded
} ) ;
2016-10-26 11:29:06 +00:00
// You can also use defined functions
2016-09-06 08:29:02 +00:00
function onAction ( ) {
// This is executed when the event is triggered
}
2016-10-26 11:29:06 +00:00
$ ( '#btn' ) . click ( onAction ) ; // Invokes onAction on click
2016-09-06 08:29:02 +00:00
// Some other common events are:
$ ( '#btn' ) . dblclick ( onAction ) ; // Double click
$ ( '#btn' ) . hover ( onAction ) ; // Hovering over
$ ( '#btn' ) . focus ( onAction ) ; // On focus
$ ( '#btn' ) . blur ( onAction ) ; // Losses focus
$ ( '#btn' ) . submit ( onAction ) ; // On submit
$ ( '#btn' ) . select ( onAction ) ; // When an element is selected
$ ( '#btn' ) . keydown ( onAction ) ; // When a key is pushed down
$ ( '#btn' ) . keyup ( onAction ) ; // When a key is released
$ ( '#btn' ) . keypress ( onAction ) ; // When a key is pressed
$ ( '#btn' ) . mousemove ( onAction ) ; // When the mouse is moved
$ ( '#btn' ) . mouseenter ( onAction ) ; // Mouse enters the element
$ ( '#btn' ) . mouseleave ( onAction ) ; // Mouse leaves the element
// These can all also trigger the event instead of handling it
// by simply not giving any parameters
$ ( '#btn' ) . dblclick ( ) ; // Fires double click on the element
// You can handle multiple events while only using the selector once
$ ( '#btn' ) . on (
{ dblclick : myFunction1 } // Triggered on double click
{ blur : myFunction1 } // Triggered on blur
) ;
// You can move and hide elements with some effect methods
2016-10-27 11:36:08 +00:00
$ ( '.table' ) . hide ( ) ; // Hides the element(s)
2016-09-06 08:29:02 +00:00
// Note: calling a function in these methods will still hide the element
$ ( '.table' ) . hide ( function ( ) {
// Element hidden then function executed
} ) ;
// You can store selectors in variables
var tables = $ ( '.table' ) ;
// Some basic document manipulation methods are:
tables . hide ( ) ; // Hides element(s)
tables . show ( ) ; // Shows (un-hides) element(s)
tables . toggle ( ) ; // Changes the hide/show state
tables . fadeOut ( ) ; // Fades out
tables . fadeIn ( ) ; // Fades in
tables . fadeToggle ( ) ; // Fades in or out
tables . fadeTo ( 0.5 ) ; // Fades to an opacity (between 0 and 1)
tables . slideUp ( ) ; // Slides up
tables . slideDown ( ) ; // Slides down
tables . slideToggle ( ) ; // Slides up or down
// All of the above take a speed (milliseconds) and callback function
tables . hide ( 1000 , myFunction ) ; // 1 second hide animation then function
// fadeTo has a required opacity as its second parameter
tables . fadeTo ( 2000 , 0.1 , myFunction ) ; // 2 sec. fade to 0.1 opacity then function
// You can get slightly more advanced with the animate method
tables . animate ( { margin - top : "+=50" , height : "100px" } , 500 , myFunction ) ;
// The animate method takes an object of css and values to end with,
// optional options parameter to tune the animation,
// and of course the callback function
///////////////////////////////////
// 3. Manipulation
// These are similar to effects but can do more
2018-10-20 16:00:06 +00:00
$ ( 'div' ) . addClass ( 'taming-slim-20' ) ; // Adds class taming-slim-20 to all div
2016-09-06 08:29:02 +00:00
// Common manipulation methods
$ ( 'p' ) . append ( 'Hello world' ) ; // Adds to end of element
$ ( 'p' ) . attr ( 'class' ) ; // Gets attribute
$ ( 'p' ) . attr ( 'class' , 'content' ) ; // Sets attribute
2016-10-27 09:10:13 +00:00
$ ( 'p' ) . hasClass ( 'taming-slim-20' ) ; // Returns true if it has the class
2016-09-06 08:29:02 +00:00
$ ( 'p' ) . height ( ) ; // Gets height of element or sets height
// For many manipulation methods, getting info on an element
// will ONLY get the first matching element
$ ( 'p' ) . height ( ) ; // Gets only the first 'p' tag's height
// You can use each to loop through all the elements
var heights = [ ] ;
$ ( 'p' ) . each ( function ( ) {
2016-10-27 11:36:08 +00:00
heights . push ( $ ( this ) . height ( ) ) ; // Adds all 'p' tag heights to array
2016-09-06 08:29:02 +00:00
} ) ;
2016-12-23 11:33:54 +00:00
` ` `
2018-10-20 16:00:06 +00:00
# # Further Reading
* [ Codecademy - jQuery ] ( https : //www.codecademy.com/learn/learn-jquery) A good introduction to jQuery in a "learn by doing it" format.