jQuery 選擇器 和 事件
阿新 • • 發佈：2020-11-02
jQuery 選擇器 和 事件
1.jQuery的用處
jquery是一個簡潔而快速的 JavaScript 庫，可用於簡化事件處理，HTML 文件遍歷，Ajax 互動和動畫，以便快速開發網站
2.jQuery 基本公式：
$(選擇器).事件()
<body> <a href="" id="text">點我</a> <!--引用jQuery--> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> //jQuery公式 $('#text').click(function () { alert('hello jQuery'); }) </script> </body>
3.jQuery 選擇器：
以前 操作標籤是要先document.getElementById() 先獲取節點在操作 但用jQuery 就簡單的多了
jQuery的選擇器：
<script type="text/javascript"> //jQuery中 css的所有選擇器都能用 $('p').click()//標籤選擇器 $('#id1').click()//id選擇器 $('.class1').click()//類選擇器 </script>
其他選擇器可參考文件：https://www.runoob.com/jquery/jquery-selectors.html
4.jQuery事件：
例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #divMove{ width: 400px; height: 500px; border: 1px solid red; } </style> </head> <body> mouse ：<span id="mouseMove"></span> <div id="divMove">在這裡移動滑鼠試試</div> <!--引用jQuery--> <script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> //當頁面元素載入完畢之後，相應事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+e.pageX + 'y'+e.pageY) }) }) </script> </body> </html>
執行結果：
其他事件文件：https://www.runoob.com/jquery/jquery-ref-events.html
5.jQuery操作DOM：
參考文件：https://www.jb51.net/article/39099.htm