jQuery

6462 ワード
frontend web テキストリンク

jQuery:あらかじめ作成されたJavaScriptコード。


これはプロの開発者が作成したコードを使っているので、書く前にインポートします!
document.getElementById("element").style.display = "none";
以上のようにJavaScriptを用いて冗長で複雑な内容を記述する必要がある.
$('#element').hide();
jQueryで書くとより直感的で便利です.
  • ブートバーテンプレートから開始すると、jqueryインポート文が含まれます.
  • ブートストラップを使用しない場合は、個別にインポートする必要があります.
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  • jQueryチュートリアル:https://www.w3schools.com/jquery/jquery_get_started.asp2
  • コマンド使用=>id 
    • $('#id이름').val('값')
// $('#')은 지칭, .val('')은 명령
  • 等html形式貼付
    • let temp_html = `html형식 복사해서 붙이기`
$('# 붙일<div>의 id').append(temp_html)
  • temp htmlで値を変更した場合:${.}
    • を使用
    
let name = '세정'
let temp_html = `<div>.......${name}.......</div>`
  • をクリックして
    • を表示および非表示にします.
  • ボタンの関数onclick = openclose()
  • 関数では、
    • function openclose(){
 	let status = $('#post-box').css('display'); //status값이 block이면 나와있음.
  	if (status=='block'){
     	$('#post-box').hide();
        $('btn-posting-box').text('포스팅박스 열기');
    }else{
        $('#post-box').show();
        $('btn-posting-box').text('포스팅박스 닫기');
    }
    
}
  • 最初から人に見られたくないなら、
    post-box css styleでdisplay: none;でいいです.
    • TIL3: Arrow Function/'this' Keyword
    JVMフラグビット間の相互影響