JavaScript 備忘録

ドキュメントオブジェクトを操作するモデルをDOM(Document Object Model)と呼びます。
JavaScriptでは、オブジェクトのメンバーをプロパティと呼びます。Javaにおけるフィールドやメソッドに対応します。

 

 

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<script type="text/javascript" charset="utf-8" src="./js/module.js"></script>
</body>
</html>
 

let_var.html

<html>
<body>
<script>
function printx() {
  let x = 0;
  document.body.innerHTML += x + "<br>";
  {
    let x = 1;
    document.body.innerHTML += x + "<br>";
  }
  document.body.innerHTML += x + "<br>";
}
printx();
</script>
<script>
function printy() {
  var y = 0;
  document.body.innerHTML += y + "<br>";
  {
    var y = 1;
    document.body.innerHTML += y + "<br>";
  }
  document.body.innerHTML += y + "<br>";
}
printy();
</script>
</body> 
</html>
 

表示

 

write.html

<html>
<body>
<script>
alert("Hello!");
console.log("Hello!");
document.write("Hello!" + "<br>");
document.body.innerHTML += "Hello!" + "<br>";
document.body.insertAdjacentHTML("afterbegin", "aaaaa" + "<br>");
document.body.insertAdjacentHTML("beforeend", "bbbbb" + "<br>");
</script>
</body>
</html>
 

テキストノードへの書き込み

 

text.html

<html>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<script>
document.querySelector("#div1").innerHTML = "<p>Hello!</p>";
document.querySelector("#div2").innerText = "<p>Hello!</p>"; //非推奨
document.querySelector("#div3").textContent = "<p>Hello!</p>";
</script>
</body>
</html>
 

input要素

 

input.html

<html>
<body>
<input type="button" onclick="writeOK('#input');" value="書き込みOK">
<input type="button" onclick="writeNG('#input');" value="書き込みNG">
<input type="text" id="input" placeholder="入力してください!" readonly>
<input type="search" name="key">
<input type="submit" name="key" value="送信">
<input type="password" value="xxxxxxxxxx">
<input type="time" value="00:00:00">
<br>
<data value="data">data</data>
<br>
<textarea rows="10" cols="50"></textarea>
<script>
function writeOK(id) {
  document.querySelector(id).readOnly = false;
}
function writeNG(id) {
  document.querySelector(id).readOnly = true;
}
</script>
</body>
</html>
 

onclick

 

onclick.html

<html>
<body>
<input type="button" value="OK" onclick="$echo('#input', '#output');">
<input type="text" id="input">
<output id="output"></output>
<script>
function $echo(input, output) {
  document.querySelector(output).innerHTML = document.querySelector(input).value;
}
</script>
</body>
</html>
 

onchange

 

onchange.html

<html>
<body>
<input type="checkbox" onchange="$echo('#input', '#output');">
<input type="text" id="input">
<output id="output"></output>
<script>
function $echo(input, output) {
  document.querySelector(output).innerHTML = document.querySelector(input).value;
}
</script>
</body>
</html>
 

 

createElement.html

<html>
<body>
<script>
var button = document.createElement("button");
button.id = "OK";
button.innerHTML = "OK";
button.onclick = function () {
  document.querySelector("#output").innerHTML = document.querySelector("#input").value;
};
/*
button.addEventListener("click", function () {
  document.querySelector("#output").innerHTML = document.querySelector("#input").value;
});
*/
document.body.appendChild(button);
var input = document.createElement("input");
input.id = "input";
input.type = "text";
document.body.appendChild(input);
var output = document.createElement("output");
output.id = "output";
document.body.appendChild(output);
</script>
</body>
</html>
 

要素の選択

 

getElementById.html

<html>
<body>
<form>
<input type="text" id="text1">
<input type="text" id="text2">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
document.getElementById("text1").value = "Hello1!";
document.body.insertAdjacentHTML("beforeend", document.getElementById("text1").value);
$("#text2").val("Hello2!");
document.body.insertAdjacentHTML("beforeend", $("#text2").val());
</script>
</body>
</html>
 

JSON.parse() と JSON.stringify()

JSON.parse():JSONの文字列 → JavaScriptのオブジェクト
JSON.stringify():JavaScriptのオブジェクト → JSONの文字列

 

json.html

<html>
<body>
<script>
var object = {};
//var object = new Object();
//object.key0 = "value0";
//object.key1 = "value1";
//object.key2 = "value2";
object["key0"] = "value0";
object["key1"] = "value1";
object["key2"] = "value2";
document.body.innerHTML += JSON.stringify(object) + "<br>";
document.body.innerHTML += JSON.stringify({key0:"value0", key1:"value1", key2:"value2"}) + "<br>";
for (var key in object) {
  document.body.innerHTML += key + ":" + object[key] + "<br>";
}
document.body.innerHTML += JSON.stringify({key0:0, key1:"value1", key2:[0, 1, 2]}) + "<br>";
var json = '{"key0":0, "key1":"value1", "key2":[0, 1, 2]}';
var obj = JSON.parse(json);
document.body.innerHTML += obj["key0"] + "<br>";
document.body.innerHTML += obj["key1"] + "<br>";
document.body.innerHTML += obj["key2"] + "<br>";
</script>
</body>
</html>
 

 

array.html

<html>
<body>
<script>
var array = [];
array[0] = "a1";
array[1] = "a1";
array[2] = "a2";
//var array = new Array();
//array.push("a0");
//array.push("a1");
//array.push("a2");
//array.pop();
document.write(JSON.stringify(array) + "<br>");
for (var index in array) {
  document.write(index + ":" + array[index] + "<br>");
}
</script>
</body>
</html>
 

 

function_with_index.html (インデクス付関数)

<html>
<body>
<script>
var dispatch = {};
dispatch["abcde"] = function () {document.write("<p>abcde</p>");};
dispatch["fghij"] = function () {document.write("<p>fghij</p>");};
dispatch["klmno"] = function () {document.write("<p>klmno</p>");};
</script>
<script>
dispatch["abcde"]();
dispatch["fghij"]();
dispatch["klmno"]();
</script>
</body>
</html>
 

オブジェクト指向プログラミング

以下のプログラムの中で、関数Robotからnewで生成されたrobotはオブジェクトの参照を表わします。

robot1.html

<html>
<body>
<script>
function Robot(x, y) {
  this.x = x; // -> public
  this.y = y; // -> public
  this.move = function (dx, dy) {
    this.x += dx;
    this.y += dy;
  }
  this.show = function () {
    document.write("x = " + this.x + "<br>");
    document.write("y = " + this.y + "<br>");
  }
}
</script>
<script>
var robot = new Robot(0, 0);
robot.move(1, 1);
robot.show();
document.write("x = " + robot.x + "<br>");
document.write("y = " + robot.y + "<br>");
</script>
<script>
function f(robot) {
  robot.x = 2;
  robot.y = 2;
}
f(robot);
robot.show();
</script>
</body>
</html>
 

 

robot2.html

<html>
<body>
<script>
function Robot(x, y) {
  var x = x; // -> private
  var y = y; // -> private
  this.move = function (dx, dy) {
    x += dx;
    y += dy;
  }
  this.show = function () {
    document.write("x = " + x + "<br>");
    document.write("y = " + y + "<br>");
  }
}
</script>
<script>
var robot = new Robot(0, 0);
robot.move(1, 1);
robot.show();
document.write("x = " + robot.x + "<br>"); // -> x = undefined
document.write("y = " + robot.y + "<br>"); // -> y = undefined
</script>
</body>
</html>
 

 

robot3.html

<html>
<body>
<script>
function Robot(x, y) {
  this.x = x; // -> public
  this.y = y; // -> public
}
Robot.prototype.move = function (dx, dy) {
  this.x += dx;
  this.y += dy;
};
Robot.prototype.show = function () {
  document.write("x = " + this.x + "<br>");
  document.write("y = " + this.y + "<br>");
};
</script>
<script>
var robot = new Robot(0, 0);
robot.move(1, 1);
robot.show();
document.write("x = " + robot.x + "<br>");
document.write("y = " + robot.y + "<br>");
robot.print = function () {
  document.write("x = " + this.x + "<br>");
  document.write("y = " + this.y + "<br>");
};
robot.print();
</script>
</body>
</html>
 

テーブル

 

table.html

<html>
<body>
<table border="1">
  <tr>
    <td style="padding:0">
      <input type="text" style="width:100%">
    </td>
    <td style="padding:0">
      <input type="text" style="width:100%">
    </td>
  </tr>
</table>
<table border="1">
  <tr>
    <td style="position:relative">
      <input type="text" style="width:100%">
    </td>
    <td style="position:relative">
      <input type="text" style="width:100%">
    </td>
  </tr>
</table>
</body>
</html>
 

 

table.html

<html>
<body>

<div id="output"></div>

<script>
  var m = 3;
  var n = 5;
  var table = "<table id='table' border='1'>";
  table += "<tr>";
  for (var j = 0; j < n; j++) {
    table += "<th width='100' height='25'>" + "item" + j + "</th>";
  }
  table += "</tr>";
  for (var i = 1; i <= m; i++) {
    table += "<tr>";
    for (var j = 0; j < n; j++) {
      table += "<td id=" + "'" + "cell" + "_" + i + "_" + j + "'" + "contenteditable='true'>" + "cell" + "_" + i + "_" + j + "</td>";
    }
    table += "</tr>";
  }
  table += "</table>";
</script>

<script>
  //document.write(table);
  document.querySelector("#output").innerHTML = table;
  var table = document.querySelector("#table");
  for (var i = 0; i <= m; i++) {
    for (var j = 0; j < n; j++) {
      document.body.innerHTML += table.rows[i].cells[j].innerHTML + "<br>";
    }
  }
  for (var i = 1; i <= m; i++) {
    for (var j = 0; j < n; j++) {
      document.body.innerHTML += document.querySelector("cell" + "_" + i + "_" + j).innerHTML + "<br>";
    }
  }
  document.querySelector("cell_1_1").innerHTML = "Hello!";
</script>

</body>
</html>
 

 

input.htm

<html>
<body>
<script>
var array = [];
for (var i = 0; i < 10; i++) {
  array.push(document.createElement("input"));
  array[i].type = "button";
  array[i].value = "button" + i;
  document.body.appendChild(array[i]);
  document.write("<br/>");
}
</script>
</body>
</html>
 

name属性とvalue属性の値が送信される。

 

submit1.html

<html>
<body>
<form action="http://www.google.com/search" target="_blank">
  <input type="hidden" name="hl" value="ja">
  <input type="text" name="hq" value="inurlを入力" size="50">
  <input type="text" name="q" value="keywordを入力" size="50">
  <input type="submit" value="search">
</form>
</body>
</html>
 

 

submit2.html

<html>
<head>
<script>
function request() {
  document.requestform.name1.value = document.getElementById("id1").value;
  document.requestform.name2.value = document.getElementById("id2").value;
  document.requestform.submit();
}
</script>
</head>
<body>
<form>
<input type="text" id="id1" value="value1" size="50" style="font-size:15pt">
<input type="text" id="id2" value="value2" size="50" style="font-size:15pt">
</form>
<form name="requestform" action="http://www.xxxxx.jp/request" target="_blank">
<input type="hidden" name="name1" value="">
<input type="hidden" name="name2" value="">
<input type="button" value="request" onclick="request()" style="width:100px; height:35px; font-size:15pt">
</form>
</body>
</html>
 

 

event1.html

<html>
<head>
</head>
<body>

<form name="io">
<input type="text" name="input1">
<input type="text" name="input2">
<input type="button" name="button" value="実行" onclick="execute(0)">
<output name="output"></output>
</form>

<script>
function execute(x) {
  document.io.output.innerHTML = Number(x) + Number(document.io.input1.value) + Number(document.io.input2.value);
}
</script>

</body>
</html>
 

 

event2.html

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

<form>
<input type="text" id="input1">
<input type="text" id="input2">
<input type="button" id="button" value="実行">
<output id="output"></output>
</form>

<script>
$("#button").on("click", function () {execute(0);});
//document.getElementById("button").addEventListener("click", function () {execute(0);}, false);
</script>

<script>
function execute(x) {
  document.getElementById("output").innerHTML = Number(x) + Number(document.getElementById("input1").value) + Number(document.getElementById("input2").value);
}
</script>

</body>
</html>
 

 

keyevent.html

<html>
<body>

<input type="text" id="input1">
<input type="text" id="input2">
<output id="output"></output>

<script>
document.getElementById("input1").onkeydown = function (event) {
  document.getElementById("output").innerHTML = String.fromCharCode(event.keyCode);
}
</script>

<script>
document.getElementById("input2").onkeyup = function () {
  document.getElementById("output").innerHTML = document.getElementById("input2").value;
}
</script>

</body>
</html>
 

 


 

array.html

<html>
<body>

<script>
var array = [];
array = ["a0", "a1", "a2", "a3", "a4"];
array = array.concat(["a5", "a6", "a7", "a8", "a9"]);
document.body.innerHTML += array + "<br>";
array.push("a10", "a11", "a12");
document.body.innerHTML += array + "<br>";
array.splice(5, 3, "a15", "a16", "a17");
document.body.innerHTML += array + "<br>";
array.splice(10, 3);
document.body.innerHTML += array + "<br>";
array = array.slice(5, 8);
document.body.innerHTML += array + "<br>";
</script>

<script>
array = ["a0", "a1", "a2", "a3", "a4"];
var string = array.join(",");
document.body.innerHTML += string + "<br>";
array = string.split(",");
document.body.innerHTML += array + "<br>";
string = "abcdefghij";
document.body.innerHTML += string.slice(2) + "<br>";
document.body.innerHTML += string.slice(2, 5) + "<br>";
document.body.innerHTML += string.substr(2, 3) + "<br>";
document.body.innerHTML += string.substring(2, 5) + "<br>";
</script>

</body>
</html>
 

ある外部ファイル(jsファイル)のグローバル変数を、別の外部ファイルから参照できる。外部ファイルの呼び出し順序に注意。
トップレベルの変数(グローバル変数)には、var が有っても無くても同じ意味。関数内の変数の場合は、var が無いとグローバル変数になる。

 

global.html

<html>
<body>
<script src="./a.js"></script>
<script src="./b.js"></script>
</body>
</html>
 

 

a.js

var $1 = 1;
var $2 = 2;
var $3 = 3;
 

 

b.js

document.body.innerHTML += $1 + "<br>";
document.body.innerHTML += $2 + "<br>";
document.body.innerHTML += $3 + "<br>";
 

 

indexOf.html

<html>
<body>
<script>
var array = ["abcde", "fghij", "klmno"];
document.write(array.indexOf("abcde") + "<br>"); // -> 0
document.write(array.indexOf("fghij") + "<br>"); // -> 1
document.write(array.indexOf("klmno") + "<br>"); // -> 2
</script>
</body>
</html>
 

 

redirect.html

<script>
$("#login").on("click", function () {
  var url = "/webapp/loginservlet";
  var request = {};
  request["user"] = $("#user").val();
  request["password"] = $("#password").val();
  $.post(url, request, redirect);
});
</script>

<script>
function redirect(response) {
  if (response["status"] === "success") {
    location.href = response["url"];
    //location.assign(response["url"]);
    //location.replace(response["url"]);
  }
  else {
    $("#message").text(response["error"]);
  }
}
</script>
 

loadイベントの使い方

 

window.onload.html

<html>
<body>
<script>
window.addEventListener("load", function () {
  document.getElementById("message").innerHTML += "Hello1!";
});
window.addEventListener("load", function () {
  document.getElementById("message").innerHTML += "Hello2!";
});
window.addEventListener("load", function () {
  document.getElementById("message").innerHTML += "Hello3!";
});
</script>
<out id="message"></out>
</body>
</html>
 

テーブルの追加・削除

 

table.html

<html>
<head>
<style>
table {
  width: 50%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<form>
  <input type="button" value="追加" onclick="$append();">
  <input type="button" value="削除" onclick="$remove();">
</form>

<table id="table0" border="1">
  <thead><tr><th><input type="checkbox" class="checkbox" onclick="$checkAll(this);"></th><th>item1</th><th>item2</th><th>item3</th></tr></thead>
  <tbody></tbody>
</table>

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

<script>
document.querySelector("#table0 thead .checkbox").checked = false;
</script>

<script>
function $append() {
  var tr = "<tr><td><input type='checkbox' class='checkbox' onchange='$makeEditable(this);'></td><td>data1</td><td>data2</td><td>data3</td></tr>";
  //$("#table0 tbody").append(tr);
  document.querySelector("#table0 tbody").insertAdjacentHTML("beforeend", tr);
}
</script>

<script>
function $remove() {
  //$("#table0 tbody :checked").parent().parent().remove();
  var tbody = document.querySelector("#table0 tbody");
/*
  var length = tbody.rows.length; 
  while (length--) {
    var checkbox = tbody.rows[length].cells[0].firstElementChild;
    if (checkbox.checked === true) {
      tbody.deleteRow(length);
    }
  }
*/
  var checkboxes = document.querySelectorAll("#table0 tbody .checkbox");
  var length = checkboxes.length; 
  while (length--) {
    if (checkboxes[length].checked === true) {
      //tbody.children[length].remove();
      tbody.removeChild(tbody.children[length]);
    }
  }
  document.querySelector("#table0 thead .checkbox").checked = false;
}
</script>

<script>
function $checkAll(checkbox) {
  var checkboxes = document.querySelectorAll("#table0 tbody .checkbox");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = checkbox.checked;
  }
}
</script>

<script>
function $makeEditable(checkbox) {
  var tr = checkbox.parentNode.parentNode;
  if (checkbox.checked === true) {
    tr.contentEditable = true;
  }
  else {
    tr.contentEditable = false;
  }
}
</script>

</body> 
</html>
 

ダイアログボックスのフェードイン・フェードアウト

 

dialog.html

<html>
<head>
<style>
body {
  animation: fadein 5s ease 0s 1 normal;
  -webkit-animation: fadein 5s ease 0s 1 normal;
}
@keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@-webkit-keyframes fadein {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#dialog {
  width: 50%;
  height: 200px;
  background: #555eee;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<div id="dialog"></div>
</script>
</body>
</html>
 

 

dialog.html

<html>
<head>
<style>
#dialog {
  width: 50%;
  height: 200px;
  background: #555eee;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<input type="button" value="open" onclick="$open();">
<input type="button" value="close" onclick="$close();">
<div id="dialog" class="box" style="visibility:hidden;"></div>
<script>
function $open() {
  document.querySelector("#dialog").style.visibility = "visible";
}
function $close() {
  document.querySelector("#dialog").style.visibility = "hidden";
}
</script>
</body>
</html>
 

 

dialog.html

<html>
<head>
<style>
.box {
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s, visibility 0s ease 1s;
}
.box.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
#dialog {
  width: 50%;
  height: 200px;
  background: #555eee;
  border-radius: 10px;
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 1);
}
</style>
</head>
<body>
<input type="button" value="open" onclick="$open();">
<input type="button" value="close" onclick="$close();">
<input type="button" value="toggle" onclick="$toggle();">
<div id="dialog" class="box"></div>
<script>
function $open() {
  document.querySelector("#dialog").classList.add("visible");
}
function $close() {
  document.querySelector("#dialog").classList.remove("visible");
}
function $toggle() {
  document.querySelector("#dialog").classList.toggle("visible");
}
</script>
</body>
</html>
 

入力チェック

 

input_validation1.html

<html>
<body>
<p>正の数を入力してください。平方根が出力されます。</p>
<form>
  <input type="button" value="sqrt" onclick="sqrt('#input', '#output')">
  <input type="text" id="input" placeholder="input">
  <output id="output"></output>
</form>
<script>
function sqrt(input, output) {
  var input = document.querySelector(input).value;
  var output = document.querySelector(output);
  try {
    if (input === "") throw "Input is empty!";
    if (isNaN(input)) throw "Input is not a number!";
    if (Number(input) < 0) throw "Input is a negative number!";
    output.innerHTML = Math.sqrt(Number(input));
  }
  catch (e) {
    output.innerHTML = e;
  }
}
</script>
</body>
</html>
 

 

input_validation2.html

<html>
<body>
<p>正の数を入力してください。平方根が出力されます。</p>
<form>
  <input type="button" value="sqrt" onclick="sqrt('#input', '#output')">
  <input type="text" id="input" placeholder="input">
  <output id="output"></output>
</form>
<script>
function sqrt(input, output) {
  var input = document.querySelector(input).value;
  var output = document.querySelector(output);
  try {
    if (input === "") throw new Error("Input is empty!");
    if (isNaN(input)) throw new Error("Input is not a number!");
    if (Number(input) < 0) throw new Error("Input is a negative number!");
    output.innerHTML = Math.sqrt(Number(input));
  }
  catch (e) {
    output.innerHTML = e.message;
  }
}
</script>
</body>
</html>
 

配置

 

position.html

<html>
<body>
<div style="position:relative;">
  <div style="float:left;">
    aaaaa
  </div>
  <div style="float:right;">
    bbbbb
  </div>
  <div style="clear:both;">
    ccccc
  </div>
  <div style="position:absolute; bottom:0; right:0;">
    ddddd
  </div>
</div>
</body>
</html>
 

表示・非表示

 

display.html

<html>
<body>
<input type="button" value="表示" onclick="document.querySelector('#box').style.display='block';">
<input type="button" value="非表示" onclick="document.querySelector('#box').style.display='none';">
<div id="box" style="display:none">
  <p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  </p>
</div>
<div>
  <p>
    yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy<br>
    yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy<br>
  </p>
</div>
<input id="input1" type="text" value="aaaaa1">
<input id="input2" type="text" value="aaaaa2" style="display:none">
<script>
document.body.insertAdjacentHTML("beforeend", document.getElementById("input1").value);
document.body.insertAdjacentHTML("beforeend", document.getElementById("input2").value);
</script>
</body>
</html>
 

 

visibility.html

<html>
<body>
<input type="button" value="表示" onclick="document.querySelector('#box').style.visibility='visible';">
<input type="button" value="非表示" onclick="document.querySelector('#box').style.visibility='hidden';">
<div id="box" style="visibility:hidden">
  <p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
  </p>
</div>
<div>
  <p>
    yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy<br>
    yyyyyyyyyyyyyyyyyyyyyyyyyyyyyy<br>
  </p>
</div>
</body>
</html>
 

2次元配列

 

array2d.html

<html>
<body>
<script>
var array2d = [];
for (var i = 0; i < 10; i++) {
  array2d[i] = [];
  for (var j = 0; j < 20; j++) {
    array2d[i][j] = "(" + i + "," + j + ")";
  }
  document.body.innerHTML += array2d[i].join(',') + "<br>";
}
</script>
</body>
</html>
 

.aaa.bbb {} と .aaa .bbb {} は、意味が異なるので注意!
.aaa.bbb {} は、<div class="aaa bbb"></div>のような要素に対する設定!
#aaa.bbb {} は、<div id="aaa" class="bbb"></div>のような要素対する設定!
.aaa .bbb {} → aaa の子孫である bbb (直下でなくてもよい)
.aaa > .bbb {} → aaa の直下にある bbb
尚、.abc は、*.abc を表す。

 

sample.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div id="id1">aaaaa</div>
<div class="class1">bbbbb<div class="class2">ccccc</div>ddddd</div>
</body>
</html>
 

 

sample.html

div#id1 {color: red;}
div.class1 {color: blue;}
div.class1 > div.class2 {color: green;}
 

 

sample.html

<html>
<body>
<div>
  <p>aaaaa</p>
  <p>bbbbb</p>
  <p>ccccc</p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("p").eq(0).css("color", "blue");
$("div").find("p").eq(2).css("color", "red");
Array.from(document.querySelectorAll("p"), element => document.body.innerHTML += element.textContent);
</script>
</body>
</html>
 

 

selector.html

$(".abc").eq(0); -> jQuery Object
document.querySelectorAll(".abc")[0]; -> NodeList

$(element).find(".abc").eq(0); -> jQuery Object
element.querySelectorAll(".abc")[0]; -> NodeList
 

 

selector.html

<form>
<input type="button" id="ibutton" value="実行">
<input type="button" class="cbutton" value="実行">
</form>

<script>
$("#ibutton").on("click", function () {.....});
$(".cbutton").on("click", function () {.....});
</script>
 

 

immediate_function.html

(function () {
  .....
} ());
 

 


参考サイト