[公費教育]Day 43

24420 ワード
宿題を整理する. テキストリンク
今日から、JSを使いやすく、便利なライブラリjqueryの勉強を始めました.
なぜJavaScriptはこんなに書くことが多いのでしょうか.私はずっと文句を言っています.jqueryを書くのは確かに簡単で、気持ちがいいです.

Jquery


Jクエリーは典型的なJavaScriptライブラリで、ECMA 6以前に使いにくいJavaScriptを便利に使用するために作成されました.もちろん、ECMA 6以降、JavaScript機能の大幅な向上とコメントの流入に伴い、Jクエリーは市場から淘汰され始めた.それでもjequiry開発者たちは自分のルートで自分の道を歩んでいる.
このjクエリの構文はjavascriptとは異なりますが、それ自体がjavascriptなので、機能を使用することができます.

[使用方法]


2回目のクエリを使用するには、<head>CDNに移動する必要があります.その後、<script>要素内で同様に使用する.
  • jクエリとJavaScriptは文法的に混在可能である.
  • $().で始まり、jQueryオブジェクトにはすべての機能が含まれます.
  • jクエリはごくまれな場合を除き関数で構成されている.

    • 1)要素の選択


    :J選択要素を問い合わせるときにCSSを使用する選択者.
    document.getElementById("msg").value;
$("#msg").val(); // getter
$("#msg").val(“input text”); // setter
document.getElementById("msg").innerHtml;
$(“#msg”).text();
$(“#msg”).text(“제이쿼리로 HTML 바꾸기”);
    パラメータが関数を使用していない場合は、getterの役割を果たし、ターゲットの値を取得します.逆に、パラメータを入力すると、setterとして機能し、値を割り当てることができます.

    2）CSSスタイルの変更


    CSS属性と値をjで問い合わせることもできます.
    そして、複数の属性を付与する場合には、それを組み合わせてkey : valueの形式で付与する.
    // 속성이 1개일 때

$("#msg").css(
        "border", "1px solid pink",
);

// 여러 개를 줄 때 

$("#msg2").css({
        "border" :"1px solid pink",
        "color" : "dodgerblue"
});
    
// 스타일 속성값도 출력할 수 있다.
console.log($("#msg2").css("border"));

    3）イベント処理


    JavaScriptで使用されるイベントをより簡単に処理できます.
    // $(대상).on(“이벤트 종류”, 콜백함수)

$("#btn").on("click", function(){
	alert("JQuery Event!");
});

    4）テキストの入力方法


    2回目のクエリでは、要素の内部コンテンツを入力する方法は2つあります.
  • text():入力した内容を単純テキストとして扱う.
  • html():入力された内容をhtmlと認識し、タグ(document.write)に使用可能
    • <input type="text" id="msg">
<input type="button" value="버튼" id="btn">

<div id="target"></div> // 입력 내용이 들어가는 부분

<script>        
        $("#btn").on("click", function(){
            let msg = $("#msg").val();
            $("#target").html(msg); // (1)
            $("#target").text(msg); // (2)
        });
</script>
    上記コードには、(1)のように入力<div> content </div>、その結果、targetdivに含まれるcontentの<div>逆に、(2)のように操作すると、入力内容はtargetに<div> content </div>と書かれています.
    また、出力時には、textタグ内の内容を抽出し、html該当するhtml自体を出力します.

    5)要素の追加


    ブラウザがHTMLファイルをレンダリングすると、そのコンテンツのドキュメント領域に応じて画面が表示されます.これを静的状態と呼ぶ.ただし、ここでレンダリング後に要素を追加した場合、再レンダリングしない限り、このようなことは起こりません.
    したがって、レンダリングを必要とせず、コメントやスクロール画面など、一定の条件(イベント)に基づいて要素を消去したり作成したりするダイナミックな状態を実現したいと考えています.
  • 静態:コードに固定し、レンダリング後に要素を表示する.
  • 動的:コード上にあるが、レンダリング後に一定の条件に従って現れる.
    • そのため、私たちは全部で4つの関数を使って、それらは簡単な位置について、理解して運用すればいいです.
  • append():元の内容の後ろ
  • prepend():内容の前面
  • before():ターゲットラベルの前
  • after():ターゲットラベルの後ろ

    • 例

    <div id="box">
	내용1 <br>
        내용2 <br>
</div>  

<script>
	$("#box").prepend("여기가 Prepend<br>") // ‘내용1’의 앞
        $("#box").append("여기가 Append") // ‘내용2’의 뒤
        $("#box").before("여기가 Before") // #box의 여는 태그 앞
        $("#box").after("여기가 After") // #box의 닫힘 태그 뒤        
</script>

    6)要素オブジェクトの作成


    Javascriptのdocument.write(“<div>”);のアプリケーションとして、呼び出しwrite()実際にbodyの領域に入力できる<div>divタグを生成する.もちろん、閉じたラベルも一緒に入力します.簡単に言えばscriptでhtmlのbodyを実際に入力します.
    この機能はJクエリでも実現可能である.純粋なテキストではなく要素オブジェクトとして作成します.もちろん、テキストのみで組織するのも問題ではありません.しかし、メンテナンスにおいては、オブジェクトとしての使用がより有利である.
    // div 객체 생성
let div = $(“<div>”); 

// table 객체 만들기
let tr = $("<tr>");
tr.append($("<td>").text(title));
tr.append($("<td>").text(content));
tr.append($("<td>").text(writer));
    まず、このラベルをCSSセレクタとして呼び出すと、実際のHTMLと同じdiv, tr要素がメモリに生成されます.また、閉じたラベルも付いています.
    コンテンツを追加したり、テーブルオブジェクトを作成したりする場合は、前に学習したappend()実際のテーブルを作成します.
    また、対応する動作のためにイベント処理を行うことができる.
    <table id="table" border="1">
  <tr>
    <th> 제목 </th>
    <th> 내용 </th>
    <th> 작성자 </th>
  </tr>
</table>

<script>
  $("#btn").on("click", function () {
  		let title = $("#title").val();
 		let content = $("#content").val();
    	let writer = $("#writer").val();

        let record = $("<tr>"); // <tr> 객체 생성
  
  		// <tr> 객체 내부에 추가
        record.append($("<td>").text(title)); // <td> 객체 생성 후, 입력받은 내용을 태그 안에 넣어줌
        record.append($("<td>").text(content));
        record.append($("<td>").text(writer));
		
  
  		// 만들어진 객체를 table 태그 내부에 추가.
        $("table").append(record);
		
  		// 입력값 초기화
        $("#title").val('');
        $("#content").val('');
        $("#writer").val('');

// 위 코드는 이렇게도 표현이 가능하다.
// record.html("<td>" + title + "<td>" + content + "<td>" + writer
// $("#table").append("<tr>" +"<td>" + title + "<td>" + content + "<td>" + writer +"</tr>");
  
  });

</script>
    つまらないことに一つの金額を中国語のクラスに変換した.
    [SUDYNote]タグドロップダウンタグDownの作成方法