Difference between revisions of "JQuery"
Jump to navigation
Jump to search
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | JQuery is a JavaScript popular framework. It smooths over many of the difficulties that traditionally made JavaScript hard to work with and supports / encourages a unique style of coding driven by CSS-selector based "queries". JQuery code can be surprisingly compact. | + | JQuery is a JavaScript popular framework. It smooths over many of the difficulties that traditionally made JavaScript hard to work with and supports / encourages a unique style of coding driven by CSS-selector based "queries". JQuery code can be surprisingly compact. By default jQuery is accessed via the globally defined function "$" (though "jQuery" should also work). |
For example, to hide all the links (in anchor tags) on a page, you could simply write: | For example, to hide all the links (in anchor tags) on a page, you could simply write: | ||
| Line 14: | Line 14: | ||
* [http://www.linuxjournal.com/article/10404 Writing jQuery Plugins, tutorial] | * [http://www.linuxjournal.com/article/10404 Writing jQuery Plugins, tutorial] | ||
| + | |||
| + | == JQuery == | ||
| + | |||
| + | http://jquery.org | ||
| + | |||
| + | * Smooths over browser differences (Event-handling, AJAX) | ||
| + | * Incredibly elegant: CSS selectors to "query" the page & manipulate specific content with code | ||
| + | * Pre-fab widgets & behaviors (Draggable, Resizable, Droppable) | ||
| + | |||
| + | == JQuery: Hello world == | ||
| + | |||
| + | <source lang="html4strict"> | ||
| + | <html> | ||
| + | <head> | ||
| + | <script src="jquery.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | console.log("Hello world"); | ||
| + | }); | ||
| + | </head> | ||
| + | <body> | ||
| + | </body> | ||
| + | </html> | ||
| + | </source> | ||
| + | |||
| + | == JQuery: Styles Plus == | ||
| + | |||
| + | <source lang="html4strict"> | ||
| + | <html> | ||
| + | <head> | ||
| + | <script src="jquery.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | $("p.foo").css({'background': 'pink'}); | ||
| + | }); | ||
| + | </head> | ||
| + | <body> | ||
| + | <p class="foo">Hello</p> | ||
| + | <p>World</p> | ||
| + | </body> | ||
| + | </html> | ||
| + | </source> | ||
| + | |||
| + | == Extreme Functions == | ||
| + | |||
| + | Javascript functions can be defined "in-place" and be "anonymous". | ||
| + | |||
| + | Traditional for loop: | ||
| + | <source lang="javascript"> | ||
| + | var words = "Once upon a time, in a galaxy far far away".split(" ") | ||
| + | |||
| + | for (var i=0; i<words.length; i++) { | ||
| + | console.log(words[i]); | ||
| + | } | ||
| + | </source> | ||
| + | |||
| + | Using jQuery's each: | ||
| + | <source lang="javascript"> | ||
| + | var words = "Once upon a time, in a galaxy far far away".split(" ") | ||
| + | $(words).each(function (i, w) { | ||
| + | console.log(w); | ||
| + | }); | ||
| + | </source> | ||
| + | |||
| + | There are situations where using each is important! (For making proper closures) | ||
| + | |||
| + | == JQuery: Events == | ||
| + | |||
| + | <source lang="html4strict"> | ||
| + | <html> | ||
| + | <head> | ||
| + | <script src="jquery.js"></script> | ||
| + | <script> | ||
| + | $(document).ready(function () { | ||
| + | |||
| + | $("p").click(function () { | ||
| + | $(this).css({background: "aqua"}); | ||
| + | }); | ||
| + | |||
| + | }); | ||
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <p class="foo">Hello</p> | ||
| + | <p>World</p> | ||
| + | </body> | ||
| + | |||
| + | </html> | ||
| + | </source> | ||
Latest revision as of 11:55, 16 February 2021
JQuery is a JavaScript popular framework. It smooths over many of the difficulties that traditionally made JavaScript hard to work with and supports / encourages a unique style of coding driven by CSS-selector based "queries". JQuery code can be surprisingly compact. By default jQuery is accessed via the globally defined function "$" (though "jQuery" should also work).
For example, to hide all the links (in anchor tags) on a page, you could simply write:
$("a").hide();
Or to make all paragraphs of class "quote" have a pink background, and a larger text size:
$("p.quote").css({background: "pink", font-size: "larger"});
JQuery
- Smooths over browser differences (Event-handling, AJAX)
- Incredibly elegant: CSS selectors to "query" the page & manipulate specific content with code
- Pre-fab widgets & behaviors (Draggable, Resizable, Droppable)
JQuery: Hello world
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
console.log("Hello world");
});
</head>
<body>
</body>
</html>
JQuery: Styles Plus
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("p.foo").css({'background': 'pink'});
});
</head>
<body>
<p class="foo">Hello</p>
<p>World</p>
</body>
</html>
Extreme Functions
Javascript functions can be defined "in-place" and be "anonymous".
Traditional for loop:
var words = "Once upon a time, in a galaxy far far away".split(" ")
for (var i=0; i<words.length; i++) {
console.log(words[i]);
}
Using jQuery's each:
var words = "Once upon a time, in a galaxy far far away".split(" ")
$(words).each(function (i, w) {
console.log(w);
});
There are situations where using each is important! (For making proper closures)
JQuery: Events
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$(this).css({background: "aqua"});
});
});
</head>
<body>
<p class="foo">Hello</p>
<p>World</p>
</body>
</html>
