jQueryのshowとhideメソッドの使用例

本文实例分析了jQuery中show与hide方法用法。分享给大家供大家参考，具体如下：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnDisplay").click(function () {
        $("#message").show(3000);
      });
      $("#btnHide").click(function () {}}
        $("#message").hide(3000);
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnDisplay" type="button" value="divを表示する"> />
    <input id="btnHide" type="button" value="divを非表示にする"> />
  </div>
  <div id="message">
    mouseoverとmouseenterの違い：div内にdivが入っています。注記をご参照ください。イベントのバブルが関係しています。<br /> 
    マウス指針が選択された要素またはその子要素を通過するかどうかに関わらず、mouseover イベントがトリガーされます <br />
    マウス指針が選択された要素を通過したときにのみ mouseenter イベントがトリガーされます（子要素を通過してもトリガーされません）
  </div>
</body>
</html>

jQueryに関連する詳細な内容に興味がある読者は、以下の本サイトの特集を参照してください：《jQuery ウィンドウ操作の技術的概要》、《jQuery クリック効果と技術的概要》、《jQuery 常用プラグインと使用方法の技術的概要》、《jQuery 中のAjaxの使用方法の技術的概要》、《jQuery テーブル(table)操作の技術的概要》、《jQuery 扩張技術の技術的概要》、《jQuery 常見の効果の技術的概要》、《jQuery アニメーションと効果の使用方法の技術的概要》および《jQuery セレクタの使用方法の技術的概要》

この記事で述べた内容が皆様のjQueryプログラム設計に役立つことを願っています。

声明：この記事の内容はインターネットから提供されています。著作権は原著者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは著作権を所有しておらず、人工編集は行われていません。著作権侵害が疑われる内容を見つけた場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メール送信時、#を@に変更して報告してください。関連する証拠を提供し、一旦確認がついたら、このサイトは即座に侵害疑いのコンテンツを削除します。）

基礎教程