From 72494f0cd5fd123f241f39a40e9588e26ca02957 Mon Sep 17 00:00:00 2001 From: Sawyer Charles Date: Tue, 6 Sep 2016 03:29:02 -0500 Subject: [jquery/en][WIP] Added jQuery (#1708) * starting jquery * doc. manipulation methods * more manipulation --- jquery.html.markdown | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 jquery.html.markdown (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown new file mode 100644 index 00000000..25bb0d29 --- /dev/null +++ b/jquery.html.markdown @@ -0,0 +1,138 @@ +--- +category: library ++library: jquery ++contributors: ++ - ["Sawyer Charles", "https://github.com/xssc"] ++filename: jquery.js ++--- + +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. + +Because jQuery is a JavaScript library you should [learn JavaScript first](https://github.com/adambard/learnxinyminutes-docs/blob/master/javascript.html.markdown) + +```js + + +/////////////////////////////////// +// 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 + +// 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 +}); + +// jQuery is very good at triggering events +// and also handling what happens when an event is triggered +$('#button').click(); // Fires a click event on $('#button') +$('#button').click(function(){ + // Code here gets executed when the #button element is clicked +}); + +function onAction() { + // This is executed when the event is triggered +} + +// 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 + +// You can also use an anonymous function +$('#btn').hover(function(){ + // Executed on hover +}); + +// 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 +$('.table').hide(); # Hides the element(s) + +// 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 +$('div').addClass('div') // Adds class div to all div taming-slim-20 + +// Common manipulation methods +$('p').append('Hello world'); // Adds to end of element +$('p').attr('class'); // Gets attribute +$('p').attr('class', 'content'); // Sets attribute +$('p').hasClass('div'); // Returns true if it has the class +$('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() { + heights.push($(this.height)); // Adds all 'p' tag heights to array +}); + + +`` -- cgit v1.2.3 From 1bb288155caf81b8c436e7d2f10421c2c08e78c4 Mon Sep 17 00:00:00 2001 From: ven Date: Tue, 6 Sep 2016 10:29:48 +0200 Subject: fixup --- jquery.html.markdown | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown index 25bb0d29..013b75d7 100644 --- a/jquery.html.markdown +++ b/jquery.html.markdown @@ -1,14 +1,14 @@ --- -category: library -+library: jquery -+contributors: -+ - ["Sawyer Charles", "https://github.com/xssc"] -+filename: jquery.js -+--- +category: tool +tool: jquery +contributors: + - ["Sawyer Charles", "https://github.com/xssc"] +filename: jquery.js +--- 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. -Because jQuery is a JavaScript library you should [learn JavaScript first](https://github.com/adambard/learnxinyminutes-docs/blob/master/javascript.html.markdown) +Because jQuery is a JavaScript library you should [learn JavaScript first](https://learnxinyminutes.com/docs/javascript/) ```js -- cgit v1.2.3 From e7257d0c103ec138fdcbe7039ce21fa611e8e5a9 Mon Sep 17 00:00:00 2001 From: Gnomino Date: Wed, 26 Oct 2016 13:29:06 +0200 Subject: [jquery/en] Reorganisation of Part 2 ( Events and Effects ) (#2516) * Removes repetition * [jquery] Better organization for Part 2 * [jquery] Re-added click() event and comment * [jquery] Better word for 'calling' --- jquery.html.markdown | 18 ++++-------------- 1 file changed, 4 insertions(+), 14 deletions(-) (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown index 013b75d7..ffac93f8 100644 --- a/jquery.html.markdown +++ b/jquery.html.markdown @@ -28,23 +28,17 @@ var square_p = $('p.square') // Selects paragraphs with the 'square' class /////////////////////////////////// // 2. Events and Effects - +// jQuery is very good at handling what happens when an event is triggered // 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 }); - -// jQuery is very good at triggering events -// and also handling what happens when an event is triggered -$('#button').click(); // Fires a click event on $('#button') -$('#button').click(function(){ - // Code here gets executed when the #button element is clicked -}); - +// You can also use defined functions function onAction() { // This is executed when the event is triggered } +$('#btn').click(onAction); // Invokes onAction on click // Some other common events are: $('#btn').dblclick(onAction); // Double click @@ -60,10 +54,6 @@ $('#btn').mousemove(onAction); // When the mouse is moved $('#btn').mouseenter(onAction); // Mouse enters the element $('#btn').mouseleave(onAction); // Mouse leaves the element -// You can also use an anonymous function -$('#btn').hover(function(){ - // Executed on hover -}); // These can all also trigger the event instead of handling it // by simply not giving any parameters @@ -114,7 +104,7 @@ tables.animate({margin-top:"+=50", height: "100px"}, 500, myFunction); // 3. Manipulation // These are similar to effects but can do more -$('div').addClass('div') // Adds class div to all div taming-slim-20 +$('div').addClass('div'); // Adds class div to all div taming-slim-20 // Common manipulation methods $('p').append('Hello world'); // Adds to end of element -- cgit v1.2.3 From 2bb9cf6d23492e0d840ccf8fd8f032dd7fe0de7e Mon Sep 17 00:00:00 2001 From: Gnomino Date: Thu, 27 Oct 2016 11:10:13 +0200 Subject: Changes ambiguous class name (#2523) --- jquery.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown index ffac93f8..5ac730f5 100644 --- a/jquery.html.markdown +++ b/jquery.html.markdown @@ -104,13 +104,13 @@ tables.animate({margin-top:"+=50", height: "100px"}, 500, myFunction); // 3. Manipulation // These are similar to effects but can do more -$('div').addClass('div'); // Adds class div to all div taming-slim-20 +$('div').addClass('taming-slim-20'); // Adds class taming-slim-20 to all div // Common manipulation methods $('p').append('Hello world'); // Adds to end of element $('p').attr('class'); // Gets attribute $('p').attr('class', 'content'); // Sets attribute -$('p').hasClass('div'); // Returns true if it has the class +$('p').hasClass('taming-slim-20'); // Returns true if it has the class $('p').height(); // Gets height of element or sets height -- cgit v1.2.3 From 78a4ae7da90139fecb2add55722ae7a54f43c593 Mon Sep 17 00:00:00 2001 From: Gnomino Date: Thu, 27 Oct 2016 13:36:08 +0200 Subject: [jQuery/en] [jQuery/es] Fixes syntax errors (#2525) * Fixed syntax errors * Fixes syntax errors --- jquery.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown index 5ac730f5..d498733d 100644 --- a/jquery.html.markdown +++ b/jquery.html.markdown @@ -66,7 +66,7 @@ $('#btn').on( ); // You can move and hide elements with some effect methods -$('.table').hide(); # Hides the element(s) +$('.table').hide(); // Hides the element(s) // Note: calling a function in these methods will still hide the element $('.table').hide(function(){ @@ -121,7 +121,7 @@ $('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() { - heights.push($(this.height)); // Adds all 'p' tag heights to array + heights.push($(this).height()); // Adds all 'p' tag heights to array }); -- cgit v1.2.3 From 68569341b3e8cc484ff3dc3b890f9a043e08f6b2 Mon Sep 17 00:00:00 2001 From: Jiang Haiyun Date: Fri, 23 Dec 2016 19:33:54 +0800 Subject: [jquery/en] typo fix (#2608) --- jquery.html.markdown | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'jquery.html.markdown') diff --git a/jquery.html.markdown b/jquery.html.markdown index d498733d..9326c74b 100644 --- a/jquery.html.markdown +++ b/jquery.html.markdown @@ -125,4 +125,4 @@ $('p').each(function() { }); -`` +``` -- cgit v1.2.3