jQuery Fundamentals

List of Examples

1.1. An example of inline Javascript

1.2. An example of including external JavaScript

1.3. Example of an example

2.1. A simple variable declaration

2.2. Whitespace has no meaning outside of quotation marks

2.3. Parentheses indicate precedence

2.4. Tabs enhance readability, but have no special meaning

2.5. Concatenation

2.6. Multiplication and division

2.7. Incrementing and decrementing

2.8. Addition vs. concatenation

2.9. Forcing a string to act as a number

2.10. Forcing a string to act as a number (using the unary-plus operator)

2.11. Logical AND and OR operators

2.12. Comparison operators

2.13. Flow control

2.14. Values that evaluate to true

2.15. Values that evaluate to false

2.16. The ternary operator

2.17. A switch statement

2.18. Loops

2.19. A typical for loop

2.20. A typical while loop

2.21. A while loop with a combined conditional and incrementer

2.22. A do-while loop

2.23. Stopping a loop

2.24. Skipping to the next iteration of a loop

2.25. A simple array

2.26. Accessing array items by index

2.27. Testing the size of an array

2.28. Changing the value of an array item

2.29. Adding elements to an array

2.30. Working with arrays

2.31. Creating an "object literal"

2.32. Function Declaration

2.33. Named Function Expression

2.34. A simple function

2.35. A function that returns a value

2.36. A function that returns another function

2.37. A self-executing anonymous function

2.38. Passing an anonymous function as an argument

2.39. Passing a named function as an argument

2.40. Testing the type of various variables

2.41. Functions have access to variables defined in the same scope

2.42. Code outside the scope in which a variable was defined does not have access to the variable

2.43. Variables with the same name can exist in different scopes with different values

2.44. Functions can "see" changes in variable values after the function is defined

2.45. Scope insanity

2.46. How to lock in the value of i?

2.47. Locking in the value of i with a closure

3.1. A $(document).ready() block

3.2. Shorthand for $(document).ready()

3.3. Passing a named function instead of an anonymous function

3.4. Selecting elements by ID

3.5. Selecting elements by class name

3.6. Selecting elements by attribute

3.7. Selecting elements by compound CSS selector

3.8. Pseudo-selectors

3.9. Testing whether a selection contains elements

3.10. Storing selections in a variable

3.11. Refining selections

3.12. Using form-related pseduo-selectors

3.13. Chaining

3.14. Formatting chained code

3.15. Restoring your original selection using $.fn.end

3.16. The $.fn.html method used as a setter

3.17. The html method used as a getter

3.18. Getting CSS properties

3.19. Setting CSS properties

3.20. Working with classes

3.21. Basic dimensions methods

3.22. Setting attributes

3.23. Getting attributes

3.24. Moving around the DOM using traversal methods

3.25. Iterating over a selection

3.26. Changing the HTML of an element

3.27. Moving elements using different approaches

3.28. Making a copy of an element

3.29. Creating new elements

3.30. Creating a new element with an attribute object

3.31. Getting a new element on to the page

3.32. Creating and adding an element to the page at the same time

3.33. Manipulating a single attribute

3.34. Manipulating multiple attributes

3.35. Using a function to determine an attribute's new value

4.1. Checking the type of an arbitrary value

4.2. Storing and retrieving data related to an element

4.3. Storing a relationship between elements using $.fn.data

4.4. Putting jQuery into no-conflict mode

4.5. Using the $ inside a self-executing anonymous function

5.1. Event binding using a convenience method

5.2. Event biding using the $.fn.bind method

5.3. Event binding using the $.fn.bind method with data

5.4. Switching handlers using the $.fn.one method

5.5. Unbinding all click handlers on a selection

5.6. Unbinding a particular click handler

5.7. Namespacing events

5.8. Preventing a link from being followed

5.9. Triggering an event handler the right way

5.10. Event delegation using $.fn.delegate

5.11. Event delegation using $.fn.live

5.12. Unbinding delegated events

5.13. The hover helper function

5.14. The toggle helper function

6.1. A basic use of a built-in effect

6.2. Setting the duration of an effect

6.3. Augmenting jQuery.fx.speeds with custom speed definitions

6.4. Running code when an animation is complete

6.5. Run a callback even if there were no elements to animate

6.6. Custom effects with $.fn.animate

6.7. Per-property easing

7.1. Using the core $.ajax method

7.2. Using jQuery's Ajax convenience methods

7.3. Using $.fn.load to populate an element

7.4. Using $.fn.load to populate an element based on a selector

7.5. Turning form data into a query string

7.6. Creating an array of objects containing form data

7.7. Using YQL and JSONP

7.8. Setting up a loading indicator using Ajax Events

8.1. Creating a plugin to add and remove a class on hover

8.2. The Mike Alsup jQuery Plugin Development Pattern

8.3. A simple, stateful plugin using the jQuery UI widget factory

8.4. Passing options to a widget

8.5. Setting default options for a widget

8.6. Creating widget methods

8.7. Calling methods on a plugin instance

8.8. Responding when an option is set

8.9. Providing callbacks for user extension

8.10. Binding to widget events

8.11. Adding a destroy method to a widget

10.1. An object literal

10.2. Using an object literal for a jQuery feature

10.3. The module pattern

10.4. Using the module pattern for a jQuery feature

10.5. Using RequireJS: A simple example

10.6. A simple JavaScript file with dependencies

10.7. Defining a RequireJS module that has no dependencies

10.8. Defining a RequireJS module with dependencies

10.9. Defining a RequireJS module that returns a function

10.10. A RequireJS build configuration file