web前端學習（五）JQuery學習筆記部分（2）-- JQuery選擇器和事件
阿新 • • 發佈：2018-12-13
1、選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").text("p元素被修改了"); $("#p2").text("id為p2的元素被修改了。") }); }); </script> </head> <body> <p>p1</p> <p id="p2">p2</p> <button id="btn">按鈕</button> </body> </html>
需要什麼工具直接查詢API就可以了。
2、事件常用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $(this).hide();/*單擊隱藏*/ }); $("#btn2").dblclick(function(){ $(this).hide();/*雙擊隱藏*/ }); $("#btn3").mouseleave(function(){ $(this).hide();/*當滑鼠移動到按鈕上的時候*/ }); $("#btn4").mousedown(function(){ $(this).hide();/*當滑鼠按下去，click是點選完*/ }); $("#btn5").mouseout(function(){ $(this).hide();/*當滑鼠從上面離開*/ }); $("#btn6").mouseover(function(){ $(this).hide();/*當滑鼠在上面*/ }); }); </script> </head> <body> <button id="btn1">按鈕1</button> <button id="btn2">按鈕2</button> <button id="btn3">按鈕3</button> <button id="btn4">按鈕4</button> <button id="btn5">按鈕5</button> <button id="btn6">按鈕6</button> </body> </html>
3、事件繫結、解除繫結事件
3.1、jQuery事件：
常用事件方法
繫結事件
解除繫結事件
事件的目標
事件的冒泡
自定義事件