ICT Literacy

for advanced class #10

Sakurai Yusuke
jQuery
jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming.

jQuery is enable to change design and document instantly without transfer server.
(While jQuery has some main features, in this class we study about this feature.)
Ready to jQuery
Its need a declaration of using jQuery on googles server.
(You dont need download the file.)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

The declaration should be written above the user.js.

Where to write jQuery

Write jQuery in external js file (user.js) in this class.

jQuery Syntax
The basic jQuery syntax consists of $, selector, and method.

e.g. This method turns texts of the element having id=display into a hello.

$ (#display).text(hello);

sign selector method

A $ sign to define/access jQuery

A (selector) to "query (or find)" HTML elements. Selector syntax is same as the CSS.
A jQuery method() to be performed on the element(s)
3 basic pattern of jQuery method
jQuery Methods can be roughly divided into three patterns.

1. Parentheses is blank and returns the value

x = $(#display).text();

2. Parentheses is blank and gives some effect to selected element(s)

$(#display).hide();

3. Parentheses is not blank and gives some effect to selected element(s)

$(#display).text(hello);
1. Parentheses is blank and returns the value

e.g.

x = $(#display).text(); // Return the text of the element having id=display.

x = $(#display).width(); // Return the width of the element having id=display.
2. Parentheses is blank and gives some effect to selected element(s)

e.g.

$(#display).hide(); // Hide the element having id=display.

$(#display).show(); // Show the element having id=display.

This pattern is often used with jquery Plugin.

3. Parentheses is not blank and gives some effect to selected element(s)

e.g.

$(#display).text(hello);
// Change the text of the element having id=display into hello.

$("#display").text("");
// Change the text of the element having id=display into blank.
(= Delete the text)

$(#display).width(100px);
// Change the width of the element having id=display into 100px.
jQuery text method
jQuery text method sets or returns the text content of selected elements.

$("#display").text("");
// Change the text of the element having id=display into blank.
(= Delete the text)

$("#display").text();
// Return the text of the element having id=display.

There are so many jQuery method. You don't have to memorize all of them.
When you need it, learn little by little as you examine it on the web.
The Document Ready Event
Before documents are completely loaded, any JavaScript and jQuery program
should not be executed (Defining the variables is fine).
The place to write programs that will be executed only once after loading the
document completely is bellow.

$(document).ready(function ($) {
// programs that will be executed only once after loading
the document completely should be written here
});