jQuery筆記-事件3
阿新 • • 發佈：2021-12-12
一
當元素失去焦點時觸發 blur 事件。
例子：當所有與表單同輩的 input 元素（案例中符合條件的是最後一個input）失去焦點，出現提示框，輸出Hello World，注意需要先給焦點，才能失去焦點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> </body> </html> <script> console.log($("form ~ input")) $("form ~ input").blur( function () { alert("Hello World!"); } ); </script>
二
當元素的值發生改變時，會發生 change 事件。
當元素的值改變時發生 change 事件（僅適用於表單欄位）。
change() 方法觸發 change 事件，或規定當發生 change 事件時執行的函式。
注意：當用於 select 元素時，change 事件會在選擇某個選項時發生。當用於 text field 或 text area 時，change 事件會在元素失去焦點時發生。
例子：當所有與表單同輩的 input 元素（案例中符合條件的是最後一個input）發生改變，出現提示框，輸出"改變"，注意需要先給焦點，才能失去焦點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> </head> <body> <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> </body> </html> <script> console.log($("form ~ input")) $("form ~ input").change( function () { alert("改變!"); } ); </script>
當單擊元素時，發生 click 事件。
例子：當按鈕被點選時，div背景色變黃
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/jquery/dist/jquery.min.js"></script> </head> <body> <button>click me</button> <div id="div1"> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> 兩個黃鸝鳴翠柳，一行白鷺上青天 <br> </div> </body> </html> <script> const div1=document.getElementById('div1') $("button").click( function () { $(div1).css("background-color","yellow",); }, ) </script>