jQueryことはじめ。


jQueryことはじめ。 | Bamboo lath 日々の記録たまに仕事で使ってたけどちゃんとわかってないのでやってみる。
今後結構使うことになりそうなので今のうちに。
特に今回はたいしたことじゃない。。
結局セレクタを使いこなすっていうのが大事。

セレクター

要素を指定するための。
「操作が発生した要素」や「変更したい要素」を指定するのが「セレクター」

$("セレクター")

セレクターにはCSSとほぼ同様なものが使える。

$("#target img")

上記であればid属性が”target”の要素内にあるimg要素を指定できる。

jQueryで利用できる主なセレクター


タイプ 名称 書式 指定対象
CSSでよく利用されるセレクター 要素セレクター $(要素名) 特定のHTML要素
IDセレクター $(#ID名) 特定のid属性を持つ要素
クラスセレクター $(.クラス名) 特定のclass属性を持つ要素
子孫セレクター $(要素1 要素2) 特定の要素の内側にある要素
ユニバーサルセレクター $(*) すべての要素
グループセレクター $(セレクター1) セレクター2
CSS2のセレクター 子セレクター $(親要素名 > 子要素名) 特定の要素の直下の子要素
隣接セレクター $(要素1 + 要素2) 特定の要素の次の要素
first-child擬似クラス $(要素:first-child) 同一の親要素内の最初の要素
CSS3のセレクター 間接セレクター $(要素1 ~ 要素2) 特定の要素の後に出現する要素
否定擬似クラス $(要素1:not(要素2)) 特定の要素内で指定した要素以外の要素
empty擬似クラス $(要素:empty”)” 子要素やテキストを含まない要素
nth-child擬似クラス $(要素:nth-child(番号)) 特定の要素内の指定した番号の要素
last-child擬似クラス $(要素:last-child) 特定の要素内の最後の要素
only-child擬似クラス $(要素:only-child) 指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクター [attribute] $([属性名]) 特定の属性を持つ要素
[attribute=’value’] $([属性名=’値’]) 特定の属性が指定した値を持つ要素
[attribute!=’value’] $(要素名[属性名!=’値’]) 特定の属性が指定した値を持たない要素
[attribute^=’value’] $([属性名^=’値’]) 特定の属性が特定した値で始まっている要素
[attribute$=’value’] $([属性名$=’値’]) 特定の属性が特定した値で終わっている要素
[attribute*=’value’] $([属性名*=’値’]) 特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $([属性セレクター1][属性セレクター2]) 複数の属性セレクターに該当する要素
jQueryの独自フィルター firstフィルター $(要素:first) 同一の親要素内の最初の要素
lastフィルター $(要素:last) 指定した要素の最後の要素
evenフィルター $(要素:even) 指定した要素の偶数番目の要素
oddフィルター $(要素:odd) 指定した要素の奇数番目の要素
eqフィルター $(要素:eq(番号)) 指定した番号の要素
gtフィルター $(要素:gt(番号)) 指定した番号より後の要素
ltフィルター $(要素:lt(番号)) 指定した番号より前の要素
headerフィルター $(要素:header) h1~h6までのheader要素
containsフィルター $(要素:contains(文字列)) 特定の文字列が含まれている要素
hasフィルター $(要素1:has(要素2)) 特定の要素が含まれている要素
parentフィルター $(要素:parent) 子要素やテキストを含む要素
フォームフィルター :inputフィルター $(要素:input) input要素/textarea要素/select要素/button要素
:textフィルター $(要素:text) 1行テキスト入力フォーム(type属性がtextのinput要素)
:passwordフィルター $(要素:password) パスワード入力フォーム(type属性がpassowordのinput要素)
:radioフィルター $(要素:radio) ラジオボタン(type属性がradioのinput要素)
:checkboxフィルター $(要素:checkbox) チェックボックス(type属性がcheckboxのinput要素)
:submitフィルター $(要素:submit) 送信ボタン(type属性がsubmit/imagesのinput要素)
:imageフィルター $(要素:image) イメージボタン(type属性がimageのinput要素)
:resetフィルター $(要素:reset) リセットボタン(type属性がresetのinput要素)
:buttonフィルター $(要素:button) ボタン(button要素)
:fileフィルター $(要素:file) ファイル選択フォーム(type属性がfileのinput要素)
:checkedフィルター $(要素:checked) ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター $(要素:selected) セレクトボックスで選択されている要素

HTML/CSSを操作する

jQueryでHTML/CSSを操作するには、次のような書式で記述する。

$("セレクター").jQueryの命令

イベント発生時に行いたい処理も以下のような書式で記述する。

$("セレクター").イベント(function(){
イベント発生時の処理
});

サンプルコード

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(function(){
                    // 文字変更と色変更
                    $("p#first").text("jQueryで変えちゃた。");
                    $("p").css("color", "red");

                    // 画像の切り替え
                    $("button").click(function(){
                            $("img").attr("src", "sea.jpg");
                        });
            })
        </script>
        <p id="first">変更前</p>

        <button>画像を変更</button>
        <p><img src="flower.jpg" alt="" /></p>

jQueryで利用できる主なHTML/CSSを操作する命令

命令名・書式 意味
テキストの変更と取得 text(変更後のテキスト) テキストを変更する
text() テキストを取得する
HTMLの変更と取得 html(変更後のHTML) HTMLを変更する
html() HTMLを取得する
HTMLの挿入 prepend(挿入するHTML) 要素内の先頭にHTMLを挿入する
append(挿入するHTML) 要素内の最後にHTMLを挿入する
before(挿入するHTML) 要素の前にHTMLを挿入する
after(挿入するHTML) 要素の後にHTMLを挿入する
HTMLの移動 prependTo(移動先のセレクター) 他の要素内の先頭に要素を移動する
appendTo(移動先のセレクター) 他の要素内の最後に要素を移動する
insertBefore(移動先のセレクター) 他の要素の前に要素を移動する
insertAfter(移動先のセレクター) 他の要素の後に要素を移動する
他の要素で包む wrap(<要素名></要素名>) 要素を他の要素で包む
wrarpAll(<要素名></要素名>) 要素をまとめて他の要素で包む
wrapInner(<要素名></要素名>) 子要素/テキストを他の要素で包む
要素の置き換え replaceWith(置換後の要素) 要素を他の要素に置き換える
要素の削除 remove() 要素を削除する
属性値の変更と取得 attr(属性名, 属性値) 指定した属性の値を変更する
attr(属性名) 指定した属性の値を取得する
removeAttr(属性名) 指定した属性を削除する
class属性の追加と削除 addClass(class属性値) class属性を追加する
removeClass(class属性値) class属性を削除する
CSSの制御 css(プロパティ名,値) 指定したCSSプロパティの値を設定する
css(プロパティ名) 指定したCSSプロパティの値を取得する
フォーム部品の操作 val(”入力値”) フォームの入力値(val ue属性の値)を変更する
val() フォームの入力値(val ue属性の値)を取得する

アニメーションの例

ノーマルアニメーション

$("セレクター").show(スピード);
$("セレクター").hide(スピード);

スライドアニメーション

$("セレクター").slideDown(スピード);
$("セレクター").slideUp(スピード);

フェードアニメーション

$("セレクター").fadeIn(スピード);
$("セレクター").fadeOut(スピード);

サンプルCSS

    div{
        width:300px;
        height:300px;
        background:red;
        display:none;
    }

サンプルjs

    $(function(){
            $("button").click(function(){
                    $("div").show("slow");
                });
    })

サンプルHTML

<button>表示</button>
<div></div>

とりあえずここまで。

コメントを残す

メールアドレスが公開されることはありません。