html--前端jquery初识
一、把 jQuery 添加到您的网页
如需使用 jQuery，需要下载 jQuery 库，然后把它包含在希望使用的网页中。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：
<head> <script src="js/jquery-3.4.1.js"></script> </head>
请注意，<script> 标签应该位于页面的 <head> 部分。
二、选择器参考
简单的实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.js"></script> </head> <body> <!-- 基本选择器--> <div id="div1">我正在学习jquery</div> <p>jquery是一门很牛X的脚本语言</p> <div class="div2"> My name is yusheng_liang </div> <!--层级选择器--> <form> <label>Name:</label> <input name="name"/> <fieldset> <label>Newsletter:</label> <input name="newsletter"/> </fieldset> </form> <input name="none"/> <script> <!--基本选择器--> $("#div1").text("jquery"); //id选择器 $(".div2").css("color","red"); //类选择器 $("p").css("font-size","40px"); //标签选择器 <!--层级选择器--> var ret = $("form input"); //找到表单中所有的 input 元素，结果：[ <input name="name" />, <input name="newsletter" /> ] var ret = $("form > input"); // 匹配表单中所有的子级input元素，结果：[ <input name="name" /> ] var ret = $("label + input"); //匹配所有跟在 label 后面的 input 元素，结果：[ <input name="name" />, <input name="newsletter" /> ] var ret = $("form ~ input"); //找到所有与表单同辈的 input 元素，结果：[ <input name="none" /> ] </script> </body> </html>
jquery实现左边菜单示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>left_menu</title> <style> body{ margin: 0; } .hide{ display: none; } .top{ height: 48px; background-color: darkturquoise; } .outer{ float: left; width: 20%; height: 600px; background-color: darkgray; } .outer .menu .title{ border: 1px solid darkcyan; background-color: darkcyan; } .content{ float: left; width: 80%; background-color: bisque; height: 600px; } </style> <script src="js/jquery-3.4.1.js"></script> </head> <body> <div class="top"></div> <div class="outer"> <div class="menu"> <div class="title" onclick="Show(this);">菜单一</div> <ul class="con"> <li>菜单一中的功能一</li> <li>菜单一中的功能二</li> <li>菜单一中的功能三</li> </ul> </div> <div class="menu"> <div class="title" onclick="Show(this);">菜单二</div> <ul class="con hide"> <li>菜单二中的功能一</li> <li>菜单二中的功能二</li> <li>菜单二中的功能三</li> </ul> </div> <div class="menu"> <div class="title" onclick="Show(this);">菜单三</div> <ul class="con hide"> <li>菜单三中的功能一</li> <li>菜单三中的功能二</li> <li>菜单三中的功能三</li> </ul> </div> </div> <div class="content"></div> <script> function Show(self) { $(self).next().removeClass("hide"); $(self).parent().siblings().find(".con").addClass("hide"); } </script> </body> </html>
jquery实现tab栏示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquer_tab</title> <script src="js/jquery-3.4.1.js"></script> <style> *{ margin: 0; padding: 0; } .current{ background-color: cornflowerblue; color: white; } .tab{ height: 40px; background-color: darkgray; } li{ display: inline; list-style: none; padding: 20px; } .outer{ width: 70%; margin: 0 auto; height: 300px; background-color: bisque; } .content{ height: auto; padding: 50px; background-color: darkcyan; } .hide{ display: none; } </style> </head> <body> <div class="outer"> <ul class="tab"> <li sel="c1" class="current" onclick="Tab(this);">菜单一</li> <li sel="c2" onclick="Tab(this);">菜单二</li> <li sel="c3" onclick="Tab(this);">菜单三</li> </ul> <div class="content"> <div id="c1">我是菜单一的内容</div> <div id="c2" class="hide">我是菜单二的内容</div> <div id="c3" class="hide">我是菜单三的内容</div> </div> </div> <script> function Tab(self) { $(self).addClass("current").siblings().removeClass("current"); var index = $(self).attr("sel"); $("#"+index).removeClass("hide").siblings().addClass("hide"); } </script> </body> </html>
