jQuery事件

時間 2019-12-08

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

jQuery 事件

下面是 jQuery 中事件方法的一些例子：javascript

Event 函數	綁定函數至
$(document).ready(function)	將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function)	觸發或將函數綁定到被選元素的點擊事件
$(selector).dblclick(function)	觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)	觸發或將函數綁定到被選元素的得到焦點事件
$(selector).mouseover(function)	觸發或將函數綁定到被選元素的鼠標懸停事件

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">若是點擊「隱藏」按鈕，我就會消失。</p>
<button id="hide" type="button">隱藏</button>
<button id="show" type="button">顯示</button>
</body>
</html>

隱藏部分文本css

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>

<h3>中國辦事處</h3>
<div class="ex">
<button class="hide" type="button">隱藏</button>
<p>聯繫人：張先生<br /> 
北三環中路 100 號<br />
北京</p>
</div>

<h3>美國辦事處</h3>
<div class="ex">
<button class="hide" type="button">隱藏</button>
<p>聯繫人：David<br /> 
第五大街 200 號<br />
紐約</p>
</div>

</body>
</html>

部分消失html

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>若是您點擊我，我會消失。</p>
<p>點擊我，我會消失。</p>
<p>也要點擊我哦。</p>
</body>
</html>

速度java

語法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button type="button">隱藏</button>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>

jQuery toggle()

經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。jquery

顯示被隱藏的元素，並隱藏已顯示的元素：ide

實例

$("button").click(function(){
  $("p").toggle();
});

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。