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
  • No one is chatting at the moment.
  • Varine Varine:
    How can you tell the difference between real traffic and indexing or AI generation bots?
  • The Helper The Helper:
    The bots will show up as users online in the forum software but they do not show up in my stats tracking. I am sure there are bots in the stats but the way alot of the bots treat the site do not show up on the stats
  • The Helper The Helper:
    New recipe is Shipwreck Dinner - https://www.thehelper.net/threads/recipe-shipwreck-dinner.193511/
  • Varine Varine:
    I want to build a filtration system for my 3d printer, and that shit is so much more complicated than I thought it would be
  • Varine Varine:
    Apparently ABS emits styrene particulates which can be like .2 micrometers, which idk if the VOC detectors I have can even catch that
  • Varine Varine:
    Anyway I need to get some of those sensors and two air pressure sensors installed before an after the filters, which I need to figure out how to calculate the necessary pressure for and I have yet to find anything that tells me how to actually do that, just the cfm ratings
  • Varine Varine:
    And then I have to set up an arduino board to read those sensors, which I also don't know very much about but I have a whole bunch of crash course things for that
  • Varine Varine:
    These sensors are also a lot more than I thought they would be. Like 5 to 10 each, idk why but I assumed they would be like 2 dollars
  • Varine Varine:
    Another issue I'm learning is that a lot of the air quality sensors don't work at very high ambient temperatures. I'm planning on heating this enclosure to like 60C or so, and that's the upper limit of their functionality
  • Varine Varine:
    Although I don't know if I need to actually actively heat it or just let the plate and hotend bring the ambient temp to whatever it will, but even then I need to figure out an exfiltration for hot air. I think I kind of know what to do but it's still fucking confusing
  • The Helper The Helper:
    Maybe you could find some of that information from AC tech - like how they detect freon and such
  • Varine Varine:
    That's mostly what I've been looking at
  • Varine Varine:
    I don't think I'm dealing with quite the same pressures though, at the very least its a significantly smaller system. For the time being I'm just going to put together a quick scrubby box though and hope it works good enough to not make my house toxic
  • Varine Varine:
    I mean I don't use this enough to pose any significant danger I don't think, but I would still rather not be throwing styrene all over the air
  • The Helper The Helper:
    New dessert added to recipes Southern Pecan Praline Cake https://www.thehelper.net/threads/recipe-southern-pecan-praline-cake.193555/
  • The Helper The Helper:
    Another bot invasion 493 members online most of them bots that do not show up on stats
  • Varine Varine:
    I'm looking at a solid 378 guests, but 3 members. Of which two are me and VSNES. The third is unlisted, which makes me think its a ghost.
     +1
  • The Helper The Helper:
    Some members choose invisibility mode
     +1
  • The Helper The Helper:
    Latest Recipe is Garlic Parmesan Chicken https://www.thehelper.net/threads/recipe-garlic-parmesan-chicken.193575/
  • The Helper The Helper:
    I bitch about Xenforo sometimes but it really is full featured you just have to really know what you are doing to get the most out of it.
  • The Helper The Helper:
    It is just not easy to fix styles and customize but it definitely can be done
  • The Helper The Helper:
    I do know this - xenforo dropped the ball by not keeping the vbulletin reputation comments as a feature. The loss of the Reputation comments data when we switched to Xenforo really was the death knell for the site when it came to all the users that left. I know I missed it so much and I got way less interested in the site when that feature was gone and I run the site.
  • Blackveiled Blackveiled:
    People love rep, lol
     +1
  • The Helper The Helper:
    The recipe today is Sloppy Joe Casserole - one of my faves LOL https://www.thehelper.net/threads/sloppy-joe-casserole-with-manwich.193585/
  • The Helper The Helper:
    Decided to put up a healthier type recipe to mix it up - Honey Garlic Shrimp Stir-Fry https://www.thehelper.net/threads/recipe-honey-garlic-shrimp-stir-fry.193595/

      The Helper Discord

      Members online

      No members online now.
      Online now:
      347 (members: 0, guests: 347)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top