jQuery

Discussion in 'General Webmaster Support' started by tooltiperror, Nov 8, 2010.

  1. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    Wrote a tutorial. Criticism would be appreciated. Goes over selectors, document.ready, and how the callbacks work. Please, C&C.
     

    Attached Files:

    • Like Like x 1
  2. GetTriggerUnit-

    GetTriggerUnit- DogEntrepreneur

    Ratings:
    +128 / 0 / -0
    Wrong section. There's "Webmaster Tutorial and Resources", no?
     
  3. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    Was looking for feedback before I post the thread there.
     
  4. ReVolver

    ReVolver Moderator Staff Member

    Ratings:
    +608 / 0 / -0
    I rather have the .txt displayed on the forums since it's bad to read it w/o a format try using .rtf instead or .doc
     
  5. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    Code:
    [CODE]I thought jQuery had a very ugly and confusing syntax, but when I figured it out, it's actually quite easy.  The only thing that turned me off was that people started with examples and weird syntax, but I found out that the syntax makes sense when broken down.  
    
    First of all, you need to import jQuery.  It would be mad to put jQuery inside of each HTML document, so you load it from a file in the same directory.  Here we have it, it's pretty basic and you should already know how to do this, but in case you don't, here it is.
    
    [CODE]
    <html>
    
        <head>
    
            <script type="text/javascript" charset="UTF-8" src="jquery.js"></script>
    
        </head>
    
        <body>
        </body>
    
    </html>
    
    Now, you should know that things that use jQuery start with $. If you want you can change it to another character, but the "jQuery function" is $. You should think of it like a function that takes an element and returns nothing. This is an example of selecting an element with jQuery.

    Code:
        $('p')       // Select all paragraph elements
        $('#banner') // Selects something with the Id "Banner"
        $('*')       // All elements on the page
        $('p:first') // The first paragraph element
        $('p:last')  // The last paragraph element
    
    You could use this for anything, in theory, you could even supply another unrelated function with something selected by the jQuery function. jQuery's syntax is super simple. Just add a method to the selector.

    Code:
    	$('p').hide();
    
    This, shockingly enough, will hide all the paragraph elements. This obviously works with all selectors. You should also know that a lot of functions take optional arguments. In .hide, we have the optional argument speed. It can be a number in milliseconds, or it can be a string, the accepted strings are 'slow', 'fast', and 'normal'. in example;

    Code:
    	$('p').hide('slow');
    
    That above code will hide the element "slowly". It will move slower than normal. However, .hide has a second optional argument. And this is where the syntax starts to get a bit sticky. The second optional argument is a function, a callback.

    Code:
    	$('p').hide('slow',function(){/*Code to be executed after the paragraphs are hidden.*/});
    
    This gets very ugly looking when it spans many lines. Keep in mind it will always end with ; at the very end because even these long jQuery lines are technically one call of the jQuery function.

    Code:
    	$('p').hide('slow',function(){
    		$('p').show('slow',function(){
    			$('p').hide('fast');
    		});
    	});
    
    You should be able to keep up to this point, and understand the syntax better. The next step in understanding is seeing events in use. You can replace methods with events. Like other methods, they of course take those lovely anonymous function arguments.

    Code:
    	$('p').click(function(){
    		$('p').hide('slow');
    	});
    
    Starting to see how beautiful jQuery effects are after all these examples? Even though the code is less than beautiful. Brace style matters a lot here for readability, this is a less common but existent style I have seen.

    Code:
    	$('p').click
    	(
    		function()
    		{
    			$('p').hide('slow',function()
    			{
    				alert('Strange brace style is strange');
    			});
    		}
    	);
    
    jQuery code should be placed inside of an event, actually, and jQuery you put in a finished webpage should be inside the (document).ready event. This makes sure that all code is executed when the document is finished loading.

    Code:
    	$(document).ready(function(){
    		$('*').show();
    	});
    
    [/code]

    :thup: (and nice special user title)
     
  6. Magentix

    Magentix if (OP.statement == false) postCount++;

    Ratings:
    +107 / 0 / -0
    Almost every code example has the same flaw...

    Code:
    $('p').click(function(){
        $('p').doSomething();
    });
    
    This will call doSomething on EVERY paragraph after you click ANY one paragraph.
    You might want to change it to:
    
    $('p').click(function(){
        $(this).doSomething();
    });
    
     
  7. tooltiperror

    tooltiperror Super Moderator Staff Member

    Ratings:
    +233 / 0 / -0
    Yes, that is not a flaw, that's the tutorial?

    Would you rather me use this?
     
  8. UndeadDragon

    UndeadDragon Super Moderator Staff Member

    Ratings:
    +450 / 0 / -0
    You never actually mention the use of "this", so that is a flaw.
     
  9. Magentix

    Magentix if (OP.statement == false) postCount++;

    Ratings:
    +107 / 0 / -0
    Suppose this:

    Code:
    $('p').click(function(){
        var loc = $('p').find('a').attr('href');
        window.location = loc;
    });
    
    Now how is that not a flaw?
    I see numerous infinite loops or unwanted behaviours in your tutorial.
     
  10. Vestras

    Vestras Retired

    Ratings:
    +249 / 0 / -0
    You really should mention this, and that it doesn't actually represent the same value as it does in other OOP languages (all the jazz about the this keyword being dynamic depending on the current context, etc.).
     

Share This Page