SIMjQueryの基本的な構文と使い方を忘備録的にまとめました。
jQueryの書き方の型｜基本構文
SIMまずはjQueryの基本的な型から見ていきましょう。
$(function(){
//ここにプログラムを書く
});
これをJavaScriptに変換すると下記のとおりです。
window.onload = funciton(){
//読み込み後に実行したい処理
}
jQueryの基本文法
SIMjQueryの基本文法は英語と似ていると言われてます。
$(‘ 主語 ‘) . 動詞 (‘ 補語 ‘) ;
SIM例文で見ていきましょう。
例文）h2タグのテキストを「はじめに」に変える
$(function(){
$('h2').text('はじめに');
});これをJavaScriptで書くと…
document.getElementByTagName('h2').innerText = 'はじめに' 例文）aタグを隠す（display:none;）
$(function(){
$('a').hide();
});これをJavaScriptで書くと…
document.getElementByTagName('a').style.display = 'none'jQueryのセレクタの指定方法
SIMjQueryのセレクタの指定方法は、タグ、クラス名、id名でそれぞれ違いますが、CSSセレクタと同じと考えておけば間違いないです。
- タグ名
$(‘h2’) - クラス名
$(‘.c-button’) - id名
$(‘#paget-top-button’)
jQueryの代表的なメソッド
SIMjQueryのよく使うメソッドの一覧は下のとおりです。
参考）jQuery公式サイト
- .text () テキストを取得する
- .text (‘ 変更したいテキスト ‘) テキストを’ ‘内の文字列に変更する
- .html() HTMLを取得する
- .html(‘ 変更したいHTML ‘) HTMLを’ ‘内のHTMLに変更する
- .click() 対象要素をクリックする
- .prepend(‘ 要素 ‘) 要素の先頭にHTMLを挿入する
例：$(‘.lists’).prepend(‘< li >先頭に追加するリスト< /li >’) - .append(‘ 要素 ‘) 要素の最後にHTMLを挿入する
例：$(‘#lists’).append(‘< li >最後に追加するリスト< /li >’) - .remove() 要素を削除する
- .attr(‘属性’) 指定した属性の値を取得する
例：$(‘a#link2’).attr(‘href’) - .attr(‘ 属性 ‘, ‘ 値 ‘) 指定した属性の値を変更する
例：$(‘a#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(‘last-name’)
子要素の中から探すメソッド
SIM子要素の中から探すメソッドには、find()かchildren()を使います。
メソッド｜find()とchildren()のちがい
- find() 指定した要素の子要素から探してくる
- children() 指定した要素の直属の子要素から探してくる
例えば、下記のようなHTMLに対してfind()とchildren()を使う例文を紹介します。
<div id="parent01">
<h2 id="children01">30DAYSトライアル</h2>
<p class="children02">1日1題30日でプログラマーになろう！</p>
<p class="children03">jQuery学習中</p>
<div class="children04">
<a href="https://abcdefg.com/" id="register" class="btn">ボタン</a>
</div>
<input id="user-status" type="text" value="visiter">
</div>
find()の場合：子要素（子孫要素すべてが対象）のaタグをjQueryで探してくるメソッド
$(function(){
var links = $('#parent01').find('a');
console.log(links[0])
});children()の場合：子要素（子孫要素は非対象）の２番目のpタグをjQueryで探してくるメソッド
$(function(){
var links = $('#parent01').children('p');
console.log(links[1])
});jQueryによるイベント監視の構文
SIMイベント処理の書き方の基本構文は下のとおりです。
$(function(){
$(‘セレクタ’).イベント名(function(){
//実行したい処理
});
});
以下、clickとhoverイベント監視の例文です。
jQueryでイベント監視（click）
$(function(){
$(‘セレクタ’).click(function(){
//ここにクリックされた時の処理を書く
});
});
例文：ボタン（id=”btn”）をクリックしたら、見出し（id=”title01″）のテキストを「はじめに」に変える
$(function(){
$('#btn').click(function(){
$('#title01').text('はじめに')
});
});上のjQuery例文をJavaScriptで書き直すと、下記のとおり長文になってしまいます。
document.getElementById("btn").addEventListener('click', function() {
document.getElementById('title01').innerText = 'はじめに'
})jQueryでイベント監視（hover）
SIMhoverイベントはfunctionをコンマ区切りで2個続けて書くことができ、
最初に「ホバーされたときの処理」、2つ目に「ホバーが外れたときの処理」を書きます。
$(function(){
$(‘セレクタ’).hover(function(){
//ここにホバーされたときの処理を書く
},function(){
//ここにホバーが外れたときの処理を書く
});
});
例文：メニュー（id=”menu01″）をホバーしたら、メニュー（id=”menu01″）のテキストカラーが「#ffffff」に、ホバーが外れたらテキストカラーが「#333333」に戻る
$(function(){
$('menu01').hover(function(){
$(this).css('color', '#ffffff');
},function(){
$(this).css('color', '#333333');
});
});jQueryによるアニメーション
SIMjQueryには便利なアニメーション機能がたくさんあります。
詳しくは公式ページを参照しましょう。
例文：メニュー（id=”menu01″）をホバーしたら、子メニュー（id=”menu-child01″）のスライドダウンで現れ、ホバーが外れたらスライドアップで消える
$(function(){
$('menu01').hover(function(){
$('menu-child01').slideUp();
},function(){
$('menu-child01').slideDown();
});
});if文を使ったjQueryの例文
$(function(){
const status = $('#user-status').val(); //変数宣言
alert(status);
const button = $('#register')
if (status === "visiter"){
button.text('登録');
button.removeClass('btn-login');
button.addClass('btn-register');
}else if(status === "user"){
button.text('ログイン');
button.removeClass('btn-resigter');
button.addClass('btn-login');
$('.login-area').append('<a href="https://abcdefg.jp/" class="btn btn-withdraw">退会</a>')
}
});
