Web開発ログ-第2週2日目(JQ入門)

JQueryの場合、JavaScriptの長いコードを使用できます.
JQuery=あらかじめ作成されたJavaScriptコード

だからインポートしなければなりません!

ガイドバー付きCSSの使用と同様の概念です.
JQuery CDNリンク

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

上のコードをhead領域に挿入し、インポートが完了します.

JQueryについて

上記の状態で、以下のコードを入力すると「世宗大王」が出力されます.

$('#article-url').val();
'세종대왕'

artice-urlはinput boxのid値です.

$('#article-url').val('장영실');
S.fn.init [input#article-url.form-control]

このコードを入力すると、次のようになります.

ボックスを隠す

$('#post-box').hide()
S.fn.init [div#post-box.posting-box]

上図idのpost-boxを隠す方法

人に見せたいときは逆です.

$('#post-box').show()
S.fn.init [div#post-box.posting-box]

cssの値の変更

横長ボックスの作成

$('#post-box').css('width', '700px')
S.fn.init [div#post-box.posting-box]

表示時の表示値が非表示の場合と異なる

$('#post-box').hide();
$('#post-box').css('display');


'none'

$('#post-box').show();
$('#post-box').css('display');

'block'

既存の指定されたテキストを置換する方法

$('#btn-post-box').text('랄라')
S.fn.init [a#btn-post-box.btn.btn-primary.btn-lg]

htmlの貼り付け

appendを利用してhtmlを動的に加えることができます.

let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="https://a.cdn-hotels.com/gdcs/production40/d811/5e89ad90-8f10-11e8-b6b0-0242ac110007.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="https://www.naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text coment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>`
        
$('#cardsbox').append(temp_html)
S.fn.init [div#cards-box.card-columns]

$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.card-columns]

$('#cards-box').append(temp_html)
S.fn.init [div#cards-box.card-columns]

.
.
.

前述したようにhtmlを作成しappendにロードすると、次のようにカード数を増やすことができます.