プログラミング初心者のためのjQuery入門3

プログラミング初心者のためのjQuery入門3 jQuery
この記事は約3分で読めます。

完全初心者やプログラミング未経験者に向けて何かしてみたい!を応援するために始まったこのプロジェクト。ぜひ活用していってください。

前回の記事はこちら

イベントは他にもあり、イベントを止めることもできます。

前回はクリックをして公式ホームページに飛ぶようにしましたね。イベントとはクリックしたり、スクロールしたりしてアクションを引き金に何かを動作させることを言います。

イベントはクリック以外にもあり、英語表記になってしまいますが、こちらに一覧があるので、参考にしてみてください。

また、デフォルトの動作を防ぐために”event.preventDefault()”を使用することもできます。例えば、以下のように”event.preventDefault()”を”alert( “ようこそ” );”の下に貼り付けてください。

$( document ).ready(function() {
 
    $( "a" ).click(function( event ) {
 
        alert( "ようこそ" );
 
        event.preventDefault();
 
    });
 
});

そして、ブラウザでjquery.htmlを起動するとたった一行追加しただけなのに、公式ホームページに飛ぶことができなくなってしまいました。これが”event.preventDefault()”の役割です。

本来であれば、ファイルを分けてコードを書き込みます。

今回はわかりやすいようにファイルを分けずhtmlファイルに書き込みましたが、本来であれば、プログラミング言語ごとにファイルを置き換えるのが一般的です。

特にフレームワークを使用するときはきちんとどのファイルをどこに入れるかなどが決まっています。しかしjQueryはフレームワークではなく、ライブラリなので、細かくは決まっていません。

htmlクラスを追加したり消したりする

ここから先の例はドキュメントの準備ができてから実行されるようにしたいので、readyイベントの中に入れることを推奨します。実際にコーディングするときに必要なだけで今は手順に沿ってやってください。

htmlクラスを追加したり消したりするのは重要なことです。

まずは<head>タグ内に以下のコードを追加してください。

<style>
a.test {
    font-weight: bold;
}
</style>
スタイルタグを挿入するお手本
こうなっていればよいです

これはaタグのtestクラスにフォントを指定するよという命令です。

クラスを追加する。

<script>タグのすぐ下に以下のコードを追加してください。

$( "a" ).addClass( "test" );

Ctrl + sで保存したらブラウザでjquery.htmlを開いてみてください。フォントが変わっているのがわかりますか?おそらくわからないと思うので、今度はクラスを消してみましょう。

クラスを消す。

クラスを消すときは”.removeClass()”を使います。今度は</script>の前に以下のコードをコピペしてください。

$( "a" ).removeClass( "test" );

そうするとどうでしょうか。見比べてみてください。成功しているときの例を載せておきます。

クラスを追加した時のフォント
クラスを追加した後
クラスを消した後の画面
クラスを消した後

いかがだったでしょうか。今日はここまでです。お疲れ様でした!

コメント

タイトルとURLをコピーしました