フラグイン入門【jQuery】

最近はFlashを初めてますが、javascriptも平行にやっています。最近はjQueryが楽しいです。なんとなく色々できるようになってきたので、次はフラグインを勉強してみようかなと思っています。

そこでネットをググってこの記事を参考にしていますので、メモをのせておきます。

jQuery フラグイン

参考

基本形

$.fn.メソッド名 = function(){
    return this.each(function(){
        エレメント1つに対しての処理
    });
}

1回目(難しい感じにふりがなをつけよう)

エレメント内の文字列は「this.innerHTML」で参照できる。

replace()は、最初のパラメータに置換したい文字とオプション、2番目のパラメータに置換後の文字列を指定します。

var hurigana = this.innerHTML;

hurigana = hurigana.replace(/愛媛/g,"愛媛(えひめ)"); ←/愛媛/g 正規表現g」はグローバルマッチ (global match) で、指定すると文章全体にある該当文字が対象になります。 this.innerHTML = hurigana  ←変数「srcText」にエレメント内の文字列が入ります。

2回目(顔文字を顔画面に変えよう)

特殊記号を指定する場合は、その文字の前に半角バックスラッシュ\を入れる必要があります。

例: (^^)  →  (^^)

3回目(単語を自動的にリンクを追加しよう)

三回目にもなると、jQueryのフラグインには正規表現が必要ということがわかります。 ここは、余り使わないかと思っていた分野なので勉強してなかったので、これからまじめにやっていきます。

^aa  :aaから始まる文字列にマッチング。 例、aadd,aacsr11,aagdok....

aa$   :aaで終わる文字列にマッチング。  例、ffdaa,ddgvaa,oki0aa....        str.match(/bb$/)

正規表現用のオブジェクト:RegExpオブジェクト。 new RegExp()という形でよく使われます。

「/ABC/i」 i は大文字、小文字を判別する。小文字ならtrueを返す。