Goals

One of the real thrills of JavaScript is being able to incorporate modules developed by others into your program and to develop large-scale software that looks good. Today you will learn to use the libraries provided by others and incorporate them into your programs.

Understand the concept of libraries.
Understand the mechanism of using libraries prepared by others.
Using libraries like jQuery.

JQuery

jQuery Basics

What is jQuery?

The basis of JavaScript is to give movement to pages written in HTML. You can use it to add an action by pressing a button or change the contents displayed on the page according to the value entered in the form. However, the more you try to do something complicated, the more troublesome procedures will come up. Therefore, in order to make JavaScript easier to use, libraries have been developed. A library is a package of reusable versatile functions packaged together.

In JavaScript, many people develop and publish various libraries. Here, we will introduce jQuery which is often used among them.

jQuery is a JavaScript library developed and released in 2006, which is characterized by adopting a description method similar to CSS. Using jQuery makes it possible to manipulate HTML with shorter code.

How to use jQuery

To use jQuery, you need to download the jQuery library from the jQuery site, place it on your site and read it using the script element. On jQuery’s site, a compressed library called Minified and a pre-compression library called Uncompressed are provided. These two functions are the same, but we usually use Minified. This is because the file size is kept small using techniques such as shortening variable names and omitting comments, so that the downloading ends quickly. On the other hand, the Minified library is not suitable for human reading, and if you are interested in the jQuery code itself, you should download the Uncompressed library.

We normally download the jquery library and host it on this server, but in this lesson we will use the Minified library at https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.min.js Since the Uncompressed library is located at https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.js in -3.2.1.min.js. If you click on each link and display it, you can see the difference between the Minified library and the Uncompressed library.

Getting started with jQuery

Let’s try using jQuery. Look at the next program.




<ul>
 	


<li>Hello World!</li>



 	


<li class="ex">Hello SFC!</li>



</ul>

$(function(){
  $("li.ex").css("color", "red");
});

Output

Hello World!
Hello SFC!

In the program, we read https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.min.js with the first script element. Also, the second script element is completely different from the JavaScript that we have learned so far. The second script element is a program using jQuery.

In jQuery, it is basically a matter of designating which part of HTML is to be manipulated, and then writing which contents to manipulate. Those that designate the part to be operated are called selectors. It is the same as the CSS selector. In the above program, the portion of “li” surrounded by “$ (…)” on line 9 is the selector. In this example all li elements are specified. You can also specify classes, IDs etc in the same as you do in CSS. If the operation part of jQuery is “css (” color “,” red “)”, it specifies the color of the character as red. As a result, all the bullets are displayed in red.

What is “$ (function () {” in the 8th line and “})” in the 10th line? “This is the part that specifies the timing when the jQuery command is executed. To be exact, it is “$ (document) .ready (function () {” and “});”, but “$ (function () {” and “});” is used as an abbreviation. It is understood by looking at the non-abbreviated form, but this description method indicates that it is executed when the document is ready. That is, when loading the page is completed, its contents (“$ (” li “). Css (” color “,” red “);” in this program are executed. In many cases, since you want to start processing after all HTML has been loaded, the program is often written in the part surrounded by “$ (function () {” and “});”.


<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
  jQuery program
});
</script>

In many cases we mentioned that the program is written in the part surrounded by "$ (function () {" and "})" ", but this is not the case when program is run in an event-driven manner. For example, see the following program. This may make more sense syntactically.

<div id="helloworld">Hello World!</div>
<button onclick="changeColor()">Click me!</button>

<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function changeColor() {
  $("#helloworld").css("color", "red");
}
</script>

The result of executing this program is as follows. Please press the button. The color of the part indicated as "Hello World!" Probably changed. That is, by using jQuery, operations that we have done using getElementById () etc. are described shortly and easily.

Hello World!

Here "#helloworld" we use as a selector in jQuery. In jQuery, if you add "#" before the character string, it refers to the id attribute. If you do not add anything, it simply refers to the element, and if you add "#", it refers to the id attribute. As mentioned earlier, this is the same as for CSS's selector.

Selectors

As shown above, in order to use jQuery, it is necessary to master the selection. Let's take a closer look at how to specify selectors here.

Element Selectors

The element selector is a selector for designating a specific element as described above. If there are multiple specified elements, all of them are eligible. This method is easy, as one simply refers to the element by its name.

ID Selectors

The ID selector is for specifying the id attribute attached to the element. Since there is no element with the same id attribute on one page, using this specification method, it is possible to specify only one specific element. For the description method, prefix "id" attribute name with "#". You can also write an element selector and an ID selector like "$ (" div # helloworld ")". Here, "div" is the element name, and "helloworld" is the value of the id attribute.

Class Selectors

The class selector is for specifying the class attribute attached to the element. If there are multiple specified classes, all of them are eligible. In order to select, add "." before the class attribute name. You can also write an element selector and an ID selector like "$ (" div.article ")". Here, "div" is the element name and "article" is the value of the class attribute.

Descendant Selectors

The descendant selector is for narrowing down the elements that are further inside the element. For example, there is a sentence "descendant selector is for designating descendants" and is used when specifying a strong element in a div element, that is, "descendant selector" portion. To select, parent elements and descendant elements are written contiguously, separated by spaces. For example, "$ (" div strong ")". It does not necessarily need to be an element name, it is also possible to specify it using "$ (". Article strong ")".

Universal Selectors

The universal selector is for selecting all elements. To specify the universal selector, use "* (asterisk)". For example, to specify all the elements in a div element, write it like "$ (" div * ")".

Multiple Selectors (or)

It is a type designation method that matches with multiple selectors. To specify multiple selectors in parallel, separate them with ",". For example, "$ (" # question1, # question2 ")" is specified.

Multiple Selectors (and)

It is a method of specifying what matches all of the plurality of selectors. Multiple selectors are arranged without dividing. For example, in the case of a class, specify "$ (". Class1.class2 ")". It is easy to specify by using "+" as "$ (". Class1 "+". Class 2 ")".

Other Selectors

In addition to the ones introduced above, jQuery has various selectors. For more details please refer to the jQuery document selector documentation.




<ul>
 	


<li id="campus1" class="tokyo">Shinanomachi</li>



 	


<li id="campus2" class="tokyo">Shiba Kyoritsu</li>



 	


<li id="campus3" class="kanagawa">Shonan Fujisawa</li>



 	


<li id="campus4" class="kanagawa">Hiyoshi</li>



 	


<li id="campus5" class="tokyo">Mita</li>



 	


<li id="campus6" class="kanagawa">Yagami</li>



</ul>

function reset() {
  $("li").css("color", "black");
}
function tokyo() {
  $(".tokyo").css("color", "red");
}
function kanagawa() {
  $(".kanagawa").css("color", "red");
}
function campus1() {
  $("#campus1").css("color", "red");
}
function campus2() {
  $("#campus2").css("color", "red");
}
function campus3() {
  $("#campus3").css("color", "red");
}
function campus4() {
  $("#campus4").css("color", "red");
}
function campus5() {
  $("#campus5").css("color", "red");
}
function campus6() {
  $("#campus6").css("color", "red");
}

Shinanomachi
Shiba Kyoritsu
Shonan Fujisawa
Hiyoshi
Mita
Yagami

Manipulating documents with jQuery

By using jQuery, you can manipulate the HTML and CSS that make up the document. Here, the operation of the document will be described.

CSS control

As we saw in the previous chapter, you can dynamically manipulate CSS by using jQuery. Use css () to operate CSS. The format of css () is "css (property name, value)". Here, the property name is a property name such as "" color "" or "" background-color "" and the value is a character string of the value to be set for that property.

It is also possible to change multiple properties simultaneously. For example, to change the color of the text and the background color at the same time, do as shown below. The property name is different from that of CSS, and it is a property name used when specifying CSS with JavaScript. In other words, if the property name of the CSS is connected with "-" like "background-color", delete "-" , then capitalize the next letter.

 
$("div").css({
  backgroundColor: "red",
  color: "blue"
});

In a program, you may want to know the value of a CSS property. In this case also use css (). However, the format is different from when setting the property, and it becomes "css (property name)".




<div id="weather">Sunny</div>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22javascript%22%20src%3D%22ipl.sfc.keio.ac.jp%252Ftext%252Finfo2-2017-9%252Flib%252Fjquery-3.2.1.min.js%22%3E%3C%2Fscript%20%2F%3E%0A%5B%2Fcode%5D%3C%2Fpre%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3EFor%20example%2C%20executing%20the%20above%20program%20results%20in%20the%20following%20result.%20Here%2C%20the%20color%20is%20%22rgb%20(51%2C%2051%2C%2051)%22.%20Actually%2C%20the%20colors%20displayed%20by%20the%20CSS%20specified%20on%20the%20page%20are%20different.%20Each%20value%20indicates%20red%2C%20green%2C%20blue%2C%20and%20takes%20a%20value%20from%200%20to%20255.%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%3Cimg%20class%3D%22alignnone%20size-full%20wp-image-757%22%20src%3D%22https%3A%2F%2Fipl.sfc.keio.ac.jp%2Ftext%2Finfo2-2017-9%2Fwp-content%2Fuploads%2F2017%2F08%2F9b8ba325833c44002b1917c1987c2fa0.png%22%20alt%3D%22%22%20width%3D%22616%22%20height%3D%22414%22%20%2F%3E%3C%2Fp%3E%0A%3Ch4%3EHTML%20operation%3C%2Fh4%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3ESo%20far%20we%20have%20rewritten%20the%20contents%20of%20HTML%20elements%20using%20innerHTML%20().%20jQuery%20also%20provides%20the%20same%20function.%20In%20order%20to%20rewrite%20contents%20of%20HTML%20elements%20with%20jQuery%2C%20use%20%22html%20()%22.%20The%20method%20of%20use%20is%20simple%2C%20and%20it%20is%20as%20follows.%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3EIn%20this%20example%2C%20the%20portion%20that%20was%20originally%20supposed%20to%20be%20displayed%20as%20%22sunny%22%20by%20HTML%20is%20replaced%20with%20%22cloudy%20rain%20sometimes.%22%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3EEven%20by%20using%20html%20()%2C%20you%20can%20get%20the%20value.%20By%20sending%20an%20empty%20argument%20you%20can%20get%20the%20HTML%20code%20of%20an%20element.%3C%2Fspan%3E%3C%2Fp%3E%0A%3Ch4%3EInserting%20and%20moving%20HTML%20elements%3C%2Fh4%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3E%3Cspan%20title%3D%22jQuery%E3%82%92%E4%BD%BF%E3%81%86%E3%81%93%E3%81%A8%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E3%80%81HTML%E8%A6%81%E7%B4%A0%E3%81%AE%E6%8C%BF%E5%85%A5%E3%82%84%E7%A7%BB%E5%8B%95%E3%82%92%E8%A1%8C%E3%81%86%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%22%3EBy%20using%20jQuery%2C%20HTML%20elements%20can%20be%20inserted%20and%20moved.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%E4%B8%8B%E8%A8%98%E3%81%AE%E8%A1%A8%E3%81%AB%E3%81%BE%E3%81%A8%E3%82%81%E3%82%8B%E3%80%82%20%22%3EIt%20is%20summarized%20in%20the%20table%20below.%3C%2Fspan%3E%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%3Cspan%20title%3D%22%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF%E3%80%81sel1%20%E3%82%92%E5%80%A4%E3%81%A8%E3%81%97%E3%81%A6%E8%BF%94%E3%81%99%E3%80%82%22%3EThe%20method%20returns%20sel%201%20as%20a%20value.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%E4%B8%8A%E8%A8%98%E3%81%A7%E3%80%81sel2%20%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AB%20%24(%26quot%3B%26lt%3Bdiv%26gt%3B1%26lt%3B%2Fdiv%26gt%3B%26quot%3B)%20%E3%81%BE%E3%81%9F%E3%81%AF%E3%80%81%26quot%3B%26lt%3Bdiv%26gt%3B1%26lt%3B%2Fdiv%26gt%3B%26quot%3B%20%E3%81%AA%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%80%81html%20%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%22%3EYou%20can%20also%20write%20html%20like%20%24%20(%22%26lt%3Bdiv%26gt%3B%201%20%26lt%3B%2F%20div%26gt%3B%22)%20or%20%22%26lt%3Bdiv%26gt%3B%201%20%26lt%3B%2F%20div%26gt%3B%22%20at%20sel%202%20above.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%EF%BC%88html%20%E3%82%92%E6%9B%B8%E3%81%8F%E5%A0%B4%E5%90%88%E3%81%AF%E3%80%81%E6%96%B0%E8%A6%8F%E7%94%9F%E6%88%90%EF%BC%8B%E7%A7%BB%E5%8B%95%E3%81%AA%E3%81%AE%E3%81%A7%E3%80%81%E6%8C%BF%E5%85%A5%E3%81%A8%E3%81%84%E3%81%86%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AB%E3%81%AA%E3%82%8B%EF%BC%89%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%AF%E3%80%81%E7%A7%BB%E5%8B%95%E5%BE%8C%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E5%80%A4%E3%81%A8%E3%81%97%E3%81%A6%E8%BF%94%E3%81%99%E3%80%82%22%3E(When%20writing%20html%2C%20since%20it%20is%20a%20new%20element%20%2B%20movement%2C%20we%20insert%20elements)%20This%20method%20returns%20the%20element%20after%20we%20move%2Finsert%20it.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%E4%B8%8A%E8%A8%98%E3%81%A7%E3%80%81sel2%20%E3%81%AE%E3%81%A8%E3%81%93%E3%82%8D%E3%81%AB%E3%80%81%24(%26quot%3B%26lt%3Bdiv%26gt%3B1%26lt%3B%2Fdiv%26gt%3B%26quot%3B)%20%E3%81%AA%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%80%81html%20%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%93%E3%81%A8%E3%82%82%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%22%3EIn%20the%20above%2C%20you%20can%20also%20write%20html%20like%20sel2%2C%20like%20%24%20(%22%26lt%3Bdiv%26gt%3B%201%20%26lt%3B%2F%20div%26gt%3B%22).%20%3C%2Fspan%3E%3Cspan%20title%3D%22%EF%BC%88html%20%E3%82%92%E6%9B%B8%E3%81%8F%E5%A0%B4%E5%90%88%E3%81%AF%E3%80%81%E6%96%B0%E8%A6%8F%E7%94%9F%E6%88%90%EF%BC%8B%E7%A7%BB%E5%8B%95%E3%81%AA%E3%81%AE%E3%81%A7%E3%80%81%E6%8C%BF%E5%85%A5%E3%81%A8%E3%81%84%E3%81%86%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AB%E3%81%AA%E3%82%8B%EF%BC%89%E3%82%88%E3%82%8A%E8%A9%B3%E3%81%97%E3%81%8F%E3%81%AFjQuery%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%AE%E6%93%8D%E4%BD%9C%E3%81%AE%E7%AB%A0%E3%82%92%E5%8F%82%E7%85%A7%E3%81%97%E3%81%A6%E3%81%BB%E3%81%97%E3%81%84%E3%80%82%22%3E(When%20writing%20html%2C%20it%20is%20a%20virtual%20insertion%20as%20it%20is%20newly%20created%20%2B%20moved)%20For%20more%20details%2C%20see%20the%20%3Ca%20href%3D%22http%3A%2F%2Fapi.jquery.com%2Fcategory%2Fmanipulation%2F%22%3Echapter%20on%20manipulating%20jQuery's%20documentation%3C%2Fa%3E.%20%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3E%3Cspan%20title%3D%22%E4%BB%96%E3%81%AB%E3%82%82%E6%B2%A2%E5%B1%B1%E3%81%AE%E6%93%8D%E4%BD%9C%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%81%8C%E7%94%A8%E6%84%8F%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82%22%3EThere%20are%20many%20other%20methods%20for%20doing%20this.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%8B%E3%82%89%E3%81%AE%E5%80%A4%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%93%E3%82%8C%E3%81%BE%E3%81%A7%E3%81%AE%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%A7%E3%81%AF%E3%80%81%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%80%81%E7%89%B9%E3%81%AB%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%AA%E3%82%A2%E3%81%8B%E3%82%89%E3%81%AE%E5%80%A4%E3%81%AE%E5%85%A5%E5%8A%9B%E3%82%92%E5%A4%9A%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8D%E3%81%9F%E3%80%82%22%3EAcquiring%20a%20value%20from%20past%20programs%2C%20we%20frequently%20use%20the%20input%20of%20values%20%E2%80%8B%E2%80%8Bfrom%20forms%2C%20especially%20text%20areas.%20j%3C%2Fspan%3E%3Cspan%20title%3D%22%E3%81%93%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E5%80%A4%E3%81%AE%E5%85%A5%E5%8A%9B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%82%82jQuery%E3%81%AF%E7%B0%A1%E5%8D%98%E3%81%AA%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%95%E3%82%A7%E3%82%A4%E3%82%B9%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%80%82%22%3EQuery%20also%20provides%20a%20simple%20interface%20for%20entering%20such%20values.%20%3C%2Fspan%3E%3Cspan%20title%3D%22%E4%BE%8B%E3%81%88%E3%81%B0%E3%80%81%E4%B8%8B%E8%A8%98%E3%81%AF%E5%88%9D%E6%9C%9F%E3%81%AE%E9%A0%83%E3%81%AB%E4%BD%BF%E3%81%A3%E3%81%9F%E4%BE%8B%E3%81%A7%E3%80%81%E5%90%8D%E5%89%8D%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%99%E3%82%8B%E3%81%A8%E3%80%8C%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%81%AF%E2%97%8B%E2%97%8B%E3%81%95%E3%82%93%E3%80%8D%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%9F%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%88%E3%81%8C%E5%87%BA%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E3%82%82%E3%81%AE%E3%81%A7%E3%81%82%E3%82%8B%E3%80%82%22%3EFor%20example%2C%20the%20following%20is%20an%20example%20used%20in%20the%20early%20days%2C%20when%20an%20input%20of%20a%20name%20is%20entered%2C%20an%20alert%20indicating%20%22Hello%20Mr.%20%E2%97%8B%20%E2%97%8B%22%20appears.%3C%2Fspan%3E%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cp%3E%26nbsp%3B%3C%2Fp%3E%0A%3Cpre%3E%5Bcode%20language%3D%22html%22%5D%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20hello()%7B%20%2F%2F%20Text%20Element%0A%20var%20name%20%3D%20document.getElementById(%22text1%22)%3B%20%2F%2FAlert%20alert(%22Hello%E3%80%81%22%20%2B%20name.value)%3B%20%7D%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<form> Your Name:<input id="text1" type="text" size="20"><input type="button" value="OK" onclick="hello()"></form>

When this is rewritten using jQuery, it becomes as follows. By using "val ()" it is easy to get the value of the input element.

 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fipl.sfc.keio.ac.jp%2Ftext%2Finfo2-2017-9%2Flib%2Fjquery-3.2.1.min.js%22%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0A%0A%3C%2Fp%3E%0A%3Cform%3E%20Your%20Name%3A%20%3Cinput%20id%3D%22text1%22%20type%3D%22text%22%20size%3D%2220%22%3E%3Cinput%20type%3D%22button%22%20value%3D%22OK%22%20onclick%3D%22hello()%22%3E%3C%2Fform%3E%0A%3Cp%3E%20%0A%5B%2Fcode%5D%3C%2Fpre%3E%0A%3Cpre%3E%5Bcode%20language%3D%22javascript%22%5D%0Afunction%20hello()%7B%20%2F%2F%20Alert%0A%20alert(%22Hello%2C%22%20%2B%20%24(%22input%23text1%22).val())%3B%0A%20%7D%0A%5B%2Fcode%5D%3C%2Fpre%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3EYou%20can%20also%20use%20val%20()%20to%20set%20the%20value.%20When%20setting%20a%20value%2C%20write%20%22val%20(value)%22.%20For%20example%2C%20do%20as%20follows.%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cpre%3E%5Bcode%20language%3D%22javascript%22%5D%20%24(%22input%23text1%22).val(%22Sato%22)%3B%20%5B%2Fcode%5D%3C%2Fpre%3E%0A%3Ch2%3EMethod%20Chain%3C%2Fh2%3E%0A%3Cp%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3E%3C%2Fspan%3E%3Cspan%20id%3D%22result_box%22%20class%3D%22%22%20lang%3D%22en%22%20tabindex%3D%22-1%22%3EIf%20you%20want%20to%20apply%20multiple%20methods%20to%20an%20element%20in%20turn%2C%20jQuery%20provides%20an%20interface%20called%20method%20chain.%20For%20example%2C%20if%20you%20want%20to%20perform%20three%20operations%20on%20one%20element%20as%20shown%20below%20do%20the%20following.%3Cbr%20%2F%3E%0A%3C%2Fspan%3E%3C%2Fp%3E%0A%3Cpre%3E%5Bcode%20language%3D%22javascript%22%5D%20%3C%2Fp%3E%0A%3Cdiv%20id%3D%22soup%22%3E%3C%2Fdiv%3E%0A%3Cp%3E%0A%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fipl.sfc.keio.ac.jp%2Ftext%2Finfo2-2017-9%2Flib%2Fjquery-3.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%24(%22div%23soup%22).prepend(%22%E5%BE%A1%22)%3B%20%24(%22div%23soup%22).prepend(%22%E5%BE%A1%22)%3B%20%24(%22div%23soup%22).prepend(%22%E3%81%8A%22)%3B%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

In this case, three operations can be written as follows.

 

<div id="soup">付け</div>


<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22https%3A%2F%2Fipl.sfc.keio.ac.jp%2Ftext%2Finfo2-2017-9%2Flib%2Fjquery-3.2.1.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%24(%22div%23soup%22).prepend(%22%E5%BE%A1%22).prepend(%22%E5%BE%A1%22).prepend(%22%E3%81%8A%22)%3B%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

Of course, it does not matter if different methods are mixed. Event model by jQuery also provides an interface of its own. Here, we explain the method of event handling using jQuery.

At the very beginning, we explained that jQuery's program is often written between "$ (function () {" and "});" However, until now, almost no such example has appeared. Here, we will explain in greater detail the meaning of "$ (function () {" and "});".

"$ (Function () {" ~ "});" is an abbreviation of "$ (document) .ready (function () {" ~ "));" as mentioned earlier. So what is "$ (document) .ready (function () {" ~ "));" In jQuery usage, it has taken the form of "element selection method. However, in fact jQuery can define events outside it. This identity of "$ (document) .ready (function () {" ~ "));" "$ (Document) .ready (function () {" ~ "));" is executed in the event that "$ (document)", that is, "ready ()" for the entire document is there.

Since the "ready ()" event occurs when the entire document is read, "$ (document) .ready (function () {" ~ "});" is the state in which all the pages are displayed as a conclusion. It is executed immediately after. In other words, you can use "$ (document) .ready (function () {" ~ "});" to execute the program after loading the page rather than before.

click () and the basics of event handling

Now that we can understand the interesting things in " (document) .ready (function () {" ~ "));" let's look at another event. First of all, the most basic event, click (). As you can see, click () is for handling events that occur when an element is clicked.

Look at the next program. In this program, one button is made in the HTML part of the first line. However, we do not use functions with onclick attribute as before. Instead, the JavaScript program uses jQuery to define event handlers with "$ (" button "). Click (function () {" ~ "}); "$ (" Button "). Click ()" means that a click event occurs in the button element. When a click event occurs, the inside of the function, that is, the part enclosed in curly brackets is executed.

 
<script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2017-9/lib/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("button").click(function(){
    alert("Click!!");
  });
});
</script>

<button>Click me</button>

Exercise 10-

With jQuery, create a button to change the background color of elements containing ccc, including aaa and bbb, to the color you entered in the input area. Use the following HTML. However, when you press the button, first return to the initial state.

<p class="aaa">Element1</p>
<p class="aaa bbb">Element2</p>
<p class="ccc aaa bbb">Element3</p>
<p class="aaa ccc bbb">Element4</p>
<p class="aaa bbb">Elementy5</p>

function reset101() {
    var ele = document.getElementsByClassName("element");
    for (var i=0; i<ele.length; i++) {
        ele[i].style.backgroundColor = "transparent";
    }
}
function exccc() {
    reset101();
    var ele = document.getElementsByClassName("exccc");
    var col = document.getElementById("colortext");

    for (var i=0; i<ele.length; i++) {
        ele[i].style.backgroundColor = col.value;
    }
}
function exaaabbb() {
    reset101();
    var ele = document.getElementsByClassName("exaaa exbbb");
    var col = document.getElementById("colortext");

    for (var i=0; i<ele.length; i++) {
        ele[i].style.backgroundColor = col.value;
    }
}

Element 1

Element 2

Element 3

Element 4

Element 5

Exercise 10-

Create a gambling game as follows using jQuery.

0 th person

Method	Explanation
sel1.prepend(sel2)	Move the element specified by sel 2 to the beginning of the element specified by sel 1.
sel1.append(sel2)	Move the element specified by sel 2 to the end of the element specified by sel 1.
sel1.before(sel2)	Move the element specified by sel 2 immediately before the element specified by sel 1.
sel1.after(sel2)	Move the element specified by sel 2 immediately after the element specified by sel 1.
Method	Explanation
prependTo(sel)	Move an element specifying a method to the beginning of the element selected by the selector specified by sel.
appendTo(sel)	Move an element that specifies a method to the end of the element selected by the selector specified by sel.
insertBefore(sel)	Move the element with the method specified before the element selected by the selector specified by sel.
insertAfter(sel)	Move the specified element after the element selected by the selector specified by sel。
Method	Explanation
click()	The element is clicked with the mouse.
dblclick()	The element is double clicked with the mouse.
mousedown()	The mouse is pressed down on the element
mouseup()	The mouse is released from the element
mouseover()	The mouse hovers over the element
mouseout()	The mouse hovers out of the element
focus()	input elements are selected
blur()	input elements are deselected
change()	The value of the input element changes.

◯	◯	◯
◯	◯	◯
◯	◯	◯

Fundamentals of Information Technology 2

情報基礎2

Libraries

Goals

JQuery

jQuery Basics

What is jQuery?

How to use jQuery

Getting started with jQuery

Selectors

Element Selectors

ID Selectors

Class Selectors

Descendant Selectors

Universal Selectors

Multiple Selectors (or)

Multiple Selectors (and)

Other Selectors

Manipulating documents with jQuery

CSS control

click () and the basics of event handling

Exercise 10-

Exercise 10-