【変数・型・配列・連想配列】

<変数の書き方>

①変数は文字列の先頭に「$」を付けて宣言する。

<?php

$str = 'pタグの中に表示されます';

?>

 

②変数の名前には英字、数字、「_(アンダーバー)」が使える

<?php

$str = 'pタグの中に表示されます';

?>

 

③変数の名前の先頭に数字は使えない

(ダメな例)

<?php

$8str = 'pタグの中に表示されます';

?>

----------

【型とは】

変数には「型」というものがある。

型とは「何を中に入れられるか」を決めたもの。

 

PHPは変数内に入れたものによって自動的にPC側で判断して型を決めてくれる

----------

 

【配列とは】

変数(箱)を並べて、1固まりとして見たもの

 

<書き方>

①配列の名前は変数と同じルール

(さらに array()の中にカンマで区切って値を入れる)

<?php

$array = array(235 , 'これは文字列です' , 3.1415 , FALSE );

?>

※最初に入れる値が決まってないなら「$array = array();」でも可

 

②配列に値を入れるには [ ] とするか、[ ] の中に番号指定する。

(先頭の番号は0からなので注意)

<?php

$array = array();

(↑配列の最後尾に追加される。今回は配列に何も入ってないので$array[0]に「あいうえお」が入った)

$array = 'あいうえお';   

(↑番号で配列の番号指定してる。今回は$array[2]に数値の235が入った)

$array[2] = 235; 

?>

 

③配列の中身を取り出すには、[ ] の中に番号指定する

<?php

$array = array();

$array = 'あいうえお';

(↑「あいうえお」と表示される)

?>

 

----------

 

連想配列とは】

配列と同じだが、「キー」をつけることができる

 

<書き方>

連想配列の名前は変数と同じルール。array()の中にカンマで区切って「キー名 => 値」の組み合わせで入れる

<?php

$array = array('スイカ' => '甘い' , 'レモン' =>'酸っぱい' , '柿' => '渋い' );

(↑最初に入れる値が決まってないなら「$array = array();」でも可)

?>

 

連想配列に値を入れるには[ ]の中にキー名を指定する。

$array = array();

$array['スイカ'] = '甘い';

(↑指定したキー名がまだなかった場合、新しく連想配列に追加される)

$array['スイカ'] = 'たまに不味い';

(↑キー名で連想配列を指定してる。今回は$array['スイカ']の値が「たまに不味い」に書き換えられた)

 

③配列の中身を取り出すには[ ]の中にキーを指定するか、番号でもいい

$array = array();

$array['スイカ'] = '甘い';

echo $array[0];

(↑「甘い」と表示される)

echo $array['スイカ'];

(↑「甘い」と表示される)

 

 

PHPの書き方

PHPを作るための手順】

⑴webサーバーソフトをPCへインストール

テキストエディタPHPファイルを作る

⑶サーバーへファイルを置く

⑷ブラウザでそのファイルを開く

 

※サーバー

→何かを保管しておき、誰かから要望があった場合渡す仕組み(PC内にある)

 

-----

phpファイル

<?php

$str = 'html内にこの文字が表示されます!ブラウザ表示してみるとphpプログラムは見えません!';

?>

 

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>ホームページのタイトル</title>

</head>

<body>

<h1>PHPプログラムを作ってみよう!</h1>

<p><?php echo $str; ?></p>

</body>

</html>

-----

・「$str」→変数を指定(値を保存しておく箱の役割)

・「echo」→その後のもの(文字)を

表示させる命令文(この場合「$str」)

 

<パス指定>

locallhost:8888/sample/index.php

MAMPのフォルダ内のものをサーバーに依頼してブラウザ上で反映

 

 

【書き方】

①<?php と ?>タグの間に書く

<?php   ←開始タグ

$a = 'あいうえお';

?>         ←終了タグ

 

②1つの命令文の終わりには「;」をつける

<?php

$a = 'あいうえお'; $b = 'かきくけこ';

?>

 

③外部ファイルを作り、そこにPHPを書く

//htmlファイルのどこにでも外部のphpファイルを読み込むことができる

<?php include('sample.php'); ?>

 

【書ける場所】

どこでも書ける

----

<?php

$a ='pタグの中に表示';

?>

 

<!DOCTYPE html>

<html>

<head>

<meta charset = "utf-8">

<title>ホームページタイトル</title>

</head>

<body>

<p><?php echo $str;?></p>

</body>

</html>

----

<注意点>

⑴1つのファイルに複数のphpブロックがある場合、全部で1つのブロックとして認識される。

⑵全角は「''」「""」で囲む

⑶命令の終わりには「;」を忘れない

PHPとは

PHP言語とは】

サーバー内で動くプログラミング言語

(※サーバーサイド言語とも言われる)

 

※ブラウザ側ではPHPプログラムを見ることはできない

 

【できること】

・ユーザー登録

・ログイン機能

・フォームやメールの送信機能

 

webサービスに必要な機能はPHP言語でないと実現できない

js・jQuery【鬼練4】

【鬼練4】

開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に

「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる

その次に

「自分:◯◯◯」を表示させる。

◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。

変数answerには

「仕事に決まってるだろ!」

「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」

のどちらかの文字列をランダムで入れておく。

変数answerの中身が「仕事に決まってるだろ!」だった場合には、

「彼女:あたたたたたたたっーーー!!」と

「自分:ひでぶっ!!」という文字を表示させる

変数answerの中身が「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」だった場合には、

「彼女:仕事してこいやーーーーーー!!」と

「自分:ひでぶっ!!」という文字を表示させる

 

【答え】

var answer = null;
var rand = Math.floor(Math.random()*2);

if(rand){
answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';
}else{
answer = '仕事に決まってるだろ!';
}

console.log('彼女:仕事と私どっちを取るのよ!');
console.log('自分:' + answer);

if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}

 

【解説】

①変数の定義と初期化

ーーー

var answer = null;

ーーー

変数answerを「定義」した

 

あとあと、この変数に「値」を入れるので、今は空にしておく

 

「値は空ですよ~」null(ヌル)」で入れておく

「値は空という意味の値」というわけのわからない意味(そういうもんとして覚える)

 

ちなみに下記2つのようにも書ける

var answer;

変数answerは定義したが「初期化」はしていない

 

 

var answer = ‘’;

「空の文字」を入れている。「別名:’’(空文字)」(そういうもんとして覚える)

・空文字:「文字列型の値で中身が空」

null:「null型」

 

<定義と初期化の違い>

定義「この変数使うから箱作ったよ!」=中身には何も入っていない(nullという値も入っていない)

初期化「定義と同時に値を最初に入れておく」こと

 

②ランダムな値を変数に入れる

ーーーーーーーーー

var rand = Math.floor(Math.random()*2);

ーーーーーーーーー

ランダム値を変数に一旦入れておく

 

③ランダムな値を判定して文字列を返事として入れる

ーーーー

if(rand){

Answer = ‘仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。’;

}else{

Answer = ‘仕事に決まってるだろ!’;

}

ーーーー

変数randには数値型で0,1が入っている。

それをif文で判定して、「if」または「else」の処理で文字列を入れる(どっちでもいい)

 

if文の判定結果は自動で変換(キャスト)される>

【前提】

if文の判定は「式」でなくともいい。

ーーーーー

(例①)

if(true){

}

 

(例②)

if(1){

}

 

(例③)

if(‘あいうえお’){

}

ーーーーー

↑このような形式でも良い。

つまり、jsでは「値を自動で使いたい型に変換する」という仕組みがある。

どのプログラミング言語も「型」があるので「キャスト」という仕組みがある。

 

キャスト型を変換すること

 

・勝手にプログラミング言語がキャストしてしまうのは「js」「PHP」くらい

→if文の()内であれば「true」「false」で判定をしたいから、勝手に「true」「false」の値に勝手に変換する

 

 

if(1)~ → if(true)~ と変換

if(‘あいうえお’)~ → if(true)~ と変換

→boolean型に変換さえすれば、if文は判定できる

 

※1.nullや数値の0や空文字、undefinedという値は「false

※2. 文字列の「0」や「あいう」などや数値の1は「true

→if(rand){

answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';

}else{

aswer = ‘仕事に決まってるだろ!’;

}

↑このように、if文の中に変数をぶっこんでも判定可となる。

『else』→「それ以外全て」という意味(条件に当てはまらない場合、必ず何かしらの処理をしたい時に使う)

>>「この場合、変数randtrueだった場合はこっちを処理して、それ以外だった場合はこっちの処理をする」という表しになる。

 

<ショートハンドで書こう>

ショートハンド「省略記法」

【書き方】

(判定式)? 何かしらの値A : 何かしらの値B;

(例)

answer = (rand)?'仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。' : '仕事に決まってるだろ!';

()内の判定式がtrueの場合に「何かしらの値A」が返され、falseなら「何かしらの値B」が返される。

(この場合、変数answerに、その値を入れてる)

 

<「if」「else if」「else」の組み合わせ>

ifで始まり

else ifを書き(複数OK

③最後にelse

という順番の決まりがある。

 

<リファクタして書く>

変数answerを定義時に初期化して、初期化時にランダム判定する方法

————————

var answer = (Math.floor(Math.random()*2)) ? '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。' : '仕事に決まってるだろ!';

 

console.log('彼女:仕事と私どっちを取るのよ!');

console.log('自分:' + answer);

 

if(answer === '仕事に決まってるだろ!'){

  console.log('彼女:あたたたたたたたっーーー!!');

  console.log('自分:ひでぶっ!!');

} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {

  console.log('彼女:仕事してこいやーーーーーー!!');

  console.log('自分:ひでぶっ!!');

}

————————

さらに、「連想配列」にしたスマートな書き方だと、、

————————

var CHOICE = {

YOUR: '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。',

  WORK: '仕事に決まってるだろ!'

};

var answer =(Math.floor(Math.random()*2))?CHOICE.YOUR : CHOICES.WORK;

 

console.log(‘彼女:仕事と私どっちとるのよ!’);

console.log(‘自分:’ + answer);

}

 

if(answer === CHOICE.WORK){

console.log(‘彼女:あたた!’);

}else if(answer === CHOICE.YOUR){
console.log(‘彼女:仕事してこいや!’);
}

console.log(‘自分:ヒデブ!’);

————————

・配列には「名前」を付けられる

連想配列{ }で囲った中にカンマで区切って値を入れる

・値には名前が付けられるので『名前: 値(:コロンで区切る)』

配列でもいいが、『CHOICE[0]』なんかで書いてしまうと、第三者がわかりにくいので「連想配列」で書く方が良い(この場合、『CHOICE.YOUR』)

js・jQuery【鬼練1~3】

【書き方(復習)】

⑴head内にscriptタグで囲って書く

⑵body内にscriptタグで囲って書く

⑶head,body内にscriptタグで書いて作ったjsファイルを読み込む

→基本は ⑶で書くのが当たり前

 

【鬼練1】

開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に「彼女:仕事と私どっちを取るのよ!」という文字をに表示する

【答え】

console.log('仕事と私どっち取るのよ!');

【解説】

文字列には

「''(シングルクウォート)」

「""(ダブルクウォート)」

で囲えば文字として判別してくれる(外すとエラーになる)

※基本は「シングルクウォート」を使う

 

【鬼練2】

開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に

「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる

その次に

「自分:◯◯◯」を表示させる。

◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。

変数answerには「仕事に決まってるだろ!」の文字列を入れておく。

変数answerの中身が「仕事に決まってるだろ!」だった場合には、

「彼女:あたたたたたたたっーーー!!」と

「自分:ひでぶっ!!」という文字を表示させる

 

【答え】

var answer ='仕事に決まってるだろ!';

console.log('彼女:仕事と私どっち取るのよ!');

console.log('自分:' + answer);

 

if(answer === '仕事に決まってるだろ!'){

console.log('彼女:あたたたたたたたっーーー!!');

console.log(自分:ひでぶっ!!);

}

 

【解説】

①変数answerの定義 

ーーー

var answer ='仕事に決まってるだろ!';

ーーー

箱(変数answer)を用意してその中に文字列(仕事に決まってるだろ!)を入れておく

※変数→箱(「⑴文字列」「⑵数値」「⑶種類(型)」なりが入れられる(⑵⑶が違う))

 

②文字列の連結でコンソールに表示

ーーー

console.log('自分:' + answer);

ーーー

・変数を用意したら2つのconsole.logで表示させる

・「+(プラス記号)」で文字列を「連結」させることができる

※この場合、文字列(「自分:」)と変数(answer)を連結させている

・半角スペースや改行はあってもなくても動く

 

③変数answerの中身をif文で判定する

ーーー

if(answer === '仕事に決まってるだろ!'){

console.log('彼女:あたたたたたたたっーーー!!');

console.log('自分:ひでぶっ!!');

}

ーーー

【書き方】

if(判定したい式を書く){

//「もし、〜なら」の場合に当てはまった時に実行したい処理を書く

}

 

・jsやPHPでは「==」「!=」は使わないようにする

・「===」「!==」→『厳密比較』という(値の「型」も同じかどうか?まで判定される)

※この場合、『変数answer(の中身)と文字列「仕事に決まってるだろ!」が同じ場合』という意味になる

※左辺右辺も同じ「仕事に決まってるだろ!」という値なので『型も値も同じ』になる

 

→判定結果は「true」「false」のboolean型で返ってくる

これを踏まえて・・・↓

if(true){

console.log('彼女:あたたたたたたたっーーー!!);

console.log('自分:ひでぶっ!!');

}

に変わる(内部的に変わっていて、目に見えるわけではない)

 

さらにif文は、、

判定式内が「true」の時に「{ }(波括弧)」内の処理を行う

という決まりがある

 

【鬼練3】

開発ツール(デベロッパーツール)の「console(コンソール)」タブ内に

「彼女:仕事と私どっちを取るのよ!」という文字をに表示させる

その次に

「自分:◯◯◯」を表示させる。

◯◯◯は変数(変数answerとする)にしておき、その変数の中身を表示させる。

変数answerには「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」の文字列を入れておく。

変数answerの中身が「仕事に決まってるだろ!」だった場合には、

「彼女:あたたたたたたたっーーー!!」と

「自分:ひでぶっ!!」という文字を表示させる

変数answerの中身が「仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。」だった場合には、

「彼女:仕事してこいやーーーーーー!!」と

「自分:ひでぶっ!!」という文字を表示させる

 

【答え】

var answer = '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。';

console.log('彼女:仕事と私どっちを取るのよ!');
console.log('自分:' + answer);

if(answer === '仕事に決まってるだろ!'){
console.log('彼女:あたたたたたたたっーーー!!');
console.log('自分:ひでぶっ!!');
} else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}

 

【解説】

else if (answer === '仕事よりも君が大事さ。仕事はもう嫌で嫌で嫌で。。嫌で嫌で嫌で。。ほんと嫌なんだ。') {
console.log('彼女:仕事してこいやーーーーーー!!');
console.log('自分:ひでぶっ!!');
}

 

「else if(エルスイフ)文」

<書き方>

if(判定式){

//処理いろいろ1

}else if(判定式){

//処理いろいろ2

}

 

条件を複数に分けられる

→「もし、〜だった時にこの処理をして、もし◯◯だった時にはこっちの処理をする」

※「else」「if」には半角スペースを入れる

 

フォームチェック作成 (メモ)

jsファイル

------------------

$(function(){

const MSG_TEXT_MAX = '20文字以内で入力して下さい。';

const MSG_EMPITY ='入力必須です。';

const MSG_EMAIL_TYPE = 'emailの形式ではありません。';

const MSG_TEXTAREA_MAX ='100文字以内で入力してください。';

}

 

$(".valid-text").keyup(function(){

 

var form_g = $(this).closest('.form-group');

 

if($(this).val().length > 20){

form_g.removeClass('has-success').addClass('has-error');

form_g.find('.help-block').text(MSG_TEXT_MAX);

}else{

form_g.removeClass('has-error').addClass('has-success');

form_g.find('.help-block').text('');

}

});

 

$(".valid-email").keyup(function(){

 

var form_g = $(this).closest('form-group');

 

if($(this).val().length === 0 ){

form_g.removeClass('has-success').addClass('has-error');

form_g.find('.help-block').text(MSG_EMPTY);

}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/)){

form_g.removeClass('has-sucess').addClass('has-error');

form_g.find('help-block').text(MSG_EMAIL_TYPE);

}else{

form_g.removeClass("has-error").addClass('has-success');

form_g.find('.help-block').text('');

}

});

------------------

 解説

・入力フォームの内容をチェックするにはjQueryを使って「バリデーション機能」を作る

・バリデーションを行うには、各フォームに対して「キーが入力されたら〜」というイベントをセットしてあげる

・イベントが発生した時には、if文を使って入力文字数などのチェックしてエラーの場合にはエラーメッセージを表示させる

 

------------------定数ボックス------------------

$(function(){

const MSG_TEXT_MAX = '20文字以内で入力してください。';

const MSG_EMPITY ='入力必須です。';

const MSG_EMAIL_TYPE ='emailの形式ではありません。';

const MSG_TEXTAREA_MAX ='100文字以内で入力してください。';

ーーーーーーー

定数⇨値を入れる箱(一回書いたら中身を書き換えられない)

書き方)const 〜(基本は大文字)

・エラーメッセージとして表示させる定数 

 

------------------イベント1:名前入力フォーム-----------------

$(".valid-text").keyup(function(){

var form_g = $(this).closest('.form-group');

if($(this).val().length > 20 ){

form_g.removeClass("has-success").addClass('has-error');

form_g.find('.help-block').text(MSG_TSXT_MAX);

}else{

form_g.removeClass('has-error').addClass('has-success');

form_g.find('.help-block').text('');

ーーーーーーー

クラス属性が「valid-text」のものにキーアップイベントを指定⇨function以下の処理が実行

・(this) ⇨ 名前入力フォーム(".valid-text"を指す)

・.closest⇨自分以上の親の要素且つ()の中で指定したものを取得

(今回の場合、名前フォームから見て親要素(form-group))

 

・length > 20 ){ ⇨文字数20文字を超えた場合

 

・form_g.removeClass('has-success').addClass('has-error');

⇨ そのノード(要素)に付いてるclass属性「has-success」を削除し、class属性「has-error」を追加

 

・form_g.find('.help-block').text(MSG_TEXT_MAX);

 ⇨ class属性「help-block」を探し、そのタグの中のテキストを「MSG_TEXT_MAX」へ書き換える

 

※find ⇨ 子以下の要素の中で()のものを探す意味合い(この場合"helpーblock")

 

・}else{ ⇨20文字以内の場合

 

・form_g.removeClass('has-error').addClass('has-success');

⇨ノードに対して付いているクラス属性を削除

 

・form_g.find('.help-block').text('');

⇨class属性help-blockを探して「空」にする

 

【まとめ】

名前入力フォームにキーがある度に、入力された文字数が20文字以上かどうかを判定し、

<20文字以上の場合>

class属性「form-group」にclass属性「has-error」を追加し、

class属性「help-block」がついた要素の中にエラーメッセージを表示させる。

<20文字以内の場合>

「form-group」の「has-error」を削除し、「has-success」を追加し、何も表示させない。

------------------イベント2:emailフォーム-----------------

$(".valid-email").keyup(function(){

 

var form_g = $(this).closest('.form-group');

 

if($(this).val().length === 0 ){

form_g.removeClass('has-success').addClass('has-error');

form_g.find('.help-block').text(MSG_EMPTY);

}else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) ){

form_g.removeClass('has-success').addClass('has-error');

form_g.find('help-block').text(MSG_EMAIL_TYPE);

 

}else{

form_g.removeClass('has-error').addClass('has-success');

form_g.find('.help-block').text('');

}

});

ーーーーーーー

!$(this).val().match(/^([a-zA-Z0-9]))+([a-zA-Z0-9\._-])*@([a-zA-Z0-9\._-]+)+$/) )

⇨『正規表現

 

正規表現

文字列のルールを決めて、そのルールに当てはまるかをチェックする書き方(ルールの書き方)

(この場合はEメール形式かどうか確認している)

jQueryの場合、「.match」を使う

(例)$('p').val().match(/^(/^AAA/)

・文字列の先頭がAAAで始まってるかどうかを確認

 ⇨正しいか否かをチェックできる

 

※「正規表現 email」「正規表現 TEL」などで調べて使うようにする

 

・入力文字数が50文字を超えた場合、またはEメール形式ではない場合、{ }の処理を実行

 

cssファイル

------------------

/*バリデーション*/

.help-block{

font-size: 14px;

margin-left: 10px;

}

/*エラー時*/

.has-error input,has-error textarea{

border: 1px solid #ff4ddb;

}

.has-error .help-block,.has-error label{

color: #ff4d4b;

}

/*サクセス時*/

.has-success input,.has-success textarea{

border: 1px solid #2fb4ce;

}

.has-success .help-block,.has-success label{

color: #2fb4ce;

}

 

・クラス名「has-error」がついた段階でCSSで指定されているものに内容が変わる。

⇨文字色が赤くなり、枠線も赤くなる

・20文字以上の場合、「has-error」というクラス名がつく

 ・20文字以内の場合、クラス名「has-success」がつき、文字色と枠線が青くなる

 

【まとめ】

jQuery:判定内容でクラス名を書き換える

CSS:書き換えたクラス名の「見た目(スタイル)」を定義

正規表現:文字列がある形式に沿っているかどうかチェック

 

jQuery

jQuery

javascriptのライブラリ(工作キット)

簡単に書けるツール

 

jQueryを使う方法>

jQueryのファイルを作成

⑵headタグ内にjQueryコードを記述

 

jQueryの書き方>

$(function(){

//処理をここに書く

});

 

処理⇨$('セレクター').メソッド(引数);

              ↑要素選択       ↑何かを行う

 

(例)

$(function(){

//$('p').click(function(){

$(this).css('color','red;').fadeOut();

});

});

 

$(function(){

//$('p').click(function(){ ⇨p要素が「クリック」された時、functionを実行する

 

$(this) ⇨自身=p要素のこと

.css('color','red').fadeOut(); ⇨文字色を赤に変えて、ゆっくり消える

---------------------

 

jQueryの便利な点>

・チェインメソッドが使える

(※チェインメソッド⇨メソッドを要素に対して、いくつも繋げられる)

・複雑な処理を実行できる