jQuery

ZeroClipboardを使ってテキストをクリップボードにコピー

ボタンをタップすることで、テキストをクリップボードへコピーする(スマホ除く ZeroClipboard読み込み HTML JS <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script> </head> <p>コピーされます</p> <input id="textcp" type="hidden" value="コピーされます"> <div id="btn">Click me</div>

imgLiquidを使い画像をトリミング

imgLiquidを使って画像をトリミングし、マルチデバイスでセンター寄せにする 外部ファイル読み込み <script src='//code.jquery.com/jquery-1.10.2.min.js'></script> <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/app.js"></script>

$ is not defined

$ is not definedは、jQueryが読み込まれていない為に表示されるエラーです。 僕の場合は、jQueryを読み込む際、JSファイルの中で一番上に記述していないためにエラーが起こっていました。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/apps.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>

eventsを使う

index.html <html lang="ja"> <head> <meta charset="utf-8"> <meta name="Content-Type" content="text/html charset=utf-8"/> </head> <body> <script type="text/template" id="foo"> <p><u><%- n %></u></p> </script> <script src="js/underscore.js"></script> <script src="js/jquery.js"></script>…</body></html>

jQueryの読み込みと動作確認

index.html <html la="ja"> <head> <meta charset="utf-8"> <title>jQuery practice</title> </head> <body> <a href="#">foo</a> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(function() { $('a').css('color', 'red'); }); </script> </body> </html> script srcタグはjQue…

bind

$(function() { $('div').bind("mouseover", function() { $('div').toggleClass('bar').css('font-size', '130%'); $("div").bind("mouseout", function() { $('div').toggleClass('baz'); }); }); }); <html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { c…</meta></head></html>

console.log

console.logで該当セレクタのプロパティを表示できます。 $(function() { $('div').bind("mouseover", function() { $('div').toggleClass('bar').css('font-size', '130%'); $("div").bind("mouseout", function() { $('div').toggleClass('baz'); console.…

addClass

<html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { color: blue; } .baz { color: yellow; } .qux { border: 2px solid blue; } </style> <script type="text/javascript" src="./jquery-1.11.1.min.js"></script> </meta></head></html>

clickした時にaddClass

$(function() { $('.bar').click(function(){ $(this).addClass('qux'); }); }); <html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { color: blue; } .baz { color: yellow; } .qux { border: 2px solid blue; } </style> </meta></head></html>

toggle

jquery1.9よりリビジョンから削除 $(function() { $('.bar').toggle(function(){ $(this).css('color','blue') },function(){ $(this).css('color','yellow') },function(){ $(this).css('color','red') }); }); <html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { colo…</meta></head></html>

hide() fadeOut()

<html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { color: blue; } .baz { color: yellow; } .qux { border: 2px solid blue; } </style> <script> $(function() { $('.bar').click(function(){ $(this).hide("slow"); // もしくは$(this).fadeOut(4000); 4秒でゆっ…</meta></head></html>

hover()メソッドでmouseover mouseout時の挙動を指定する

jQuery $(function() { $('.bar').hover( function() { $(this).css('background', 'yellow').text("うわー") }, function() { $(this).css('background','').text("もう一度") }); }); HTML <html la="ja"> <head> <meta charset="utf-8"> <title>JS</title> <style type="text/css"> .bar { color: blue; } </meta></head></html>