jQuery(二)事件

時間 2020-03-07

標籤 jquery 事件欄目 JQuery 简体版

原文原文鏈接

鼠標事件:
    click
    dblclick
    mouseenter:鼠標進入
    mouseleave:鼠標離開
    hover:鼠標懸停

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","lightgray");
  });
  $("#eilin").click(function(){
    $("p").css("background-color","red");
  });
  $(".eiling").dblclick(function(){
    $("p").css("background-color","black");
  });
  $("p").hover(function(){
    $("p").css("background-color","blue");
  });
});
</script>
</head>
<body>

<p>鼠標移動到該段落。</p>
<button id='eilin'>單擊</button>
<button class='eiling'>雙擊</button>
</body>
</html>

鍵盤事件
    keypress:鍵被按下
    keydown:鍵被按下的過程
    keyup:鍵盤被鬆開

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
i= 0;
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","yellow");
  });
  $("input").keyup(function(){
    $("input").css("background-color","pink");
  });
  $("input").keypress(function(){
    $("span").text(i+1);
  });
});
</script>
</head>
<body>

輸入你的名字: <input type="text">
<p>在以上輸入框中輸入你的名字。在按鍵按下後輸入框背景顏色會改變。</p>
<p>鍵盤按下的次數:<span>0</span></p>
</body>
</html>

表單事件
    submit:當提交表單時，會發生 submit 事件。該事件只適用於 <form> 元素。
    blur:當失去焦點時發生 blur 事件
    focus:得到焦點時發生 focus 事件
    change:字段改變時警報文本

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("form").submit(function(){
    alert("提交");
  });
  $("input[name='FirstName']").change(function(){
    alert("文本已被修改");
  });
  $("input[name='LastName']").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
  });
  $("input").blur(function(){
    alert("輸入框失去了焦點");
  });
});
</script>
</head>
<body>

<form action="">
First name: 
<input type="text" name="FirstName" value="Mickey"><br>
Last name: 
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
<p><span>12</span></p>
</form> 

</body>
</html>

文檔/窗口事件
    load:當指定的元素已加載時，會發生 load 事件(適用於任何帶有 URL的元素（好比圖像、腳本、框架、內聯框架）以及 window 對象)
    resize:當調整瀏覽器窗口大小時，發生 resize 事件
    scroll:當用戶滾動指定的元素時，會發生 scroll 事件(全部可滾動的元素和 window 對象（瀏覽器窗口）)
    unload:當離開頁面時，顯示提示消息

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
x=0;
y=0;
$(document).ready(function(){
  $("div").scroll(function(){
    $("span").text(x+=1);
  });
  $(window).unload(function(){
      alert('unload');
  });
  $(window).resize(function(){
      $('span').text(y+=1);
  });
  $('image').load(function(){
      alert('load successful');
  });
});
</script>
</head>
<body>

<p>嘗試滾動 div 中的滾動條</p>
<div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">菜鳥教程 —— 學的不只是技術，更是夢想！菜鳥教程 —— 學的不只是技術，更是夢想！
<br><br>
菜鳥教程 —— 學的不只是技術，更是夢想！菜鳥教程 —— 學的不只是技術，更是夢想！</div>
<p>滾動了 <span>0</span> 次。</p>
<p>當你點擊 <a href="//www.runoob.com">這個連接</a>, 或者關閉窗口，alert 窗口會彈出。</p>
<image src="//www.runoob.com/wp-content/uploads/2015/11/rock600x400.jpg" alt="圖片文字描述" width="304" height="236"/>
</body>
</html>

轉載於猿2048:➵《jQuery(二)事件》php

相關標籤/搜索

每日一句

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