KEMBAR78
ICT Literacy For Advanced Class #10: Sakurai Yusuke | PDF | J Query | Software Engineering
Scribd
Upload
50 views11 pages

ICT Literacy For Advanced Class #10: Sakurai Yusuke

The document discusses jQuery, a JavaScript library that simplifies programming. It explains that jQuery allows for changing document design and content instantly without reloading the page. It then provides details on including jQuery, the basic jQuery syntax of using "$", selectors, and methods. It also outlines the three main patterns of jQuery methods - those with blank parentheses that return values, those with blank parentheses that have effects, and those with non-blank parentheses that have effects. Specific jQuery text methods are described. It stresses writing jQuery code within the document ready event to ensure it runs after complete page load.

Uploaded by

Yusuke Sakurai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views11 pages

ICT Literacy For Advanced Class #10: Sakurai Yusuke

The document discusses jQuery, a JavaScript library that simplifies programming. It explains that jQuery allows for changing document design and content instantly without reloading the page. It then provides details on including jQuery, the basic jQuery syntax of using "$", selectors, and methods. It also outlines the three main patterns of jQuery methods - those with blank parentheses that return values, those with blank parentheses that have effects, and those with non-blank parentheses that have effects. Specific jQuery text methods are described. It stresses writing jQuery code within the document ready event to ensure it runs after complete page load.

Uploaded by

Yusuke Sakurai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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
});

You might also like