[SACXコードイン](2021.08.27)Javascript,JQueryアプリケーションレッスン1日目

🔖 CSSセレクタラベル構文

div.a:divラベル内にはaクラスしか出力されません.

div .a:divラベル内の子孫の中からaレベルの友人のみを選択

div > .a:divタグは、次のサブアイテムのaクラスのみを取得します.

📢 Javascriptセレクタ

var select = document.getElementById("b1").innerHTML;
: 'b1' 아이디 속성을 가진 요소를 찾고 이를 나타내는 Element 객제 반환

var select = document.getElementsByClassName("s")[0].innerText;
: ClassName을 불러올 때는 단수 단위를 가져오는 것이 아니기 때문에 Elements라고 표현해준다.
: 문서객체 중 지정된 클래스(Class)값을 가져오는데 사용되는 함수 이다

var select = document.getElementByName("name")[0].value;
: 문서객체 중 name 값을 가져오는데 사용되는 함수 이다.
: val("코딩온")처럼 인자를 넣어주면 자체적으로 value 값을 바꿀 수 있다

var select = document.getElementsByTagName("div").innerHTML;
: 문서객체 중 지정된 태그(Tag)값을 가져오는데 사용되는 함수 이다.

var select = document.querySelector(".a").innerHTML.trim();
: 클래스가 a인 친구를 select하겠다.

var select = document.querySelectorAll(".a")[1].innerHTML;
: 배열을 불러올 수 있음
: 아까는 id값만을 가져왔다면 지금은 특정 클래스를 가진 id 값들을 갖고 오겠다는 뜻이다


var children = document.getElementByClassName('parent')[0].children.children;
children는 뒤에 자식 태그를 확인하기 위해 써주는 메소드

var parent = document.getElementsByClassName('child1')[0].parentElement;
parentElement는 부모 태그를 확인하기 위해 써주는 메소드

var sibling = document.getElementsByClassName("child1")[0].nextElementSibling;
nextElementSibling은 형제 태그를 확인하기 위한 메소드


!! id는 요소 하나만 잇으면 된다
!! classname은 여러개 사용할 수 잇기 때문에 배열을 불러올 수 있다.
!! name은 name값으로 불러올 수 있다. ex) `name=test`면 name말고 test로!
!! tagname으로 선택자 불러올 수 있다.
!! trim()은 양쪽 공백을 지워줌.

📡 JQueryセレクタ

🥾 JQueryはJavascriptのライブラリの1つです。

Javascriptは、Webページのダイナミックな実装を可能にするため、非常に便利な言語ですが、方法が長すぎるため、使用が複雑です.でも!15年前、ある天才開発者が簡略化されたライブラリを作成しました!!それがJQueryです.

要素を選択するプロセスを簡素化し、Javascriptにない関数も実現します.

document.getElementID("aa").innerHTML; ➡ $("aa").html();

JQueryには親ラベルが1つしかロードされませんが、親ラベルにも親ラベルがインポートされます.

JQueryは、パラメータ内のタグ<'name'>を識別することができる

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
crossorigin="anonymous"></script>

: JQuery를 사용하기 위해서는 해당 라이브러리를 불러와야지 사용할 수 있다.

var num = $("aa").html();
: `var num = document.getElementID("aa").innerHTML;` 와 같은 뜻이다!

$($(".parent")[0]).html();
: jQuery안에 배열[]을 사용하면 문법을 인식하지 못하게 된다. 따라서 $()로 한 번 더 감싸줌

var select_test = $("input[name=test]").val("");
: JQuery로 name을 불러올 때 사용


$($(".parent").children()[0]).html()
: JQuery에서 첫 번째 자식 태그 선택하는 방법

$($(".parent").children()[1]).html()
: JQuery에서 두 번째 자식 태그 선택하는 방법


$(".child1").parent().html()
: JQuery에서 부모 태그 선택하기


function button_event() {
        $( ".child2" ).html( "코딩온" );
     }
: JQuery에서 button_event()라는 함수 기능을 구현하는 방법

.append():セレクタに一番前に追加

.prepend():セレクタに最後に追加

.before():上部ラベルセレクタの前面に追加

.after():前のタブセレクタの直後

.remove():選択者のプロパティを削除します..html("")で代用可能

★使用例:$("선택자").after("<div>2</div>");

removeClass():要素から特定のクラスを削除

addClass():要素に特定のクラスを追加

hasClass():特定のクラスが存在するかどうかを検索する方法

★使用例:

function button_event() {
  
  if $("#name").hasClass("d-none") {
    $("#name").removeClass("d-none"); // 버튼을 누르면 안보이던 것을 보이게 만들어 줌
  }
  else {
    $("#name").addClass("d-none"); // 이 상태에서 버튼을 누르면 d-none기능이 추가
  }
  
}
// 'name'ID에 'd-none'이 있다면 'd-none'을 지우기 위해 'removeClass()'를 주고 'd-none'이 없다면 'd-none'를 추가하기 위해 'addClass()'를 준다.

CSS 기능をJQueryに注入してみます$(".abc").css({"display" : "block", "background-color" : "blue"});

実験課題

コードオンラインフォーラム>萌芽(SSAC)第3期陣営>課題提出>劉勝完執筆

😫 この授業は復習しても理解できず、時間がかかりました。

まだ理解できないことがたくさんあります.特定のタイミングでグローバル変数を使用します.特に!私は実習の宿題をしているとき、論理的にedit()関数を書くことを理解していなかったので、何日も徹夜しました.🤣 確かに授業のビデオを復習して、知らないことをたくさん解決しましたが、私にはまだ足りません.他の学生は本当にフォローが上手で、課題もよくできているので、挫折したことがあります.開発者の道は本当にでこぼこだと聞いていますが、これからもついていけるかどうか心配です.😂😂