jqueryの入門の入門、基本編

jqueryの基本

jqueryは、htmlやcssを変更して、ホームページの表示を変えることが基本です。
そのため、jqueryの基本はほぼこの形式で書いていきます。

$(function(){
     $("セレクター").jquery命令文;
    });
});

セレクター:どのhtmlやcssの要素を操作するかを選びます。(※詳細
例:
$(”li”)→ホームページ上のli要素全てに…
$(“#nav a”)→#navの中のa要素全てに…
$(“li:first”)→ホームページ上の一番最初のli要素に…
$(“[name=’mail’]”)→name属性でmailの値の要素に…
jquery命令文:要素をどう操作するかを書きます。
例:
.text→要素内のテキストを変更、取得する。
.attr→属性値を変更、取得する

$(function()は、webページ全体をを読み込んだときに内部が読み込まれ、実行されます。
ですが、ボタンを押したときに実行したり、画像を触れたときに実行したいということがあります。
そういうときに使うのがイベント

$(function(){
  $("セレクター").イベント(function(){
     $("セレクター").jquery命令文;
    });
});

イベント:セレクターで選んだ要素がなにかしたときに実行される。
例:
.click→クリックしたときに実行される。
.mousedown→要素の上にマウスカーソルがあるときに実行される

jqueryのエラーを確認する方法

jqueryやjavascriptはブラウザで実行するので
IEやfirefoxにはじめからエラーをチェックする機能がついています。

IE:インターネットエクスプローラー

ホームページをIEで開いてから
F12を押します。
開発ツールが開かれ、画像のようにエラーを表示してくれます。

firefox

同じようにホームページをfirefoxで開いてから
Ctrl+Shift+J を押すか、ツール→エラーコンソールを押します。

エラーコンソールでエラーの確認ができます。


コメントする