JQuery - Revision history

Andrew: Reverted edits by Andrew (talk) to last revision by Jimmy

2018-09-26T16:46:52Z

Reverted edits by Andrew (talk) to last revision by Jimmy

Andrew at 16:45, 26 September 2018

2018-09-26T16:45:42Z

Jimmy at 04:46, 1 September 2015

2015-09-01T04:46:35Z

Shane at 07:58, 8 April 2013

2013-04-08T07:58:56Z

Shane: categorizing

2013-02-24T23:29:02Z

categorizing

Shane at 20:37, 12 October 2012

2012-10-12T20:37:37Z

Shane: Creating from content which used to be on JavaScript and AJAX

2012-09-28T09:34:33Z

Creating from content which used to be on JavaScript and AJAX

New page

jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even thought it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery [http://docs.jquery.com/Tutorials:How_jQuery_Works Tutorials], and there is a short summary on [http://en.wikipedia.org/wiki/JQuery Wikipedia]. Of course, there are plenty of other tutorials a google search away.

To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects ([http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ here is a blog post that gives some of the main reasons]). Add the following line inside the '''<head>''' tag of your web page (adjust the version in the middle):

<source lang="html4strict">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js" type="text/javascript"></script>
</source>

To get the link to the latest hosted jQuery, see the [https://developers.google.com/speed/libraries/devguide#jquery Google Hosted Libraries Developer's Guide].

You can also link to the jQuery library directly on other websites as mentioned in the above tutorials. The trade-off is that having a local copy will load faster, but then requires you to manage the library files your self (e.g., downloading new versions).

A few code snippets are given below, but the best way to learn about all the features of jQuery is to head to the [http://jquery.com jQuery website] and look through the tutorials, references, and examples there.

The ''$'' symbol is used to denote jQuery functionality. You can use it to call jQuery functions, access HTML document elements in order to read or write values, or modify style information via CSS for a range of document elements. For example, here is some code that sets up a function to be called whenever the user clicks on a link:

<code>
<pre>
$("a").click( function(event)
{
event.preventDefault();
$(this).hide("slow");
} );
</pre>
</code>

The above code leverages many useful javascript and jQuery features. ''$("a")'' is the jQuery way of selecting all HTML ''a'' elements. That is, in this case, all elements in the HTML document that are ''<a>'' tags. The ''click'' function is invoked for all such ''a'' elements in the document. The argument to the ''click'' function is another function that is to be called when the selected elements are clicked by the user. The ''event'' argument to this user-defined function is a default argument sent to functions which handle user actions like clicking a mouse button. In this example, the code calls another function, ''preventDefault()'' on the event passed to stop the standard action on that event. Here that means stopping the web browser from following the link that the user clicked on. Finally, the ''$(this)'' variable is the jQuery way of accessing the current encapsulating object, as in Java. This example calls the jQuery hide function on the object to make the object (again, in this case, ''this'' is referring to the ''<a>'' tag that the user clicked) disappear from the browser. The script also passes an argument to the hide function to make the link disappear slowly as described in the API [http://docs.jquery.com/Hide documentation].

jQuery also comes with some easy to use widgets for building better user interfaces. One of the handiest is the [http://docs.jquery.com/UI/Dialog dialog] widget that pops-up an in-browser dialog window. To use the dialog functions, you need to include a few more javascript libraries in your HTML header block like so:

<code>
<pre>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"

type="text/css" rel="Stylesheet" /> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

<script type="text/javascript">
// your code goes here
</script>
</pre>
</code>

You can then use the ''$().dialog()'' function to make dialog boxes. The ''dialog'' function can take many arguments to customize its behavior and add standard elements like buttons; see the documentation for details. The content of the dialog box is typically placed in a ''div'' container and then that container is hidden when the document loads. You can put any elements in the ''div'' and they will be displayed as normal in the dialog box. Here is a full example:

<code>
<pre>
<html>
<head>
<style>
#mydialog { display:none }
</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
type="text/css" rel="Stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<script type="text/javascript">
function showdialog()
{
$("#mydialog").dialog();
}
</script>
</head>
<body>
<input type="button" value="Show Dialog" onclick=showdialog() />
<div id="mydialog" title="Howdy">Look at me!</div>
</body>
</html>
</pre>
</code>

To understand the page, start at the bottom. There is a ''div'' element with a title and some string content. It also has a unique id (the ids can be anything you want) which is used to identify this particular element in the rest of the document. This div's id is ''mydialog''. Above that is a button input. The only thing special about it is the ''onclick'' attribute which specifies a javascript function to call when the button is clicked by a user. In this case, the function is ''showdialog()'' which is a user defined javascript function contained in the document header. All the function does is access the document element with id ''mydialog'' (the ''#identifier'' is the jQuery way of accessing an individual element based on the assigned id in the element attribute list), and build a dialog box from it. Here, the dialog box will have the title ''Howdy'' from the title attribute in the ''mydialog'' element, and have a text string ''Look at me!''. Finally, at the top of the document is the ''style'' section, which is a normal HTML/CSS section describing appearance of parts of the document. There is only one entry, again describing the document element with id ''mydialog''. One style attribute is set, namely the ''display'' attribute is set to ''none'' to indicate that the element should not be displayed. Otherwise, the ''mydialog'' div would be displayed like any other part of the document rather than being used solely for our dialog box.

Here is another example of using jQuery to do simple animations by moving an image across the browser window:

<code>
<pre>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// these are for storing target locations
var targetLeft=0;
var targetTop=0;
function moveTarget()
{
targetLeft+=10; //increase target location
targetTop+=10;
$("#target").css("top",targetTop); //move target to (top,left)
$("#target").css("left",targetLeft);
if(targetLeft<200)
{ //stop if we reached left=200
window.setTimeout("moveTarget()",200); //set the next timer
}
}
$(document).ready( function()
{ //at the beginning create a clock timeout
window.setTimeout("moveTarget()",200); //call this function in 200 ms.
});
</script>
</head>
<body>

<img id="target" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/180px-Smiley.svg.png" style="position:relative"/>
</body>
</html>
</pre>
</code>

← Older revision		Revision as of 16:46, 26 September 2018
Line 1:		Line 1:
−	jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even ~~though~~ it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery [http://docs.jquery.com/Tutorials:How_jQuery_Works Tutorials], and there is a short summary on [http://en.wikipedia.org/wiki/JQuery Wikipedia]. Of course, there are plenty of other tutorials a google search away.	+	jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even thought it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery [http://docs.jquery.com/Tutorials:How_jQuery_Works Tutorials], and there is a short summary on [http://en.wikipedia.org/wiki/JQuery Wikipedia]. Of course, there are plenty of other tutorials a google search away.

	To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects ([http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ here is a blog post that gives some of the main reasons]). Add the following line inside the '''<head>''' tag of your web page (adjust the version in the middle):		To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects ([http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ here is a blog post that gives some of the main reasons]). Add the following line inside the '''<head>''' tag of your web page (adjust the version in the middle):

← Older revision		Revision as of 16:45, 26 September 2018
Line 1:		Line 1:
−	jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even ~~thought~~ it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery [http://docs.jquery.com/Tutorials:How_jQuery_Works Tutorials], and there is a short summary on [http://en.wikipedia.org/wiki/JQuery Wikipedia]. Of course, there are plenty of other tutorials a google search away.	+	jQuery is a fairly lightweight javascript library that has a number of particularly useful features. Even though it's only been around for a few years now, it has gained a lot of momentum in the web development community. jQuery provides a simple interface to easily modify CSS attributes on all the elements in the HTML document, has simplified AJAX integration, and is accompanied by a number of handy user interface related APIs. You can get a good overview of jQuery in the jQuery [http://docs.jquery.com/Tutorials:How_jQuery_Works Tutorials], and there is a short summary on [http://en.wikipedia.org/wiki/JQuery Wikipedia]. Of course, there are plenty of other tutorials a google search away.

	To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects ([http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ here is a blog post that gives some of the main reasons]). Add the following line inside the '''<head>''' tag of your web page (adjust the version in the middle):		To use jQuery in your javascript, you need to include the jQuery javascript library, which is just another JavaScript file. Google hosts jQuery for free, and it is recommended that you use Google's hosted jQuery for your projects ([http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/ here is a blog post that gives some of the main reasons]). Add the following line inside the '''<head>''' tag of your web page (adjust the version in the middle):

← Older revision		Revision as of 07:58, 8 April 2013
Line 120:		Line 120:
	</code>		</code>

		+	[[Category:Module 6]]
	[[Category:Former Content]]		[[Category:Former Content]]

← Older revision		Revision as of 23:29, 24 February 2013
Line 120:		Line 120:
	</code>		</code>

−	[[Category:~~Module 4~~]]	+	[[Category:Former Content]]

← Older revision		Revision as of 20:37, 12 October 2012
Line 119:		Line 119:
	</pre>		</pre>
	</code>		</code>
		+
		+	[[Category:Module 4]]

@@ Line 25: / Line 25: @@
 </code>
-The above code leverages many useful javascript and jQuery features.  ''$("a")'' is the jQuery way of selecting all HTML ''a'' elements.  That is, in this case, all elements in the HTML document that are ''<a>'' tags.  The ''click'' function is invoked for all such ''a'' elements in the document.  The argument to the ''click'' function is another function that is to be called when the selected elements are clicked by the user.  The ''event'' argument to this user-defined function is a default argument sent to functions which handle user actions like clicking a mouse button.  In this example, the code calls another function, ''preventDefault()'' on the event passed to stop the standard action on that event.  Here that means stopping the web browser from following the link that the user clicked on.  Finally, the ''$(this)'' variable is the jQuery way of accessing the current encapsulating object, as in Java.  This example calls the jQuery hide function on the object to make the object (again, in this case, ''this'' is referring to the ''<a>'' tag that the user clicked) disappear from the browser.  The script also passes an argument to the hide function to make the link disappear slowly as described in the API [http://docs.jquery.com/Hide documentation].
+The above code leverages many useful javascript and jQuery features.  ''$("a")'' is the jQuery way of selecting all HTML ''a'' elements.  That is, in this case, all elements in the HTML document that are ''<a>'' tags.  The ''click'' function is invoked for all such ''a'' elements in the document.  The argument to the ''click'' function is another function that is to be called when the selected elements are clicked by the user.  The ''event'' argument to this user-defined function is a default argument sent to functions which handle user actions like clicking a mouse button.  In this example, the code calls another function, ''preventDefault()'' on the event passed to stop the standard action on that event.  Here that means stopping the web browser from following the link that the user clicked on.  Finally, the ''$(this)'' variable is the jQuery way of accessing the current encapsulating object, as in Java.  This example calls the jQuery hide function on the object to make the object (again, in this case, ''this'' is referring to the ''<a>'' tag that the user clicked) disappear from the browser.  The script also passes an argument to the hide function to make the link disappear slowly as described in the API.
 jQuery also comes with some easy to use widgets for building better user interfaces.  One of the handiest is the [http://docs.jquery.com/UI/Dialog dialog] widget that pops-up an in-browser dialog window.  To use the dialog functions, you need to include a few more javascript libraries in your HTML header block like so: