JQuery

JQueryとは

開発の現場で全てを自分で0からコードを書くことも可能だが、よく使われる機能を実装しやすいようにひとかたまりのコードにしてくれているのがライブラリ。
JQueryはJavaScriptのライブラリの一つ。

主な機能として
・DOM操作
・イベント
・CSS操作
・エフェクトとアニメーション
・AJax

などがある。

最近の開発の現場ではあまり使われない。
Webブラウザ間での揺らぎがJQueryを使わなくても大きく無くなったため。
https://www.webstaff.jp/guide/trend/jquery/

DOMの取得

要素の取得

const main = $('#main');
console.log(main);

$('.article')
$('p')
$('[show="on"]')
$('#main > p:first-child')

テキストの変更

$('#main > p:first-child').text('変更されました');

HTML要素の書き換え

$('#main > p:first-child').html('<ul><li>リスト1</li><li>リスト2</li></ul>')

HTMLを書き換えるのはセキュリティ的に微妙なところもありそう。あくまで例示しているだけなので良いやり方は調べてください。

要素の削除

$(#main > p:first-child').remove()

CSSクラスの追加

$('#main > p:first-child').addClass('red');

CSSクラスの切り替え

そのクラス名があれば外してなければつける

$(''#main > p:first-child).addClass('red');

CSSスタイルの追加,変更

$('#main > p:first-child').css((
    color: 'red',
    fontSize: '30px',
    backgrondColor: 'black'
});

属性の追加・変更

第一引数=属性名
第二引数=その値

$('$main > p:first-child').attr('show', 'on');

DOMの生成

const $el1 = $('<p>').text('追加されたテキスト1');
const $el2 = $('<p>').text('追加されたテキスト2');

$('#main').prepend($el1);
$('#main').append($el2);

イベント処理

const $target = $('#main > p:first-child');

$target.on('click', function(){
    $(this).css({
        color: 'red',
        fontWeight: 'bold'
    });
});