好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

jQueryのセレクター指定

要素セレクタ
# idセレクタ
. クラスセレクタ
セレクター 子セレクタ 子孫セレクタ
* ユニバーサルセレクタ
セレクター1,セレクター2 グループセレクタ
親要素>子要素 セレクタ
セレクター+要素 隣接セレクタ 特定の要素の次に出現する要素を指定
セレクター:first-child first-child擬似クラス 長子
セレクター~要素 間接セレクタ 特定に要素の後に出現する要素を指定
セレクター:not(条件) 否定擬似クラス 条件以外のセレクタ
セレクター:empty empty擬似クラス テキストを持たない要素を指定
セレクター:nth-child(番目) nth-child擬似クラス 番号には「even」、「odd」、「Xn」(X=任意値)も可
セレクター:last-child last-child擬似クラス 末っ子
セレクター:only-child only-child擬似クラス 一人っ子
セレクター:nth-last-child nth-last-child擬似クラス 後ろからN番目
セレクター:nth-of-type nth-of-type擬似クラス 「nth-of-child」ではない。「N番目の要素が指定セレクターだったら」
セレクター:nth-last-of-type nth-last-of-type擬似クラス 後ろからN番目
セレクター:first-of-type first-of-type擬似クラス
セレクター:last-of-type last-of-type擬似クラス
セレクター:only-of-type only-of-type擬似セレクタ 指定セレクターが孤独だったら
:lang(言語-地域) lang擬似セレクタ

子孫セレクター、「こまごセレクター」だと思ってたわー。
子孫セレクターと子セレクターの違いがわからん。
セレクターは要素同士でしか使えない、とかなのかしらん?

それと、HTMLにlang属性があるって初めて知ったのだけれど、
下記サイトによるとlangはほぼ利用価値のない属性のようです。
Google「言語指定にlangは使うな」/公式発言

JavaScriptの勉強に使えるサイト

このサイト、かなり使える!めっちゃ参考になる!
rfs.jp

JavaScriptのデータ型

型宣言のいらないJavaScriptだけど、データ自体にはデータ型があるようで。
10進数、8進数、16進数、浮動小数、論理値、文字列、未定義、NULL。
data.js>|javascript|

|

JavaScriptのイベントハンドラ

9つだけなんだ!全部、"on"で始まるんだね。

JavaScriptのデータ型

型宣言のいらないJavaScriptだけど、データ自体にはデータ型があるようで。

  1. 10進数
  2. 8進数
  3. 16進数
  4. 浮動小数
  5. 論理値
  6. 文字列
  7. 未定義
  8. NULL
<!--
var int10 = 10; // Integer 10進数
var int08 = 010; // Integer 8進数
var int16 = 0x10; // Integer 16進数

var float = 10.10; // Float

var bool_t = true; // Boolean true;
var bool_f = false; // Boolean false;

var string_double = "This is 'JavaScript'."; // String
var string_single = 'This is "JavaScript".'; // String

var unknown; // Undefined

var n = null; // Null

console.log(int10);
console.log(int08);
console.log(int16);
console.log(float);
console.log(bool_t);
console.log(bool_f);
if (bool_t == 1) {
  console.log(bool_t +" == 1");
}
if (bool_f == 0) {
  console.log(bool_f +" == 0");
}
console.log(string_double);
console.log(string_single);
console.log(unknown);
console.log(n);
if (n != 0) {
  console.log(n +" != 0");
}
console.log("but, n*10 == " + n*10);
-->

f:id:Sukinakoto:20170816215955p:plain

JavaScriptのTYPE属性を書くか書かないか

HTML5以降はscript要素のTYPE属性はデフォルトが"text/javascript"なのであえて書く必要はないそうです。

でも、私はこういう時は念のために書いておく派。

あと5年も経てば書かなくなるかな。

MacでのSafariの開発者ツール(Webインスペクタ)の使い方

WindowsIEだとF12キーを押すと出てくる開発者ツール。
あれをMacSafariだとどう出すのか調べました。

目次

Safariの開発メニューを表示するように設定する

Safariの環境設定を開く。
f:id:Sukinakoto:20170816141600p:plain

「メニューバーに"開発"メニューを表示」にチェックを入れて、環境設定ウィンドウを閉じる。
f:id:Sukinakoto:20170816141801p:plain

Webインスペクタを開く

Webインスペクタで見たい画面をSafariで開きます。
今回は、自端末に保存したhtmlファイルを選びました。
f:id:Sukinakoto:20170816150842p:plain

Safariの"開発"メニューから「Webインスペクタを接続」をクリック。
f:id:Sukinakoto:20170816151130p:plain

Webインスペクタが開きました。
f:id:Sukinakoto:20170816152216p:plain

WebインスペクタでJavaScriptデバッグする

リソースタブを開き、左側のサイドバーでjsファイルを選びます。
f:id:Sukinakoto:20170816180707p:plain

デバッグしたい行をクリックしてブレークポイントを設定します。
f:id:Sukinakoto:20170816151227p:plain

Webページをリロードするなどしてブレークポイントを置いた関数を実行すると、Webインスペクタは自動的にデバッガタブを開きます。
f:id:Sukinakoto:20170816151246p:plain

右端のサイドバーボタンをクリックすると、
f:id:Sukinakoto:20170816151323p:plain
変数の値を確認できます。
f:id:Sukinakoto:20170816151416p:plain

 参考サイト

d.hatena.ne.jp