一、引用jQuery
在浏览器中输入https://jquery.com/，，进入后选择download
选择第二个右键链接另存为
下载成功后将jQuery拖入到JS文件夹中
在HTML文档中的</head>结束标签之前引用
<head> <meta charset="utf-8" /> <title>jQuery练习</title> <link rel="stylesheet" href="./css/index.css"> <script src="./js/jquery-3.7.1.js"></script> </head>
之后可在JS中创建代码
二、jQuery相关语法
1.选择器
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <button>点我</button> </body> </html>
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>点我</button> </body> </html>
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">这是一个标题</h2> <p class="test">这是一个段落。</p> <p>这是另外一个段落。</p> <button>点我</button> </body> </html>
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另外一个段落</p> <button>点我</button> </body> </html>
2.jQuery 事件
演示 jQuery jQuery click() 事件.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我，我就会消失。</p> <p>点我消失!</p> <p>点我也消失!</p> </body> </html>
演示 jQuery dblclick() 事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); }); </script> </head> <body> <p id="p1">鼠标指针进入此处，会看到弹窗。</p> </body> </html>
演示 jQuery mouseenter() 事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); }); </script> </head> <body> <p id="p1">鼠标指针进入此处，会看到弹窗。</p> </body> </html>
演示 jQuery mouseleave() 事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); }); </script> </head> <body> <p id="p1">这是一个段落。</p> </body> </html>
演示 jQuery hover() 事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ) }); </script> </head> <body> <p id="p1">这是一个段落。</p> </body> </html>
3.jQuery 隐藏/显示
演示 jQuery hide() 方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>如果你点我，我就会消失。</p> <p>继续点我!</p> <p>接着点我!</p> </body> </html>
