click()命令はready()と同様に、括弧内のfunction(){...}と記述し
その内側に実行したい処理を書きます。
$( セレクター ).click(function(){
セレクターで指定した要素がクリックされたときの処理
});
サンプルコードをコピーして実行すると、
「ここをクリックすると・・・」とブラウザに表示されていて
クリックすると「click!」という文字が出ます。それを何度も
押すとさらに「click!」という文字が出るという簡単なものです。
<p>タグで囲まれた「ここをクリックすると・・・」を
クリックすると<p>タグで囲まれた範囲の後ろから
「click!」というテキストを追加する処理を入れています。
実行結果はこちらです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; font-weight:100; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <p>クリックすると・・・<br></p> </div><!--contatiner--> <script> $(document).ready(function(){ $("p").click(function(){ $("p").append("click!<br>") }); }); </script> </body> </html> |
a要素にclick()を設定したら・・・
この記事を書いていて気が付いたのですが、
click()はクリックしたときの処理を書けますが、
もともと「クリックしたら href属性に書かれたリンク
先にとぶ」機能があるa要素をセレクターに指定すると
何が起こるのか・・・
実際にやってみました。
サンプルコードを実行すると、
黒猫の画像が表示されています。
「Googleへ飛ぶ」をクリックすると、イベントが発生し、
jQueryの命令が実行されます。ですが、その直後にブラウザーは
a要素のhref属性に指定されたURLを開いてしまいます。
その問題への解決案としては、サンプルコードの
33行目のように「return false;」と書きます。
この場合は、jQueryの命令だけが実行されて、hred属性に
書かれたURLへはジャンプしません。javaScriptがオフの場合は、
a要素に指定されてたリンクが有効になるので、
jQueryの命令で指定している内容に近いURLをhref属性に指定して
おけばユーザーは情報はつかめます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQueryStudy</title> <style> *{margin:0;padding:0;} #container{ width:640px; height:400px; font-weight:100; margin:0 auto;} </style> <script src="js/jquery-1.11.3.js"></script> </head> <body> <div id="container"> <a href="http://google.co.jp"> Googleへ飛ぶ </a> <img src="kuroneko.jpg" alt="" width="100" height="100"> </div><!--contatiner--> <script> $(document).ready(function(){ $("a").click(function(){ $("img").attr("src","shironeko.jpg").attr("alt","白猫") return false; }); }); </script> </body> </html> |