jQuery

tooltiperror

tooltiperror

Super Moderator
Reaction score
231
Wrote a tutorial. Criticism would be appreciated. Goes over selectors, document.ready, and how the callbacks work. Please, C&C.
 

Attachments

  • jQuery.txt
    3.5 KB · Views: 255
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
Was looking for feedback before I post the thread there.
 
ReVolver

ReVolver

Mega Super Ultra Cool Member
Reaction score
608
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
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
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)
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
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();
});
 
tooltiperror

tooltiperror

Super Moderator
Reaction score
231
Yes, that is not a flaw, that's the tutorial?

Would you rather me use this?
 
UndeadDragon

UndeadDragon

Super Moderator
Reaction score
447
You never actually mention the use of "this", so that is a flaw.
 
Magentix

Magentix

if (OP.statement == false) postCount++;
Reaction score
107
tooltiperror said:
Yes, that is not a flaw, that's the tutorial?

Would you rather me use this?
Click to expand...

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.
 
V

Vestras

Retired
Reaction score
248
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.).
 
You must log in or register to reply here.
General chit-chat
Help Users

      The Helper Discord

      Staff online

      Members online

      Online now:
      444 (members: 3, guests: 441)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top