javascript プログラミング

jQuery 書き方

まず最初に

（上はHTML文）
</div>


<!-- jQueryのライブラリー本体を読み込む -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<!-- 必ずjQuery本体を読み込んだ後にjQueryで書いたファイルを読み込む-->
<script src="js/practice.js"></script>

jQuery 書き方ルール

英語に似ている。 主語＋動詞

$(function() {
$('h2').text('スケトラ');
});

$(function() {
$('a').hide();
});

元の文だと結構長い・・・ jQueryだと半分以下に短縮できる

document.getElementByTagName('h2').innerText = 'スケトラ' 
document.getElementByTagName('a').style.display = 'none'

メソッド・書き方

  • .text()　テキストを取得する
  • .text('変更したいテキスト')　テキストを' '内の文字列に変更する
  • .html()　HTMLを取得する
  • .html('変更したいHTML')　HTMLを' '内のHTMLに変更する
  • .click()　対象要素をクリックする
  • .prepend('要素')　要素の先頭にHTMLを挿入する
    例：$(#lists).prepend('< li >先頭に追加するリスト< /li >')
  • .append('要素')　要素の最後にHTMLを挿入する
    例：$(#lists).append('< li >最後に追加するリスト< /li >')
  • .remove()　要素を削除する
  • .attr('属性')　指定した属性の値を取得する
    例：$(a#special-link).attr('href')
  • .attr('属性', '値')　指定した属性の値を変更する
    例：$(a#special-link).attr('href', 'https://xxxx.com')
  • .removeAttr(属性名)　指定した属性を削除する
  • .addClass(class属性値)　class属性を追加する
    例：$(#button).addClass('active')
  • .removeClass(class属性値)　class属性を削除する
    例：$(#button).removeClass('active')
  • .css(プロパティ名)　指定したCSSプロパティの値を取得する
    例：$(#logo).css('color')
  • .css(プロパティ名, 値)　指定したCSSプロパティの値を設定する
    例：$(#logo).css('color', 'red')
  • val()　フォームの入力値(value属性の値)を取得する
    例：$(input#name).val()
  • val('入力値')　フォームの入力値(value属性の値)を設定・上書きする
    例：$(input#name).val('tofuri')

練習問題

練習問題：inputの値によって登録ボタンとログインボタンを出し分けるプログラム
①inputタグのvalueを取得
②valueがvisiterなら「ボタン」の文字を"登録"に + btn-loginクラスを削除
③btn-registerクラスを追加
④valueがuserなら「ボタン」の文字を"ログイン"に + btn-resigterクラスを削除
⑤btn-loginクラスを追加
⑥.login-areaに"退会"ボタンを追加（※URLは適当でOK



$(function(){
  const status = $('#user-status').val();
  alert(status);
  const button = $('#register');
  
  if(status === "vister"){
    button.text("登録");
    button.removeClass('btn-login');
    button.addClass('btn-register');
  }else if(status === "user"){
    button.text("ログイン");
    button.removeClass('button-register');
    button.addClass('btn-login');
    $('.login-area').append('<a href="https://careertimes.biz/" class="btn btn-withdraw">退会</a>')
  }
  
});

-javascript, プログラミング