jquery入門

jquery

今回は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”) 特定の要素が1つだけ含まれる場合に選択される
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タグでクリックしたらイベントが発砲
<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
$.add = function(a,b) {
    return a+b;
}
$.fn.add = function(a,b) {
    return a+b;
}
$.fn.extend({
  f1:function(){},
  f2:function(){}
});
タイトルとURLをコピーしました