cari

Rumah >hujung hadapan web >tutorial js >jQuery中show与hide方法用法示例

jQuery中show与hide方法用法示例

巴扎黑
巴扎黑asal
2017-06-29 10:45:112772semak imbas

这篇文章主要介绍了jQuery中show与hide方法用法,结合实例形式分析了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;}
    p{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>
  <p id="control">
    <input id="btnDisplay" type="button" value="显示p" />
    <input id="btnHide" type="button" value="隐藏p" />
  </p>
  <p id="message">
    mouseover、mouseenter的区别：p里套p。见备注。和事件冒泡有关系。<br /> 
    不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 <br />
    只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件(穿过子元素不会触发)
  </p>
</body>
</html>

Atas ialah kandungan terperinci jQuery中show与hide方法用法示例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现的简单计时器功能实例详解Artikel seterusnya：jquery之hide()用法详解

Artikel berkaitan

Lihat lagi