[TIL]jsコレクタセレクタ(feat.jquery)

11474 ワード
テキストリンク

セレクタ


JavaScriptの概念が欠けていると思ったので、個人学習を始めました.
最初に私が実現したjs機能はセレクタ機能です.
例えば、机で勉強します.

1.tabletdの特定の部分だけを変更したい場合?(javascript ver.)


(1)表の寸法

<!doctype html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <title>jquery</title>
  <style type="text/css"></style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>


<body>
  <table class="table">
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
    
    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    
    <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
  </table>
</body>
</html>

(2)css設定(自由設定可)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0px solid silver;
    outline: none;
  }

table {
  width: 500px;
  border: 1px solid #000;
  margin: 3rem auto;
  text-align: center;
}

td {
  padding: 2rem;
  border: 1px solid #000;
}

(3)JS設定

window.onload = function() {
  document.getElementsByTagName('td')[0].style.background="red";
  document.getElementsByTagName('td')[1].style.background="red";
  document.getElementsByTagName('td')[5].style.background="red";
  document.getElementsByTagName('td')[7].style.background="red";
  document.getElementsByTagName('td')[8].style.background="red";
}
成果物(codepen-vanillajsver)
https://codepen.io/huhyj97/pen/oNGbVOX
実は、なぜ今でもバニラjavascriptで実現しているのか
長所が分からない
いずれにしても、Jクエリーを使用するとコードが大幅に減少します.
Jクエリーの選択者として、一度コードを実現しました!

2.table tdは特定の部分を置換する(jquery ver.)


(1)~(2)html、css 1号と同じ


(3)jquery設定


この部分は、同じグループのメンバーのブログリンクで解決されます.
出典:坑賛.学習ブログ
https://gangzzang.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACjQuery-%EC%84%A0%ED%83%9D%EC%9E%90
その中でも関数フィルタセレクタを用いて解決した.
いくつかの関数フィルタセレクタの形式を試してみたいです.
選択者シェイプ
説明:
要素:contains(文字列)contains
特定の文字列を含むドキュメント・オブジェクトの選択
要素:eq(n)
n番目の場所のドキュメントオブジェクトを選択
要素:gt(n)
n範囲外のn番目の文書オブジェクトを選択
要素:has(h 1)
h 1タグ付きドキュメントオブジェクトの選択
要素:lt(n)
n未満のドキュメントオブジェクトを選択
要素:no(セレクタ)
選択者と一致しないドキュメントオブジェクトの選択
要素:nth-child(3 n+1)
3 n+1のドキュメントオブジェクトを選択
 $( document ).ready( function() {
   $(".table tr td:lt(2)").css("background","red")
   $(".table tr td:eq(5)").css("background","red")
   $(".table tr td:gt(6)").css("background","red")
      } );
成果物(codepen-jquery ver)
https://codepen.io/huhyj97/pen/ZEXQdXo
n個未満のオブジェクトを選択するgtとn個未満のオブジェクトを選択するeqを使用し、n個以上のオブジェクトを選択するgtを使用すると、vanilla jsを使用するコードよりもコードが減少します.どちらが正解なのか、どちらが効率的なのかは周りに誰も教えてくれませんが(…ㅠ)私もよくわかりませんが、このように自分の手でコードを作る試みも面白いです.こんな简単なコードから兴味を积み重ねていけば、知らず知らずのうちにたくさんの私を発见してほしい!!
2021.06.29(NAVERゲーム3)
カラーコーディングテーブル