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

●スクリプト
<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>
最初、東京は表示されている。
文字列にマウスカーソルが乗せられたタイミングで、東京にスタイル　display="none"
を設定することで、非表示にしている。
マウスカーソルを乗せたタイミングは、イベントとして　onMouseover　で拾う。
イベント発

●スクリプト
<script type="text/javascript">
$(function(){
  $("button#yamato").click(function(){
    $("p").addClass("tokyo");
  })
});
</script>
●HTML
<button id="yamato">ここをクリックすると文字が消えます</button>
<p>東京</p>
●CSS
p.tokyo{
display: none;
}
まず最初に、ブラウザにはボタンと、東京という文字が表示されている。
この時点で、東京の p タグには、クラスは未設定である。
ボタンをクリックしたタイミングでイベントが発生し、
pにクラス tokyo が適用される（addClassされる）。
CSSのtokyoクラスでは、
display: none;
を指定している。これは非

●HTML
<p class="tokyo">東京</p>
<p class="osaka">大阪</p>
<p class="nagoya">名古屋</p>
●CSS
p.tokyo{
display: none;
}
本来なら、東京、大阪、名古屋、と
３つのp要素がブラウザに表示されるはずである。
しかしブラウザには、東京は表示されない。
これは、CSSでdisplay: none;を東京に適用しているからである。
大阪と名古屋には、display: none; は適用されないので、
通常通りブラウザに表示される。
サンプルソース
http://tokyo-webs.jp/sample_source/130313d/
東京ウェブ制作

●スクリプト
$(function(){
  $("p:not(:first)").css("color", "red");
});
●HTML
<p>東京</p>
<p>大阪</p>
<p>名古屋</p>
スクリプトの　p:not(:first)　は、
p要素の一番最初以外、つまり２番目以降を意味する。
２番目以降にはすべてcssでredが適用されるので、
東京のみ黒字となり、大阪と名古屋は赤字となる。
サンプルソース
http://tokyo-webs.jp/sample_source/130313c/
東京ウェブ制作

●スクリプト
$(function(){
  $("p:first").css("color", "red");
});
●HTML
<p>東京</p>
<p>大阪</p>
<p>名古屋</p>
３つあるp要素のうち、最初のp要素（東京）のみを first で選択する。
その選択された要素にのみ、cssでredが適用される。
よって、東京の文字だけが赤色になる。
サンプルソース
http://tokyo-webs.jp/sample_source/130313b/
東京ウェブ制作

●スクリプト
$(function(){
  $("dd:not(:first)").css("display","none");
  $("dl dt").click(function(){
    if($("+dd",this).css("display")=="none"){
    $(this).siblings("dd").slideUp("slow");
    $("+dd",this).slideDown("slow");
    }
  });
});
●CSS
*{
margin:0;
padding:0;
}
dl{
background:#99FF99;
width:400px;
margin:10px 10px 10px 10px;
}
dl dt{
background:#FF0000;
border-bottom:1px solid #0000FF;
cu

●スクリプト
<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>
●CSS
p.red{
color: red;
}
p.green{
color: green;
}
最初に赤色の東京が表示される。redのスタイルが適用されている状態である。
ボタンをクリックすると、クラスredが消されて
greenが追加される。
よって、greenのスタイルが適用されるので、
文字の

●スクリプト
<script type="text/javascript">
$(function(){
  $("button#yamato").click(function(){
    $("p").removeClass("red");
  })
});
</script>
●HTML
<button id="yamato">ここをクリックすると色が消えます</button>
<p class="red">東京</p>
●CSS
p.red{
color: red;
}
最初に、ブラウザには赤い文字で東京と表示される。
これは、CSSのredが効いているからである。
この状態で、ボタンを押すと、イベントが発生し
スクリプトが動く。
スクリプトでは、pタグのclassであるredを削除している。
よって、東京という文字から赤のスタイルが外れることになり、
結果として、色が黒（標準）に

<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">東京</div>
上記のソースでは、
まずブラウザに
東京
と漢字で表示される。まだボタンはクリックされていないので
イベントは発生していないため、もともとの記述（漢字の東京)が表示される。
その状態で、ボタン「消す