カテゴリー: jQuery

投稿日:

＄（）関数

jQueryを学ぶ上で一番最初に覚えるべき関数$()

$()は、jQueryオブジェクトを生成する関数です。
（私個人の理解で説明なので、厳密性に欠ける部分は目をつぶってください。また、htmlならびにcssの知識があることが前提になります。できれば、javascriptならびにXMLのDOMなんか知ってるとなお良いです。DOM知ってる人なら今回のjQuery関数は理解しやすいでしょう。）

$()関数は、HTMLで記載されているWEBページの一部分を抽出する関数です。少し言葉を変えて言い直すと、<html>….</html>タグの一部を抽出する関数です。

たとえば、下記の一行目に記載のjQuery文は、文字の色を黄色にするCSS属性を付加する命令です。$(‘#IroY’)の部分が今回注目する部分になります。$(‘#IroY’)は、id=”IroY”属性が付与されているタグが抽出されます。
$(‘.Iro’)なら、class=”Iro”属性が付与されているタグが抽出されます。
cssの決まりで、Id属性で指定されたタグは１個しかありませんが、class属性なら複数のタグが抽出されます。

jQuery例

$('#IroY).css('color', 'yellow');
$('.Iro').css('color', 'white');

今回の説明で実際に利用したファイルです。特に、sample.htmlとmain.jsファイルの色の付いている部分を良くみてください。$()で抽出されるところに色をつけてみました。

今回利用したサンプルのファイル構成

ルートフォルダ
 │ sample.html
 │ （↑　作成してください）
 ├─cssファオルダ
 │ normalize.css
 │（↑　http://necolas.github.io/normalize.css/ よりダウンロード　おまじない）
 │ sample.css
 │（↑　作成してください）
 └─jsフォルダ
 │ main.js
 │（↑　作成してください）
 └─vendorフォルダ
　（↑　jQueryライブラリ）
   jquery-1.10.2.min.js
　（↑　http://jquery.com/サイトからダウンロード）
   jquery-ui-1.10.3.custom.min.js
　（↑　http://jquery.com/サイトからダウンロード）

sample.html

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>jQuery</title>
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/sample.css">
  <script src="./js/vendor/jquery-1.10.2.min.js"></script>
  <script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
  <script src="./js/main.js"></script>
</head>
<body>
  <p class="Iro">jQuery Sample</p>
  <p class="Iro">jQuery Sample</p>
  <p id="IroY">jQuery Sample</p>
  <p class="Iro">jQuery Sample</p>
</body>
</html>

main.js

$( function() {
$('.Iro').css('color', 'white');
});
$( function() {
$('#IroY').css('color', 'yellow');
});

sample.css

body {
  background-color: yellowgreen;
}
p {
  margin:10px;
  padding: 0px;
  text-align: center;
  font-size: 40pt;
  border-color: black;
  border-width: 3px;
  border-style: solid;
}

https://ktamago.wp.xdomain.jp/2017/11/14/＄（）関数　その２/

投稿日:

eachメソッド

jQuery勉強中。

eachメソッドとfunction（i）について

上記の変数iは０から始まり、0,1,2,3…と増える。

下記のコード例だと、$slidesオブジェクト（実は、画像３枚表示するための、<img>タグの集合）の数（ここでは<img>タグの数である３個）分繰り返し実行される。そのため、iは、０，１，２となってfunction(i)｛｝の｛｝内の処理が繰り返される。

// 各スライドの位置を決定し、
// 対応するインジケーターのアンカーを生成
$slides.each(function (i) {
$(this).css({ left: 100 * i + '%' });
indicatorHTML += '<a href="#"> + 'i' + </a>';
});

処理が完了すると、indicatorHTML変数には、以下の文字列が代入される（ここでは見やすいように改行していますが、実際は改行は無し。）

<a href="#">0</a>
<a href="#">1</a>
<a href="#">2</a>

 

投稿日:

Javascriptのfunction()でちょっと実験

javascriptのfunction()とreturn値について、ちょっと実験。()をつけたりつけなかったりで、return値がどうなるのか実験しました。

そもそものなぜ実験したのか

こんなコードを発見しました。関数定義のコードの最後に（）；がついてますが、必要性がいまいちわかりませんでした。

var getCode = (function(){
 var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード

 return function () {
  return secureCode;
 };
})();

最後の「（）」がなぜ必要なのか？と言うことで、関数の最後に（）をつけるとreturn値がどう変化するのか実験しました。

実験に使ったコード

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>function test</title>
 </head>
 <body>
  <script>
  console.log("function test");
  var getCode = (function(){
   var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード
   return function () {
   return secureCode;
   };
  });　// ()無しで実験用コードを記載

  // シークレットコードを返す
  console.log("0:", getCode);
  console.log("1:", getCode());
  console.log("2:", getCode()());
  //console.log("3:", getCode()()()); error
  </script>
 </body>
 </html>

出力結果

ブラウザの開発者コンソールの出力結果です。
０：は、getcode変数の中味を出力。コメント、改行位置も含めて、変数に代入した文字列がそのまま出力されてます。
１：getcode()として出力。（）をつけました。関数内（外部関数内）で定義した関数（内部関数の定義）がそのまま出力されています。ここでは外部関数のreturn値が返ってきてます。
２：getcode()()として出力。()()をつけました。期待するreturn値になってます。return値で返ってきた関数のその又return値になってます。ここでは内部関数のreturn値が返ってきています。

function test
0: ƒ (){
 var secureCode = "0]Eal(eh&2"; // 外部の関数が変更できないようにしたいコード
 return function () {
 return secureCode;
 };
}
1: ƒ () {
 return secureCode;
 }
2: 0]Eal(eh&2

ようするに、()を書くと、returnに書かれた内容を返すと言うことです。当たり前ですね。
()をつけるとreturnに書かれた内容が返される、
()()とするとreturnに書かれた内容の（関数）のrerurn値が返されます。
ちなみに()()()とするとエラーになりました。すなわち、関数じゃないものに()をつけるとエラーになります。