マウスカーソルを乗せたときに文字を消す方法

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

●スクリプト<script type="text/javascript"><!--function yamato(tgt){ if(document.getElementById){ tar=document.getElementById(tgt); tar.style.display="none"; }}//--></script>●HTML<p onMouseover="yamato('tokyo')">この文字にマウスカーソルを乗せると、下記の文字が消えます。</p><p id="tokyo">東京</p>最...

jQueryでボタンを押したときに文字を消す（非表示にする）

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

●スクリプト<script type="text/javascript">$(function(){  $("button#yamato").click(function(){    $("p").addClass("tokyo");  })});</script>●HTML<button id="yamato">ここをクリックすると文字が消えます</button><p>東京</p>●CSSp.tokyo{display: none;}まず最初に、ブラウザにはボタンと、東京という文字が表...

jQueryでボタンをクリックしたときに文字の色を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

●スクリプト<script type="text/javascript">$(function(){  $("button#yamato").click(function(){    $("p").removeClass("red");    $("p").addClass("green");  })});</script>●HTML<button id="yamato">ここをクリックすると色が変わります</button><p class="red">東京</p>●CSSp.red{color: red;}p.green{color: g...

jQueryでボタンを押したときに色を消す

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

●スクリプト<script type="text/javascript">$(function(){  $("button#yamato").click(function(){    $("p").removeClass("red");  })});</script>●HTML<button id="yamato">ここをクリックすると色が消えます</button><p class="red">東京</p>●CSSp.red{color: red;}最初に、ブラウザには赤い文字で東京と表示される...

jQueryでボタンを押すたびに文字を表示させたり消したりする

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $("button#kesu").click(function(){    $(".tokyo").html("");    })  $("button#hyouzi").click(function(){    $(".tokyo").html("トウキョウ");    })});</script><button id="hyouzi">表示する</button><button id="kesu">消す</button><div class="tokyo">東京</...

jQueryでボタンを押すたびにHTMLを追記する

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $("button").click(function(){    $(".tokyo").after("<span>東京です。</span>");    })});</script><p>ボタンを押すと、HTMLが追加されます。</p><button>ここをクリック</button><div class="tokyo"></div>ボタンを押すタイミングで、イベントが発生し、jQueryにて...

jQueryでボタンを押したときに写真を変更する

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $("button").click(function(){    $("img").attr("src","neko.png")    })});</script><p>ボタンを押すと、犬の写真が猫に変わります。</p><button>画像を変更する</button><img src="inu.png">もともとは犬の画像を表示させている。しかしjQueryによって、ボタンクリ...

jQueryでリンク先を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $("a").attr("href","http://www.yahoo.co.jp/");});</script><a href="https://www.google.co.jp/">グーグルにリンク（でもヤフーに変わる）</a>本来ならグーグルhttps://www.google.co.jp/にリンクするところを、jQueryの.attrによって、ヤフーのURLhttp://www.yahoo.c...

jQueryでHTMLを追加する（リンク付きダブルクォート含む）

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $(".onamae").after("<span>ケン<a href=\"#\">イチ</a>ロウ</span>");});</script><span class="onamae">大和</span>jQueryの.afterで追加するHTMLソースコードは、""で囲む必要がある。しかし、ソースコード自体に " が含まれる場合は、直前に \ をつけてエスケープし...

jQueryでHTMLを追加する

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $(".onamae").after("<span>ケンイチロウ</span>");});</script><span class="onamae">大和</span>ブラウザには大和ケンイチロウと表示される。ケンイチロウの部分が、jQueryによって追加されたHTMLである。サンプルソースhttp://tokyo-webs.jp/sample_source/130311d/東...

jQueryでclass毎に色を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $(".rin").css("color","#FF6666");  $(".mik").css("color","#3333FF");  $(".ban").css("color","#339933");});</script><ul><li class="rin">りんご</li><li class="mik">みかん</li><li class="ban">ばなな</li></ul>以上のように、jQueryにて、class毎にCSSで色を指...

jQueryでid毎に色を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

<script type="text/javascript">$(function(){  $("#ringo").css("color","red");  $("#mikan").css("color","blue");  $("#banana").css("color","green");});</script><ul><li id="ringo">りんご</li><li id="mikan">みかん</li><li id="banana">ばなな</li></ul>以上のように、jQueryにて、id毎にCSSで色を指定でき...

jQueryで文字の色を変える

コメ0 東京ウェブ制作ブロマガ 143ヶ月前

jQueryライブラリを読み込んでいる状態で、<script type="text/javascript">$(function(){  $("li").css("color","red");});</script>と記述する。HTML側は<ul><li>りんご</li><li>みかん</li><li>ばなな</li></ul>とする。すると、文字の色が赤に変わる。これは、jQueryのfunctionにて、CSSのcolorが操作されたことを意...

業務で使えるオープンソース（52）「JavaScript代替」

コメ0 MOONGIFTニコニコ出張所 148ヶ月前

ここ1年くらいで急激に増えているのがJavaScriptの代替言語です。言語というよりもフレームワークに近いものに感じますが、各社がこぞって参入しているとあって誰もが不満を感じ、解決したいと思っている分野のようです。そこで今回は大事な技術要素と、代替になるソフトウェアについて紹介します。