You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: JQuery.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# JQuery
2
2
3
-
JQuery is a helpful Javascript library that makes possible to bring webpages to life without going insane. It provides helpers for DOM manipulation, event binding, AJAX requests, and even animations. JQuery is compatible with nearly all browsers (including oldies like IE) and has a wide range of plugins available that extend its functionality even further.
3
+
JQuery is a helpful Javascript library that makes it possible to bring webpages to life without going insane. It provides helpers for DOM manipulation, event binding, AJAX requests, and even animations. JQuery is compatible with nearly all browsers (including oldies like IE) and has a wide range of plugins available that extend its functionality even further.
4
4
5
5
This guide will assume some knowledge of programming and HTML/CSS but extensive practice of Javascript will not be required to understand it. However, the better you know the language the more dangerous you’ll be when you sit down to program. For an excellent primer in the Javascript language (as well as a look at how miserable events are without JQuery!), [go here](https://eloquentjavascript.net/).
6
6
@@ -22,7 +22,7 @@ This tells JQuery to wait until the document is loaded, and then run whatever co
22
22
23
23
## DOM manipulation
24
24
25
-
Check out the [HTML/CSS](http://mentoring.pennapps.com/guide/css.html) page to learn about the DOM.
25
+
Check out the [HTML/CSS](https://mentoring.pennapps.com/web-design) page to learn about the DOM.
26
26
27
27
JQuery makes it really easy to add, remove, and change DOM nodes. For instance, if we wanted to create a new `<h2>` element that said “PennApps rocks,” we would write
28
28
@@ -77,7 +77,7 @@ var myNode = $(‘#myID’).css(‘color’, ‘red’).attr(‘width’, ‘500
77
77
78
78
### Clicks, Keypresses, and more
79
79
80
-
JQuery makes it easy to make something happen when a user clicks the a button or presses a key. Once you’ve selected the node you want to bind the event to (either via selectors as shown above, or by creating the node in the Javascript and storing it as a variable), you can use the `.click()`, `.keypress()`, and a host of other event binding methods to do some seriously cool stuff. Google and Stack Overflow will be your best bet for finding out how to do something specific (like binding only to the ‘up’ arrow for example).
80
+
JQuery makes it easy to make something happen when a user clicks a button or presses a key. Once you’ve selected the node you want to bind the event to (either via selectors as shown above, or by creating the node in the Javascript and storing it as a variable), you can use the `.click()`, `.keypress()`, and a host of other event binding methods to do some seriously cool stuff. Google and Stack Overflow will be your best bet for finding out how to do something specific (like binding only to the ‘up’ arrow for example).
81
81
82
82
JQuery also supports touch events, although unfortunately not with a nice helper method like ‘click().’ You have to bind to touch events manually like so:
83
83
@@ -100,8 +100,8 @@ This can be really useful for situations in which you need a few events, or you
100
100
101
101
## Animations
102
102
103
-
Rather from simply inserting elements into the DOM, JQuery provides a few functions to make their entrance and exit a little more polished. The simplest of these are `fadeIn()` and `fadeOut()`, which are pretty selfexplanatory; the element is phased from invisible to visible, or vice-versa. But you can also program custom animations based on CSS properties via the `animate()` function, or chain multiple `animate()` calls. Now, with only JQuery loaded you can only animate numerical properties; but if you want to animate colors or other properties, you should check out some…
103
+
Rather than simply inserting elements into the DOM, JQuery provides a few functions to make their entrance and exit a little more polished. The simplest of these are `fadeIn()` and `fadeOut()`, which are pretty self-explanatory; the element is phased from invisible to visible, or vice-versa. But you can also program custom animations based on CSS properties via the `animate()` function, or chain multiple `animate()` calls. Now, with only JQuery loaded you can only animate numerical properties; but if you want to animate colors or other properties, you should check out some…
104
104
105
105
## Plugins
106
106
107
-
JQuery is open source and fully extensible, and it has a lot of really great plugins to extend its core functionality. Some are pretty much libraries in their own right, like JQuery UI, a collection of extremely useful interactive components; some are much smaller and a lot less documented (such as verdict.js). Plugins can be loaded with a `<script>` tag the same way as JQuery itself, and there is virtually guaranteed to be a plugin for anything you can think of.
107
+
JQuery is open source and fully extensible, and it has a lot of really great plugins to extend its core functionality. Some are pretty much libraries in their own right, like JQuery UI, a collection of extremely useful interactive components; some are much smaller and a lot less documented (such as verdict.js). Plugins can be loaded with a `<script>` tag the same way as JQuery itself, and there is virtually guaranteed to be a plugin for anything you can think of.
0 commit comments