Here are 18 amazing JQuery tips that Jo Ann shared after CFUnited this year. Enjoy!
PS What are your JQuery tips and tricks?
- Syntax: The dollar sign ($) is an alias for the jQuery object.
- Best documentation (online reference) is: http://docs.jquery.com/ [www.visualjquery.com, which I have used, is only up to version 1.2.6 (and the current release is 1.3.2)]
- OK to call the $(document).ready() function as many times as you want on the same page. They will execute in turn; they don't overwrite each other. This is in direct contrast to the more traditional body onload attribute, where it is NOT OK to use more that one definition. If you add 2 definitions for body onload, the 2nd overwrites the first, and the first is never executed.
- In JavaScript, the Function IS a datatype. This is very important in jQuery, because many jQuery methods take functions as parameters.
- Named functions: doSomething(param1, param2) { [some action statements in here]; } If I set myVar1 = doSomething(“foo”,”bar”); then myVar1 contains the RESULT of doing something with “foo” and “bar”. But if I set myVar2 = doSomething; (i.e., without the parens) now myVar2 IS the same function as doSomething. Now myVar2(“foo”,”bar”); will return the same thing as doSomething(“foo”,”bar”); This concept can be useful if you need to pass functions to a method that takes one or more Functions as arguments.
- An Anonymous Function in JavaScript is a Function declaration without a name. For example, $(document).ready() takes as an argument a Function that receives the ready event as an argument. Typically instead of declaring a named function and putting the name inside the ready() parens, you put ready(function(event){ [what to do goes in here]; })
- Can use jQuery to intercept a button click or other event, do some validation or manipulation with information on the page, and submit a hidden form instead of ever giving the user direct access to the form inputs. Also for CFFORM augmentation – for example to grab the error messages and log them, to do some analysis before submission, to visually magnify the field with incorrect input so the user can see it better to verify.
- Can overload existing JavaScript functions. For example, overloading alert() could make the standard CF-generated validation messages display in a nicer alternative appearance and style.
- Syntax: .attr(‘[attribute_name]') is a getter, and .attr(‘[attribute_name],'[value]”) is a setter.
- Syntax: the filter :eq(3) gets the 3rd element of a set, while :nth(3) gets EVERY 3rd (i.e., 3, 6, 9, 12 …)
- A filter such as :last is applied to the selected / returned SET of elements – so ‘li:last' gets the last <li> element on the page, NOT the last item in EACH list on the page.
- Syntax: A space in a selector (example ‘#list2 li:last') means get all of the 2nd selector that are descendants of the element(s) returned by the first selector (as opposed to separating with > which signifies “direct children” instead).
- Utilities are jQuery methods without selectors [examples: $.each() or $.support() ]
- How people create compressed and obfuscated JaveScript files: jsmin utility to strip out extraneous white space, yuicompressor to obfuscate by replacing variable names with something less easy to understand. (However, JS is always still out in the world for everyone to see!)
- jQuery UI is the only jQuery plugin created by jQuery itself. Use Theme Roller: http://jqueryui.com/themeroller/ to create custom UI themes (try out and style the various UI elements).
- http://layout.jquery-dev.net – look at Layout Inside Dialog
- Syntax tip: parseInt('30px') takes the 30 out of '30px'
- Can use jQuery along with CF-generated JavaScript validation, for instance to enable/disable/re-enable CF validation in response to a browser-side event of some kind.
