メソッドの使い方
メソッドとはオブジェクトの特定の処理をひとまとまりにしたものです。また、プロパティはオブジェクトの特性や属性などをまとめたものです。ここではメソッドの働きをみていきます。
$()で特定のオブジェクトを指定したらそのオブジェクトに何をするか命令を書くことになります。
その命令をメソッドで記述するわけです。
記述方法は簡単です。指定した$()の後にドットシンタックスでメソッドを繋げるだけです。
$(セレクタなど).メソッド(引数)
たとえば、id=”first”の属性が付く要素の文字色を赤にする場合は以下のようにします。
$(#first).css('color','red')
このシンプルな書き方を覚えれば要素や属性、テキスト、CSSなど自由に書き換えることができるようになります。
JavaScriptの文法やDOMのことをよく解らなくても誰でも簡単に動的なページを作れるわけです。
理屈はいらいないと言う方はこ上のメソッドの書き方を覚えるだけで結構色々なことができる事でしょう。
一部サンプルをリンクしていますのでソースと見比べて動きを確認しましょう。
| メソッド | 命令内容 |
|---|---|
| text() | 引数が無い場合は指定した要素が持つテキストノードを結合したものを返す。引数にテキストを入れるとそのテキストに入れ替える |
| html() | 引数が無い場合はHTML文を取得、引数にHTML文を入れるとそのHTML文に入れ替える |
| prepend() | セレクタの要素の中の先頭にHTMLを挿入 |
| append() | セレクタの要素の中の最後にHTMLを挿入 |
| before() | セレクタの要素の前にHTMLを挿入 |
| after() | セレクタの要素の後にHTMLを挿入 |
| prependTo() | セレクタの要素の中の先頭に要素を移動 prepend()に似ているがこちらはすでにある要素とテキストを動かします |
| appendTo | セレクタの要素の中の最後に要素を移動 append()に似ているがこちらはすでにある要素とテキストを動かします |
| insertBefore() | セレクタの要素の前に要素を移動 before()に似ているがすでにあるすでにある要素とテキストを動かします |
| insertAfter() | セレクタの要素の後に要素を移動 after()に似ているがすでにあるすでにある要素とテキストを動かします |
| wrap() | 要素を指定した要素で包む |
| wrapAll() | 複数の要素をまとめて指定した要素で包む |
| wrapInner() | セレクタで指定した要素のテキストを指定の要素で包む |
| unwrap() | 親要素を取り除く |
| replacewith() | 要素を他の要素に置き換える |
| remove() | 要素を削除する |
| attr() | 指定した属性の値を変更する |
| removeAttr() | 指定した属性の値を削除する |
| addClass() | class属性を追加する |
| removeClass() | class属性を削除する |
| css() | 引数一つの場合は指定したcssプロパティの値を取得、第１引数にプロパティを指定して第２引数に値を入れることができる |
メソッドの使い方などをさらりと上手く書かれた本が西畑さん著の「Web制作の現場で使うjQueryデザイン入門
」です。初心者がjQueryに取り組みやすい良書です。
