javascript&jqueryチートシート(今期よく使っている構文などなどまとめ)

よく使っている気がするものを雑多にまとめました。

javascript

変数 | values

グローバル変数

var hoge = ''; // ES2015から非推奨、さようならvar...
let hoge = ''; // グローバルスコープに書く！

ローカル変数

let hoge = '';

配列 | array

宣言

let hoge = ['apple', 10, 20, true];
console.log(hoge[0]); // apple

末尾に追加

hoge.push('grape'); // [ 'apple', 10, 20, true, 'grape' ]
console.log(hoge);

削除 (番目から, いくつ)

hoge.splice(0, 1);
console.log(hoge); // [ 10, 20, true, 'grape' ]

hoge.splice(2, 1);
console.log(hoge); // [ 10, 20, 'grape' ]

オブジェクト | object

連想配列的な

連想配列のような形としても扱える

let hoge = {'red':'apple', 'yellow':'banana', 'blue':'grape'};
console.log(hoge['red']); // apple
console.log(hoge['blue']); // grape

クラスのような

プロパティと関数を一緒に持ってクラスのようなオブジェクト

let hoge = {
  age: 23,
  name: 'yasuaki',
  showAge: function(){
    console.log(this.age + "才です。");
  },
  showName: function(){
    console.log("名前は" + this.name + "です。");
  }
};

hoge.showAge(); // 23才です。
hoge.showName(); // 名前はyasuakiです。

ちゃんとしたクラス

ES2015から導入されているらしい。

class Hoge {
  constructor(age, name) {
    this.age = age;
    this.name = name;
  }

  showAge() {
    console.log(this.age + "才です。");
  }

  showName() {
    console.log("名前は" + this.name + "です。");
  }
}

const hoge = new Hoge(23, "yasuaki");
hoge.showAge(); // "23才です。"
hoge.showName(); // "名前はyasuakiです。"

const hoge2 = new Hoge(18, "tarou");
hoge2.showAge(); // "18才です。"
hoge2.showName(); // "名前はtarouです。"

オブジェクト配列

let hoge =[
  {age: 20, name:'tarou'},
  {age: 21, name:'hanako'},
  {age: 28, name:'yasuaki'}
];
console.log(hoge[1].name); // hanako
console.log(hoge[2].age); // 28

ループ | for or while

for

for(let i = 0; i < 10; i++) {
  console.log("hello" + i); // hello0 ～ hello9
}

while

let i = 0;
while(i < 10){
  console.log("hello" + i); // hello0 ～ hello9
  i++;
}

制御 | if or switch

三項演算子

let i = 0;
let hoge = i == 0 ? 'true!!!' : 'false!!!';
console.log(hoge); // true!!!

if

let i = 0;
let output = '';
if (i == 1) {
  output = 'aaa';
} else {
  output = 'bbb';
}
console.log(output); // bbb

if (i == 2) {
  output = 'aaa';
} else if (i == 0) {
  output = 'bbb';
} else {
  output = 'ccc';
}
console.log(output); // bbb

switch

let hoge = "bar";
let output = '';
switch(hoge) {
  case "foo":
    output = 'test1';
    break;
  case "bar":
    output = 'test2';
    break;
  case "hoge":
    output = 'test3';
    break;
}
console.log(output); // test2

その他関数

トリムする

let hoge = 'aaa ';
hoge = hoge.trim();
console.log(hoge); // 'aaa'

分割する

  let test = 'foo,bar,zoo';
  test = test.split(',');
  console.log(test); // 配列になる => [ 'foo', 'bar', 'zoo' ]

WebStorage

容量は1オリジン 5MBまで

// セッションストレージはページを閉じるまで
// データの保存
sessionStorge.setItem("キー","値");

// データの取得
sessionStorge.getItem("キー");

// データの削除
sessionStorge.removeItem("キー");

// ローカルストレージは永続的に有効
// データの保存
localStorage.setItem("キー","値");

// データの取得
localStorage.getItem("キー");

// データの削除
localStorage.removeItem("キー");

参考1
参考2

ES2015について

[ES2015 (ES6)についてのまとめ](https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727,'ES2015 (ES6)についてのまとめ')

対応状況下記、赤が非対応で緑が対応済らしい。IE10以前の場合はいろいろ問題がありそう。
ECMAScript6 compatibility table

未対応ブラウザについてはbabelを使うこと・・・
Babelで始める！モダンJavaScript開発

jquery

CDN

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

ajax (3系)

$.ajax({
  type: 'POST',
  url:'hoge.php',
  dataType: "json",
  data: {mode:'insert', jsonobj:JSON.stringify(select_data)} // json形式でデータポスト
}).done(function(data, textStatus, jqXHR){
  console.log("成功");
}).fail(function(jqXHR, textStatus, errorThrown){
  console.log("失敗");
}).always(function(){
  console.log("処理が終わるとここ通る");
});

表示・非表示

$(".hoge").show(); // 表示
$(".hoge").hide(); // 非表示 (display:none にする)

チェックボックスの状態

状態取得

if($(".hoge").prop("checked")){
  console.log("チェックあり");
} else {
  console.log("チェックなし");
}

つける : はずす

$(".hoge").prop("checked", true);
$(".hoge").prop("checked", false);

nameでチェックされている値取得

$("input[name='hoge']:checked").val() 

テキストエリア等の活性・非活性

状態取得

if ($('.hoge').prop('disabled')) {
  console.log("非活性");
} else {
  console.log("活;性");
}

つける : はずす

$(".hoge").prop("disabled", true);
$(".hoge").prop("disabled", false);

スタイル変更

$(".hoge").css("color", "red");

属性追加

$(".hoge").attr("data", "party!people!!"); // data="party!people!!"がタグに追加される

セレクター

セレクトボックス

// 選んだoptionのvalue
$("#hoge option:selected").val();
// 選んだoptionのtext
$("#hoge option:selected").text();

親がみたい！

$(".hoge").parent().css('background', 'red'); // 親の親は $(".hoge").parent().parent() みたいな感じで上の階層を見れる

子要素を文字列で検索して！

$(".hoge").find(".search").css('background', 'red');

each

子要素が複数取得できるときにループ

$(".hoge tbody tr").each(function(idx){ // idxは要素番号
  $(this).html();
});