今回はjqueryの基本知識を紹介します。
jquery利用
公式サイトからダウンロード
公式サイトからjquery.jsファイルをダウンロードし、利用する方法。
コマンドでインストール
npm install jquery
yarn add jquery
CDNを利用する
jquery入口
書き方1
$(document).ready(function(){
});
});
書き方2
$().ready(function(){
});
});
書き方3
$(function(){
});
});
セレクタ
| 要素セレクタ | $(“要素名”) | $(“div”) |
| IDセレクタ | $(“#ID名”) | $(“#content”) |
| クラスセレクタ | $(“.クラス名”) | $(“.hover”) |
| グループセレクタ | $(“A , B”) | $(“span , strong”) |
| 子孫セレクタ | $(“#content p”) | 特定の要素の内側にある要素を絞り込む |
| 直下の子要素セレクタ | $(“li > a”) | 直下の子要素を絞り込む |
| 隣接セレクタ | $(“#first + li”) | 特定の要素の「次に存在する要素だけ」を選択できる |
| 間接セレクタ | $(“#second ~ li”) | 特定の要素の後（それ以降）の要素を選択できる |
| ユニバーサルセレクタ | $(“li *”) | liの中にある「全て子要素」を選択できる |
| first-child疑似クラス | $(“セレクタ:first-child”) | 親要素の中の最初の子要素 |
| last-child擬似クラス | $(“セレクタ:last-child”) | 最後の子要素 |
| nth-child擬似クラス | $(“li:nth-child(2)”) | 特定の要素の指定した「番号」の順番に存在する要素 |
| only-child擬似クラス | $(“li span:only-child”) | 特定の要素が１つだけ含まれる場合に選択される |
| empty擬似クラス | $(“li:empty”) | 子要素やテキストを含まない要素、つまり空の要素を選択する |
| CSSの属性セレクタ | $(“[id=’main’]”) | 指定した属性値を持つ要素を選択する |
| CSSの属性セレクタ | $(“[class!=’on’]”) | 特定の属性値を持たない要素を選択する |
| CSSの属性セレクタ | $(“[class^=’f’]”) | 特定の属性値が「指定の文字で始まる」要素を選択する |
| CSSの属性セレクタ | $(“[class$=’d’]”) | 特定の属性値が「指定の文字で始まる」要素を選択する |
| CSSの属性セレクタ | $(“[class*=’day’]”) | 特定の属性値が「指定の文字を含んでいる」要素を選択する |
| CSSの属性セレクタ | $(“[class^=’f’][class*=’day’]”) | 複数の条件を満たす要素を選択する |
| firstフィルター | $(“li:first”) | セレクタの中で最初に登場した要素だけを選択する |
| lastフィルター | $(“li:last”) | セレクタの中で最後に登場した要素だけを選択する |
| evenフィルター（偶数） | $(“p:even”) | 指定した要素がページ内で「偶数」番目に登場したものが選択される |
| oddフィルター（奇数） | $(“p:odd”) | 指定した要素がページ内で「奇数」番目に登場したものが選択される |
| eqフィルタ | $(“li:eq(2)”) | 指定した番号の要素を選択する |
| gtフィルター（greater than） | $(“li:gt(2)”) | 指定した数字の順番より「後」の要素（指定した順番は含まず）を選択する |
| ltフィルター（less than） | $(“li:lt(2)”) | 指定した数字の順番より「前」の要素（指定した順番は含まず）を選択する |
| headerフィルター | $(“:header”) | h1〜h6までのheading要素をまとめて選択できる |
| containsフィルター | $(“li:contains(‘文字列’)”) | 特定の「文字列」が含まれる要素を選択できる |
| hasフィルター | $(“li:has(‘div’)”) | 特定の「要素」が含まれる要素を選択できる |
| parentフィルター | $(“li:parent”) | 何らかの「子要素」や「テキスト」を含む要素を選択できる |
| :checkedフィルター | $(“:checked”) | ラジオボタンやチェックボックスの中で、チェックが入っている要素だけを選択する |
| :selectedフィルター | $(“:selected”) | セレクトボックスで選択されている要素だけを選択する |
イベント登録
イベント名で登録
<body>
<input type=”button” value=”btn” id=”btn1″>
<script>
$(function () {
$(“#btn1”).click(function() {
console.log(‘test’);
})
});
</script>
</body>
onメッソドで登録
.on(events [, selector][, data], handler)
.off(events [, selector][, handler])
$(selector).on(‘click’,function(){});
$(selector).on(‘click’,’span’,function(){}); //spanタグでクリックしたらイベントが発砲
.off(events [, selector][, handler])
$(selector).on(‘click’,function(){});
$(selector).on(‘click’,’span’,function(){}); //spanタグでクリックしたらイベントが発砲
<body>
<input type=”button” value=”btn” id=”btn1″>
<script>
$(function () {
$(“#btn1”).on(
{
‘click’:function() {
console.log(“test”);
},
‘dblclick’:function() {
console.log(“test2”);
}
}
)
});
</script>
</body>
タグの値取得
| $obj.val() | valueの値 |
| $obj.html() | innerHTMLの値 |
| $obj.text() | innerTextの値 |
要素の属性操作
| $obj.attr(‘属性名’); | 属性値取得 |
| $obj.attr(‘属性名’,’値’); | 属性値変更 |
| $obj.removeAttr(‘属性名’) | 属性削除 |
prop操作
checked属性、disabled属性、selected属性のpropで操作する
| $obj.prop(‘checked’) | 属性値取得 |
| $obj.prop(‘checked’,true) | 属性値設定 |
class操作
| $obj.addClass(‘class名’) | クラスの追加 |
| $obj.removeClass(‘class名’) | クラスの削除 |
| $obj.hasClass(‘class名’) | クラスが存在するか |
| $obj.toggleClass(‘class名’) | クラス名が存在していれば削除し、存在していなければ追加する |
css操作
| $obj.css(‘background’); | 取得 |
| $obj.css(‘background’, ‘gray’); | 設定 |
| $obj.css({ ‘background’:’gray’, ‘width’: ‘400px’, ‘height’:’200px’ }); |
複数 |
| $(‘img’).height(200); | 高さを設定 |
| $(‘img’).height(); | 高さを取得 |
| $(‘img’).width(200); | 長さを設定 |
| $(‘img’).width(); | 長さを取得 |
eachメソッド
$(‘img’).each(function(i,v){
});
});
$.each(配列,function(i,v){
});
});
タグ操作
| $(‘A’).html(‘HTMLを記述’); | AのHTMLを記述したHTMLに変更 |
| $(‘A’).html(); | AのHTMLを取得 |
| 親.append(子) | 選択された要素の最後に追加 |
| 子.appendTo(親) | 選択された要素の最後に追加 |
| 親.prepend(子) | 選択された要素の最初に追加 |
| 子.prepend(親) | 選択された要素の最初に追加 |
| 後要素.before(前要素) | 要素の後ろに追加 |
| 前要素.insertBefor(後要素) | |
| 前要素.after(後要素) | 要素の前に追加 |
| 後要素.insertAfter(前要素) | |
| $(‘div’).empty(); | divのすべて内容を削除（イベントも削除） |
| $(‘div).remove(); | divも削除 |
| $(‘div’).html(”); | divのすべて内容を削除（イベントを削除されない） |
| $(selector).clone(); | イベント対象外 |
| $(selector).clone(true); | イベントも対象 |
その他
| $.inArray(value,array,[fromIndex]); |
| $(selector).toArray(); |
| $.merge([1,2,3],[4,5]); |
| $.parseJSON(str) ==JSON.parse(str) |
| $.trim(‘ 1233 ‘); == str.trim() |
プラグイン
$.method = fn
$.fn.method = fn
$.fn.method = fn
$.add = function(a,b) {
return a+b;
}
return a+b;
}
$.fn.add = function(a,b) {
return a+b;
}
return a+b;
}
$.fn.extend({
f1:function(){},
f2:function(){}
});
f1:function(){},
f2:function(){}
});