1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 在线jquery--> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 <!-- <script src="./lib/jquery-3.4.1.js"></script>--> 9 </head> 10 <body> 11 <!-- 12 公式： $(selector).action() $代表jQuery selector代表选择器,就是css选择器 id用# class 用. 13 14 --> 15 <a href="" id="test-jquery">点我</a> 16 <script> 17 $('#test-jquery').click(function () { 18 alert('hello,jQuery'); 19 }) 20 </script> 21 22 23 </body>
<!-- 在线jquery-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
选择器：
1 <script> 2 // 原生js 3 //标签 4 document.getElementsByTagName(); 5 // id 6 document.getElementById(); 7 // class 8 document.getElementsByClassName(); 9 10 // jQuery css中的选择器它全能用 11 $('p').click(); // 标签选择器 12 $('#id1').click(); // id选择器 13 $('.class1').click(); // class选择器 14 15 16 17 </script>
文档工具:#id | jQuery API 3.2 中文文档 | jQuery API 在线手册 (cuishifeng.cn)
jQuery事件：
鼠标事件，键盘事件，其它事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 在线jquery--> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 <style> 9 #divMove{ 10 500px; 11 height: 500px; 12 background-color: blue; 13 border: 2px solid saddlebrown; 14 } 15 </style> 16 </head> 17 <body> 18 <!--要求：获取鼠标当前的一个坐标--> 19 mouse:<span id="mouseMove"></span> 20 <div id="divMove"> 21 在这里移动鼠标试试
22 </div> 23 24 <script> 25 // 当网页元素加载完毕后响应事件 26 /*$(document).ready(function () { 27 28 }) 29 */ 30 // 上面代码可以简写为 31 $(function () { 32 $('#divMove').mousemove(function (e) { 33 $('#mouseMove').text('x' + e.pageX + 'y' + e.pageY); 34 }) 35 36 }) 37 38 </script> 39 40 </body>
操作DOM：
节点文本操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 在线jquery--> 7 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 8 </head> 9 <body> 10 <ul id="test-ul"> 11 <li class="js">JavaScript</li> 12 <li name="python">Python</li> 13 </ul> 14 15 <script> 16 $('#test-ul li[name=python]').css("color","red"); 17 </script> 18 19 </body> 20 </html>