diff options
Diffstat (limited to 'jquery.html.markdown')
| -rw-r--r-- | jquery.html.markdown | 24 |
1 files changed, 7 insertions, 17 deletions
diff --git a/jquery.html.markdown b/jquery.html.markdown index 013b75d7..d498733d 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 @@ -76,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(){ @@ -114,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 @@ -131,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 }); |