jQueryのまとめ

jQuery

記事内に商品プロモーションを含む場合があります

目次

jQueryとは

jQueryとは、JavaScriptライブラリといわれるものの1つで、中でも人気のライブラリとされているものです。jQuery、、JavaScriptライブラリ、、何それって初めは思いますよね。
jQueryを組み合わせることで、プログラミングを比較的容易に組み入れることができるようになり、ホームページにも動き(アニメーション)がつけられるようになるので、ぜひ身に着けたい言語になります。難しいプログラミング言語を学習するって、主婦にとって簡単ではないですよね。。なので効率よくweb制作ができるjQueryはぜひ身に着けたいものの一つなんじゃないかな、と思います。

アニメーションとは、ホームページを訪問した時に、左右や、下などからふわ~っとコンテンツや文字などが現れたり、フェードアウトしたりするやつです。自在に操れたら楽しいです。jQueryはオワコン??実際はまだまだ使われているとも聞きます。

jQueryの記述の方法

jQueryを導入するには、まず公式サイトからjQueryをダウンロードする必要があります。公式サイトはこちら→jQuery公式

Downloadをクリックすると、compressed(圧縮版)とuncompressed(非圧縮版)と用意されているのがわかると思います。通常の場合は、圧縮版をDLすればよいでしょう。DLしたファイルを、cssファイルのようにエディタに読みこませます。または、cdnリンクも用意されているので、cdnからjQueryを読ませることもできます。

jQueryを導入することができたら、次に、自分で記述していくjsファイルを用意し、同様にエディタに読み込んでおきます。独自のjsファイルはjQueryのファイルの後に読み込ませましょう。jQueryファイル、自作のjsファイルの順です。

jQueryを記述する

$(function(){

  //ここに処理内容を記述する

});

 
 $(function () { });で、jQueryの実行予約をしています。この中に実際に処理する内容を記述していきます。
 WordPressの場合、$はjQueryに置き換えないと処理が実行されません。うっかり忘れると動かずに焦る原因となりますので要注意です。

jQuery基本的な書き方

 $(“要素を取得”).メソッド(引数);

要素は””や”で囲み(中には””,”不要なものもあり)、メソッドに処理内容を記述します。

//(例)
$("#title").text("jqueryまとめ");

これで、タイトルidを取得し、引数の内容を出力することができます。
text()メソッドは、html内にあるテキスト情報を取得することのできるメソッドです。さらに、引数を指定するとテキスト情報を変更したり、または追加することもできます。

メソッドにcssを記述することで、スタイルを実行させることもできます。
引数には、function()関数を当てることもでき、より複雑な処理を行わせることも可能です。

メソッドの種類

メソッドは色々用意されていますが、cssや属性に関するものやイベントメソッド、フェードインアウトなど効果に関するメソッドなどがあります。

よく使うメソッドの例

css()
addClass()
removeClass()
offset()
scrollTop()
attr()
click()
show()
fadeOut()
fadeIn()

目次