JavaScriptとjQueryの簡単な操作

ちょっとしたものを書くとき毎回どうやるっけ？ってなるのでメモ

jQueryを使うための初期設定

下のどれか一つだけでいい

• http://jquery.com/ 本家からjsファイルをダウンロードしたやつを読み込む
• http://code.jquery.com/ jqueryのCDNサービスからリンクを指定する
• https://developers.google.com/speed/libraries/ googleが提供しているCDNサービスからリンクを指定する
• https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview microsoftが提供しているCDNサービスからリンクを指定する

jQueryのCDNからのパス指定

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>

googleのCDNからのパス指定

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

microsoftのCDNからのパス指定

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.min.js"></script>

JavaScript、jQueryの簡単な操作

JavaScriptでのid,class,テキストの操作
こっちはJavaScriptとjQueryがよくごっちゃになるのでメモ
JavaScriptでgetElementById(“#div-**”)とかやってうまくいかず、あれ？ってなる

HTML

<div id="div-id" class="div-class">hoge</div>
<input id="input-id" class="input-class" value="input-value">
<textarea id="textarea-id" class="textarea-class">piyo</textarea>

JavaScript

window.onload = function(){
  // JavaScript
  // divタグのテキストを取りたい
  // id属性の場合
  var text1 = document.getElementById("div-id").textContent;
  // class属性の場合
  var text2 = document.getElementsByClassName("div-class")[0].textContent

  //divタグのテキストに渡したい
  // id属性の場合
  document.getElementById("div-id").textContent = text1;
  // class属性の場合
  document.getElementsByClassName("div-class")[0].textContent = text2


  // inputタグのvalueを取りたい
  // id属性の場合
  var value1 = document.getElementById("input-id").value;
  // class属性の場合
  var value2 = document.getElementsByClassName("input-class")[0].value;

  // inputタグのvalueに渡したい
  // id属性の場合
  document.getElementById("input-id").value = value1;
  // class属性の場合
  document.getElementsByClassName("input-class")[0].value = value2;


  // textareaのテキストを取りたい
  // id属性の場合
  var textarea1 = document.getElementById("textarea-id").value;
  // class属性の場合
  var textarea2 = document.getElementsByClassName("textarea-class")[0].value;

  // textareaのテキストに渡したい
  // id属性の場合
  document.getElementById("textarea-id").value = value1;
  // class属性の場合
  document.getElementsByClassName("textarea-class")[0].value = value2;
}

jQuery

$(function(){
  // jQuery
  // divタグのテキストを取りたい
  // id属性の場合
  var text1 = $("#div-id").text();
  // class属性の場合
  var text2 = $(".div-class").text();

  // divタグのテキストに渡したい
  // id属性の場合
  $("#div-id").text(text1);
  // class属性の場合
  $(".div-class").text(text2); // 同じclass属性すべてに渡す
  $(".div-class").eq(0).text(text2); // 1番目のclass属性に渡す(0番目から)
  $(".div-class:nth-child(1)").text(text2); // 1番目のclass属性に渡す(1番目から)


  // inputのvalueを取りたい
  // id属性の場合
  var value1 = $("#input-id").val();
  // class属性の場合
  var value2 = $(".input-class").val();

  // inputのvalueに渡したい
  // id属性の場合
  $("#input-id").val(value1);
  // class属性の場合
  $(".input-class").val(value2);


  // テキストエリアのテキストを取得したい
  // id属性の場合
  var textarea1 = $("#textarea-id").val();
  // class属性の場合
  var textarea2 = $(".textarea-class").val();

  // テキストエリアのテキストに渡したい
  // id属性の場合
  $("#textarea-id").val(textarea1);
  // class属性の場合
  $(".textarea-class").val(textarea2);
});